Merge branch 'main' into nv/10282

* chore: refactored the config builder and added base config builder

* chore: added a common chart wrapper

* chore: tsc fix

* fix: pr review changes

* fix: pr review changes

* chore: added different tooltips

* chore: removed dayjs extention

* feat: added new barpanel component

* fix: added fix for pr review changes

* chore: added support for bar alignment configuration

* chore: updated structure for bar panel

* test: added tests for barpanel hooks + utils

.devenv/docker/signoz-otel-collector/compose.yaml

@@ -4,7 +4,6 @@ services:
     container_name: signoz-otel-collector-dev
     command:
       - --config=/etc/otel-collector-config.yaml
-      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
     environment:

.github/CODEOWNERS

@@ -43,6 +43,12 @@
 /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,5 +14,8 @@
 	},
 	"[sql]": {
 		"editor.defaultFormatter": "adpyke.vscode-sql-formatter"
+	},
+	"[html]": {
+		"editor.defaultFormatter": "vscode.html-language-features"
 	}
 }

conf/example.yaml

@@ -193,6 +193,15 @@ 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

deploy/docker-swarm/docker-compose.ha.yaml

@@ -214,7 +214,6 @@ services:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
       - --copy-path=/var/tmp/collector-config.yaml
-      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
       - ../common/signoz/otel-collector-opamp-config.yaml:/etc/manager-config.yaml

deploy/docker-swarm/docker-compose.yaml

@@ -155,7 +155,6 @@ services:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
       - --copy-path=/var/tmp/collector-config.yaml
-      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     configs:
       - source: otel-collector-config
         target: /etc/otel-collector-config.yaml

deploy/docker/docker-compose.ha.yaml

@@ -219,7 +219,6 @@ services:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
       - --copy-path=/var/tmp/collector-config.yaml
-      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
       - ../common/signoz/otel-collector-opamp-config.yaml:/etc/manager-config.yaml

deploy/docker/docker-compose.yaml

@@ -150,7 +150,6 @@ services:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
       - --copy-path=/var/tmp/collector-config.yaml
-      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
       - ../common/signoz/otel-collector-opamp-config.yaml:/etc/manager-config.yaml

frontend/__mocks__/uplotMock.ts

@@ -12,6 +12,8 @@ export interface MockUPlotInstance {
 export interface MockUPlotPaths {
 	spline: jest.Mock;
 	bars: jest.Mock;
+	linear: jest.Mock;
+	stepped: jest.Mock;
 }
 
 // Create mock instance methods
@@ -23,10 +25,23 @@ const createMockUPlotInstance = (): MockUPlotInstance => ({
 	setSeries: jest.fn(),
 });
 
-// Create mock paths
-const mockPaths: MockUPlotPaths = {
-	spline: jest.fn(),
-	bars: jest.fn(),
+// Path builder: (self, seriesIdx, idx0, idx1) => paths or null
+const createMockPathBuilder = (name: string): jest.Mock =>
+	jest.fn(() => ({
+		name, // To test if the correct pathBuilder is used
+		stroke: jest.fn(),
+		fill: jest.fn(),
+		clip: jest.fn(),
+	}));
+
+// Create mock paths - linear, spline, stepped needed by UPlotSeriesBuilder.getPathBuilder
+const mockPaths = {
+	spline: jest.fn(() => createMockPathBuilder('spline')),
+	bars: jest.fn(() => createMockPathBuilder('bars')),
+	linear: jest.fn(() => createMockPathBuilder('linear')),
+	stepped: jest.fn((opts?: { align?: number }) =>
+		createMockPathBuilder(`stepped-(${opts?.align ?? 0})`),
+	),
 };
 
 // Mock static methods

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

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

frontend/src/api/dynamicVariables/getFieldValues.ts

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

frontend/src/api/metricsExplorer/v2/getMetricMetadata.ts

@@ -0,0 +1,29 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorResponseV2, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { MetricMetadataResponse } from 'types/api/metricsExplorer/v2/getMetricMetadata';
+
+export const getMetricMetadata = async (
+	metricName: string,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponseV2<MetricMetadataResponse> | ErrorResponseV2> => {
+	try {
+		const encodedMetricName = encodeURIComponent(metricName);
+		const response = await axios.get(
+			`/metrics/metadata?metricName=${encodedMetricName}`,
+			{
+				signal,
+				headers,
+			},
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};

frontend/src/components/NewSelect/CustomMultiSelect.tsx

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

frontend/src/components/NewSelect/CustomSelect.tsx

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

frontend/src/components/NewSelect/types.ts

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

frontend/src/components/QuickFilters/QuickFilters.tsx

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

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

@@ -1,4 +1,8 @@
 import { ENVIRONMENT } from 'constants/env';
+import {
+	ApiMonitoringParams,
+	useApiMonitoringParams,
+} from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
 	otherFiltersResponse,
@@ -18,10 +22,15 @@ import { QuickFiltersConfig } from './constants';
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: jest.fn(),
 }));
+jest.mock('container/ApiMonitoring/queryParams');
 
 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 BASE_URL = ENVIRONMENT.baseURL;
 const SIGNAL = SignalType.LOGS;
@@ -84,6 +93,28 @@ 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();
 });
@@ -112,6 +143,10 @@ beforeEach(() => {
 		lastUsedQuery: 0,
 		redirectWithQueryBuilderData,
 	});
+	mockUseApiMonitoringParams.mockReturnValue([
+		{ showIP: true } as ApiMonitoringParams,
+		mockSetApiMonitoringParams,
+	]);
 	setupServer();
 });
 
@@ -251,6 +286,24 @@ 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/ApiMonitoring/Explorer/Domains/DomainList.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { LoadingOutlined } from '@ant-design/icons';
-import { Spin, Table, Typography } from 'antd';
+import { Spin, Table } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
@@ -14,11 +14,13 @@ import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { useListOverview } from 'hooks/thirdPartyApis/useListOverview';
 import { get } from 'lodash-es';
+import { MoveUpRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { HandleChangeQueryDataV5 } from 'types/common/operations.types';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import DOCLINKS from 'utils/docLinks';
 
 import { ApiMonitoringHardcodedAttributeKeys } from '../../constants';
 import { DEFAULT_PARAMS, useApiMonitoringParams } from '../../queryParams';
@@ -125,51 +127,67 @@ function DomainList(): JSX.Element {
 					hardcodedAttributeKeys={ApiMonitoringHardcodedAttributeKeys}
 				/>
 			</div>
-			<Table
-				className={cx('api-monitoring-domain-list-table')}
-				dataSource={isFetching || isLoading ? [] : formattedDataForTable}
-				columns={columnsConfig}
-				loading={{
-					spinning: isFetching || isLoading,
-					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-				}}
-				locale={{
-					emptyText:
-						isFetching || isLoading ? null : (
-							<div className="no-filtered-domains-message-container">
-								<div className="no-filtered-domains-message-content">
-									<img
-										src="/Icons/emptyState.svg"
-										alt="thinking-emoji"
-										className="empty-state-svg"
-									/>
+			{!isFetching && !isLoading && formattedDataForTable.length === 0 && (
+				<div className="no-filtered-domains-message-container">
+					<div className="no-filtered-domains-message-content">
+						<img
+							src="/Icons/emptyState.svg"
+							alt="thinking-emoji"
+							className="empty-state-svg"
+						/>
 
-									<Typography.Text className="no-filtered-domains-message">
-										This query had no results. Edit your query and try again!
-									</Typography.Text>
-								</div>
+						<div className="no-filtered-domains-message">
+							<div className="no-domain-title">
+								No External API calls detected with applied filters.
 							</div>
-						),
-				}}
-				scroll={{ x: true }}
-				tableLayout="fixed"
-				onRow={(record, index): { onClick: () => void; className: string } => ({
-					onClick: (): void => {
-						if (index !== undefined) {
-							const dataIndex = formattedDataForTable.findIndex(
-								(item) => item.key === record.key,
-							);
-							setSelectedDomainIndex(dataIndex);
-							setParams({ selectedDomain: record.domainName });
-							logEvent('API Monitoring: Domain name row clicked', {});
-						}
-					},
-					className: 'expanded-clickable-row',
-				})}
-				rowClassName={(_, index): string =>
-					index % 2 === 0 ? 'table-row-dark' : 'table-row-light'
-				}
-			/>
+							<div className="no-domain-subtitle">
+								Ensure all HTTP client spans are being sent with kind as{' '}
+								<span className="attribute">Client</span> and url set in{' '}
+								<span className="attribute">url.full</span> or{' '}
+								<span className="attribute">http.url</span> attribute.
+							</div>
+							<a
+								href={DOCLINKS.EXTERNAL_API_MONITORING}
+								target="_blank"
+								rel="noreferrer"
+								className="external-api-doc-link"
+							>
+								Learn how External API monitoring works in SigNoz{' '}
+								<MoveUpRight size={14} />
+							</a>
+						</div>
+					</div>
+				</div>
+			)}
+			{(isFetching || isLoading || formattedDataForTable.length > 0) && (
+				<Table
+					className="api-monitoring-domain-list-table"
+					dataSource={isFetching || isLoading ? [] : formattedDataForTable}
+					columns={columnsConfig}
+					loading={{
+						spinning: isFetching || isLoading,
+						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+					}}
+					scroll={{ x: true }}
+					tableLayout="fixed"
+					onRow={(record, index): { onClick: () => void; className: string } => ({
+						onClick: (): void => {
+							if (index !== undefined) {
+								const dataIndex = formattedDataForTable.findIndex(
+									(item) => item.key === record.key,
+								);
+								setSelectedDomainIndex(dataIndex);
+								setParams({ selectedDomain: record.domainName });
+								logEvent('API Monitoring: Domain name row clicked', {});
+							}
+						},
+						className: 'expanded-clickable-row',
+					})}
+					rowClassName={(_, index): string =>
+						index % 2 === 0 ? 'table-row-dark' : 'table-row-light'
+					}
+				/>
+			)}
 			{selectedDomainIndex !== -1 && (
 				<DomainDetails
 					domainData={formattedDataForTable[selectedDomainIndex]}

frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss

@@ -180,10 +180,59 @@
 
 	.no-filtered-domains-message {
 		margin-top: 8px;
+		display: flex;
+		gap: 8px;
+		flex-direction: column;
+
+		.no-domain-title {
+			color: var(--bg-vanilla-100, #fff);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 20px; /* 142.857% */
+		}
+
+		.no-domain-subtitle {
+			color: var(--bg-vanilla-400, #c0c1c3);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+
+			.attribute {
+				font-family: 'Space Mono';
+			}
+		}
+
+		.external-api-doc-link {
+			display: flex;
+			flex-direction: row;
+			gap: 4px;
+			align-items: center;
+		}
 	}
 }
 
 .lightMode {
+	.no-filtered-domains-message-container {
+		.no-filtered-domains-message-content {
+			.no-filtered-domains-message {
+				.no-domain-title {
+					color: var(--text-ink-500);
+				}
+
+				.no-domain-subtitle {
+					color: var(--text-ink-400);
+
+					.attribute {
+						font-family: 'Space Mono';
+					}
+				}
+			}
+		}
+	}
 	.api-monitoring-domain-list-table {
 		.ant-table {
 			.ant-table-thead > tr > th {

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

@@ -53,6 +53,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						transitiveDescendants: {},
 						hasCycle: false,
 					}}
 				/>
@@ -75,6 +76,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						transitiveDescendants: {},
 						hasCycle: false,
 					}}
 				/>
@@ -98,6 +100,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						transitiveDescendants: {},
 						hasCycle: false,
 					}}
 				/>
@@ -139,6 +142,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						transitiveDescendants: {},
 						hasCycle: false,
 					}}
 				/>
@@ -169,6 +173,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						transitiveDescendants: {},
 						hasCycle: false,
 					}}
 				/>
@@ -191,6 +196,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						transitiveDescendants: {},
 						hasCycle: false,
 					}}
 				/>

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

@@ -14,6 +14,7 @@ const baseDependencyData = {
 	order: [],
 	graph: {},
 	parentDependencyGraph: {},
+	transitiveDescendants: {},
 	hasCycle: false,
 };
 

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

@@ -223,6 +223,16 @@ 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);

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

@@ -246,10 +246,26 @@ export const buildDependencyGraph = (
 
 	const hasCycle = topologicalOrder.length !== Object.keys(dependencies)?.length;
 
+	// Pre-compute transitive descendants by walking topological order in reverse.
+	// Each node's transitive descendants = direct children + their transitive descendants.
+	const transitiveDescendants: VariableGraph = {};
+	for (let i = topologicalOrder.length - 1; i >= 0; i--) {
+		const node = topologicalOrder[i];
+		const desc = new Set<string>();
+		for (const child of adjList[node] || []) {
+			desc.add(child);
+			for (const d of transitiveDescendants[child] || []) {
+				desc.add(d);
+			}
+		}
+		transitiveDescendants[node] = Array.from(desc);
+	}
+
 	return {
 		order: topologicalOrder,
 		graph: adjList,
 		parentDependencyGraph: buildParentDependencyGraph(adjList),
+		transitiveDescendants,
 		hasCycle,
 		cycleNodes,
 	};

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

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

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

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

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

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

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

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

@@ -0,0 +1,108 @@
+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 { 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 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;
+
+		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,
+		});
+	});
+
+	return builder;
+}

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

@@ -83,7 +83,7 @@ export const prepareUPlotConfig = ({
 			drawStyle: DrawStyle.Line,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
+			spanGaps: true,
 			lineStyle: LineStyle.Solid,
 			lineInterpolation: LineInterpolation.Spline,
 			showPoints: VisibilityMode.Never,

frontend/src/container/DashboardContainer/visualization/panels/types.ts

@@ -14,6 +14,11 @@ export interface GraphVisibilityState {
 	dataIndex: SeriesVisibilityItem[];
 }
 
+export interface SeriesVisibilityState {
+	labels: string[];
+	visibility: boolean[];
+}
+
 /**
  * Context in which a panel is rendered. Used to vary behavior (e.g. persistence,
  * interactions) per context.

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

@@ -0,0 +1,271 @@
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+import type { GraphVisibilityState } from '../../types';
+import {
+	getStoredSeriesVisibility,
+	updateSeriesVisibilityToLocalStorage,
+} from '../legendVisibilityUtils';
+
+describe('legendVisibilityUtils', () => {
+	const storageKey = LOCALSTORAGE.GRAPH_VISIBILITY_STATES;
+
+	beforeEach(() => {
+		localStorage.clear();
+		jest.spyOn(window.localStorage.__proto__, 'getItem');
+		jest.spyOn(window.localStorage.__proto__, 'setItem');
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	describe('getStoredSeriesVisibility', () => {
+		it('returns null when there is no stored visibility state', () => {
+			const result = getStoredSeriesVisibility('widget-1');
+
+			expect(result).toBeNull();
+			expect(localStorage.getItem).toHaveBeenCalledWith(storageKey);
+		});
+
+		it('returns null when widget has no stored dataIndex', () => {
+			const stored: GraphVisibilityState[] = [
+				{
+					name: 'widget-1',
+					dataIndex: [],
+				},
+			];
+
+			localStorage.setItem(storageKey, JSON.stringify(stored));
+
+			const result = getStoredSeriesVisibility('widget-1');
+
+			expect(result).toBeNull();
+		});
+
+		it('returns visibility array by index when widget state exists', () => {
+			const stored: GraphVisibilityState[] = [
+				{
+					name: 'widget-1',
+					dataIndex: [
+						{ label: 'CPU', show: true },
+						{ label: 'Memory', show: false },
+					],
+				},
+				{
+					name: 'widget-2',
+					dataIndex: [{ label: 'Errors', show: true }],
+				},
+			];
+
+			localStorage.setItem(storageKey, JSON.stringify(stored));
+
+			const result = getStoredSeriesVisibility('widget-1');
+
+			expect(result).not.toBeNull();
+			expect(result).toEqual({
+				labels: ['CPU', 'Memory'],
+				visibility: [true, false],
+			});
+		});
+
+		it('returns visibility by index including duplicate labels', () => {
+			const stored: GraphVisibilityState[] = [
+				{
+					name: 'widget-1',
+					dataIndex: [
+						{ label: 'CPU', show: true },
+						{ label: 'CPU', show: false },
+						{ label: 'Memory', show: false },
+					],
+				},
+			];
+
+			localStorage.setItem(storageKey, JSON.stringify(stored));
+
+			const result = getStoredSeriesVisibility('widget-1');
+
+			expect(result).not.toBeNull();
+			expect(result).toEqual({
+				labels: ['CPU', 'CPU', 'Memory'],
+				visibility: [true, false, false],
+			});
+		});
+
+		it('returns null on malformed JSON in localStorage', () => {
+			localStorage.setItem(storageKey, '{invalid-json');
+
+			const result = getStoredSeriesVisibility('widget-1');
+
+			expect(result).toBeNull();
+		});
+
+		it('returns null when widget id is not found', () => {
+			const stored: GraphVisibilityState[] = [
+				{
+					name: 'another-widget',
+					dataIndex: [{ label: 'CPU', show: true }],
+				},
+			];
+
+			localStorage.setItem(storageKey, JSON.stringify(stored));
+
+			const result = getStoredSeriesVisibility('widget-1');
+
+			expect(result).toBeNull();
+		});
+	});
+
+	describe('updateSeriesVisibilityToLocalStorage', () => {
+		it('creates new visibility state when none exists', () => {
+			const seriesVisibility = [
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: false },
+			];
+
+			updateSeriesVisibilityToLocalStorage('widget-1', seriesVisibility);
+
+			const stored = getStoredSeriesVisibility('widget-1');
+
+			expect(stored).not.toBeNull();
+			expect(stored).toEqual({
+				labels: ['CPU', 'Memory'],
+				visibility: [true, false],
+			});
+		});
+
+		it('adds a new widget entry when other widgets already exist', () => {
+			const existing: GraphVisibilityState[] = [
+				{
+					name: 'widget-existing',
+					dataIndex: [{ label: 'Errors', show: true }],
+				},
+			];
+			localStorage.setItem(storageKey, JSON.stringify(existing));
+
+			const newVisibility = [{ label: 'CPU', show: false }];
+
+			updateSeriesVisibilityToLocalStorage('widget-new', newVisibility);
+
+			const stored = getStoredSeriesVisibility('widget-new');
+
+			expect(stored).not.toBeNull();
+			expect(stored).toEqual({ labels: ['CPU'], visibility: [false] });
+		});
+
+		it('updates existing widget visibility when entry already exists', () => {
+			const initialVisibility: GraphVisibilityState[] = [
+				{
+					name: 'widget-1',
+					dataIndex: [
+						{ label: 'CPU', show: true },
+						{ label: 'Memory', show: true },
+					],
+				},
+			];
+
+			localStorage.setItem(storageKey, JSON.stringify(initialVisibility));
+
+			const updatedVisibility = [
+				{ label: 'CPU', show: false },
+				{ label: 'Memory', show: true },
+			];
+
+			updateSeriesVisibilityToLocalStorage('widget-1', updatedVisibility);
+
+			const stored = getStoredSeriesVisibility('widget-1');
+
+			expect(stored).not.toBeNull();
+			expect(stored).toEqual({
+				labels: ['CPU', 'Memory'],
+				visibility: [false, true],
+			});
+		});
+
+		it('silently handles malformed existing JSON without throwing', () => {
+			localStorage.setItem(storageKey, '{invalid-json');
+
+			expect(() =>
+				updateSeriesVisibilityToLocalStorage('widget-1', [
+					{ label: 'CPU', show: true },
+				]),
+			).not.toThrow();
+		});
+
+		it('when existing JSON is malformed, overwrites with valid data for the widget', () => {
+			localStorage.setItem(storageKey, '{invalid-json');
+
+			updateSeriesVisibilityToLocalStorage('widget-1', [
+				{ label: 'x-axis', show: true },
+				{ label: 'CPU', show: false },
+			]);
+
+			const stored = getStoredSeriesVisibility('widget-1');
+			expect(stored).not.toBeNull();
+			expect(stored).toEqual({
+				labels: ['x-axis', 'CPU'],
+				visibility: [true, false],
+			});
+			const expected = [
+				{
+					name: 'widget-1',
+					dataIndex: [
+						{ label: 'x-axis', show: true },
+						{ label: 'CPU', show: false },
+					],
+				},
+			];
+			expect(localStorage.setItem).toHaveBeenCalledWith(
+				storageKey,
+				JSON.stringify(expected),
+			);
+		});
+
+		it('preserves other widgets when updating one widget', () => {
+			const existing: GraphVisibilityState[] = [
+				{ name: 'widget-a', dataIndex: [{ label: 'A', show: true }] },
+				{ name: 'widget-b', dataIndex: [{ label: 'B', show: false }] },
+			];
+			localStorage.setItem(storageKey, JSON.stringify(existing));
+
+			updateSeriesVisibilityToLocalStorage('widget-b', [
+				{ label: 'B', show: true },
+			]);
+
+			expect(getStoredSeriesVisibility('widget-a')).toEqual({
+				labels: ['A'],
+				visibility: [true],
+			});
+			expect(getStoredSeriesVisibility('widget-b')).toEqual({
+				labels: ['B'],
+				visibility: [true],
+			});
+		});
+
+		it('calls setItem with storage key and stringified visibility states', () => {
+			updateSeriesVisibilityToLocalStorage('widget-1', [
+				{ label: 'CPU', show: true },
+			]);
+
+			expect(localStorage.setItem).toHaveBeenCalledTimes(1);
+			expect(localStorage.setItem).toHaveBeenCalledWith(
+				storageKey,
+				expect.any(String),
+			);
+			const [_, value] = (localStorage.setItem as jest.Mock).mock.calls[0];
+			expect((): void => JSON.parse(value)).not.toThrow();
+			expect(JSON.parse(value)).toEqual([
+				{ name: 'widget-1', dataIndex: [{ label: 'CPU', show: true }] },
+			]);
+		});
+
+		it('stores empty dataIndex when seriesVisibility is empty', () => {
+			updateSeriesVisibilityToLocalStorage('widget-1', []);
+
+			const raw = localStorage.getItem(storageKey);
+			expect(raw).not.toBeNull();
+			const parsed = JSON.parse(raw ?? '[]');
+			expect(parsed).toEqual([{ name: 'widget-1', dataIndex: [] }]);
+			expect(getStoredSeriesVisibility('widget-1')).toBeNull();
+		});
+	});
+});

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

@@ -88,7 +88,7 @@ export function buildBaseConfig({
 		max: undefined,
 		softMin: widget.softMin ?? undefined,
 		softMax: widget.softMax ?? undefined,
-		// thresholds,
+		thresholds: thresholdOptions,
 		logBase: widget.isLogScale ? 10 : undefined,
 		distribution: widget.isLogScale
 			? DistributionType.Logarithmic

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

@@ -1,15 +1,20 @@
 import { LOCALSTORAGE } from 'constants/localStorage';
 
-import { GraphVisibilityState, SeriesVisibilityItem } from '../types';
+import {
+	GraphVisibilityState,
+	SeriesVisibilityItem,
+	SeriesVisibilityState,
+} from '../types';
 
 /**
- * Retrieves the visibility map for a specific widget from localStorage
+ * Retrieves the stored series visibility for a specific widget from localStorage by index.
+ * Index 0 is the x-axis (time); indices 1, 2, ... are data series (same order as uPlot plot.series).
  * @param widgetId - The unique identifier of the widget
- * @returns A Map of series labels to their visibility state, or null if not found
+ * @returns visibility[i] = show state for series at index i, or null if not found
  */
 export function getStoredSeriesVisibility(
 	widgetId: string,
-): Map<string, boolean> | null {
+): SeriesVisibilityState | null {
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 
@@ -24,8 +29,15 @@ export function getStoredSeriesVisibility(
 			return null;
 		}
 
-		return new Map(widgetState.dataIndex.map((item) => [item.label, item.show]));
-	} catch {
+		return {
+			labels: widgetState.dataIndex.map((item) => item.label),
+			visibility: widgetState.dataIndex.map((item) => item.show),
+		};
+	} catch (error) {
+		if (error instanceof SyntaxError) {
+			// If the stored data is malformed, remove it
+			localStorage.removeItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
+		}
 		// Silently handle parsing errors - fall back to default visibility
 		return null;
 	}
@@ -35,40 +47,31 @@ export function updateSeriesVisibilityToLocalStorage(
 	widgetId: string,
 	seriesVisibility: SeriesVisibilityItem[],
 ): void {
+	let visibilityStates: GraphVisibilityState[] = [];
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
-
-		let visibilityStates: GraphVisibilityState[];
-
-		if (!storedData) {
-			visibilityStates = [
-				{
-					name: widgetId,
-					dataIndex: seriesVisibility,
-				},
-			];
-		} else {
-			visibilityStates = JSON.parse(storedData);
+		visibilityStates = JSON.parse(storedData || '[]');
+	} catch (error) {
+		if (error instanceof SyntaxError) {
+			visibilityStates = [];
 		}
-		const widgetState = visibilityStates.find((state) => state.name === widgetId);
-
-		if (!widgetState) {
-			visibilityStates = [
-				...visibilityStates,
-				{
-					name: widgetId,
-					dataIndex: seriesVisibility,
-				},
-			];
-		} else {
-			widgetState.dataIndex = seriesVisibility;
-		}
-
-		localStorage.setItem(
-			LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
-			JSON.stringify(visibilityStates),
-		);
-	} catch {
-		// Silently handle parsing errors - fall back to default visibility
 	}
+	const widgetState = visibilityStates.find((state) => state.name === widgetId);
+
+	if (widgetState) {
+		widgetState.dataIndex = seriesVisibility;
+	} else {
+		visibilityStates = [
+			...visibilityStates,
+			{
+				name: widgetId,
+				dataIndex: seriesVisibility,
+			},
+		];
+	}
+
+	localStorage.setItem(
+		LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
+		JSON.stringify(visibilityStates),
+	);
 }

frontend/src/container/LogDetailedView/TableView/TableViewActions.styles.scss

@@ -35,10 +35,10 @@
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
 		padding: 0px;
-		.group-by-clause {
+		.more-filter-actions {
 			display: flex;
 			align-items: center;
-			gap: 4px;
+			gap: 8px;
 			color: var(--bg-vanilla-400);
 			font-family: Inter;
 			font-size: 14px;
@@ -53,7 +53,7 @@
 			}
 		}
 
-		.group-by-clause:hover {
+		.more-filter-actions:hover {
 			background-color: unset !important;
 		}
 	}
@@ -65,7 +65,7 @@
 			border: 1px solid var(--bg-vanilla-400);
 			background: var(--bg-vanilla-100) !important;
 
-			.group-by-clause {
+			.more-filter-actions {
 				color: var(--bg-ink-400);
 			}
 		}

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable sonarjs/cognitive-complexity */
 import React, { useCallback, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
@@ -16,7 +17,12 @@ import { MetricsType } from 'container/MetricsApplication/constant';
 import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
-import { ArrowDownToDot, ArrowUpFromDot, Ellipsis } from 'lucide-react';
+import {
+	ArrowDownToDot,
+	ArrowUpFromDot,
+	Ellipsis,
+	RefreshCw,
+} from 'lucide-react';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
 import { useTimezone } from 'providers/Timezone';
 import {
@@ -205,6 +211,70 @@ export default function TableViewActions(
 		viewName,
 	]);
 
+	const handleReplaceFilter = useCallback((): void => {
+		if (!stagedQuery) {
+			return;
+		}
+		const normalizedDataType: DataTypes | undefined =
+			dataType && Object.values(DataTypes).includes(dataType as DataTypes)
+				? (dataType as DataTypes)
+				: undefined;
+
+		const updatedQuery = updateQueriesData(
+			stagedQuery,
+			'queryData',
+			(item, index) => {
+				// Only replace filters for index 0
+				if (index === 0) {
+					const newFilterItem: BaseAutocompleteData = {
+						key: fieldFilterKey,
+						type: fieldType || '',
+						dataType: normalizedDataType,
+					};
+
+					// Create new filter items array with single IN filter
+					const newFilters = {
+						items: [
+							{
+								id: '',
+								key: newFilterItem,
+								op: OPERATORS.IN,
+								value: [parseFieldValue(fieldData.value)],
+							},
+						],
+						op: 'AND',
+					};
+
+					// Clear the expression and update filters
+					return {
+						...item,
+						filters: newFilters,
+						filter: { expression: '' },
+					};
+				}
+
+				return item;
+			},
+		);
+
+		const queryData: ICurrentQueryData = {
+			name: viewName,
+			id: updatedQuery.id,
+			query: updatedQuery,
+		};
+
+		handleChangeSelectedView?.(ExplorerViews.LIST, queryData);
+	}, [
+		stagedQuery,
+		updateQueriesData,
+		fieldFilterKey,
+		fieldType,
+		dataType,
+		fieldData,
+		handleChangeSelectedView,
+		viewName,
+	]);
+
 	// Memoize textToCopy computation
 	const textToCopy = useMemo(() => {
 		let text = fieldData.value;
@@ -327,13 +397,21 @@ export default function TableViewActions(
 								content={
 									<div>
 										<Button
-											className="group-by-clause"
+											className="more-filter-actions"
 											type="text"
 											icon={<GroupByIcon />}
 											onClick={handleGroupByAttribute}
 										>
 											Group By Attribute
 										</Button>
+										<Button
+											className="more-filter-actions"
+											type="text"
+											icon={<RefreshCw size={14} />}
+											onClick={handleReplaceFilter}
+										>
+											Replace filters with this value
+										</Button>
 									</div>
 								}
 								rootClassName="table-view-actions-content"
@@ -405,13 +483,21 @@ export default function TableViewActions(
 							content={
 								<div>
 									<Button
-										className="group-by-clause"
+										className="more-filter-actions"
 										type="text"
 										icon={<GroupByIcon />}
 										onClick={handleGroupByAttribute}
 									>
 										Group By Attribute
 									</Button>
+									<Button
+										className="more-filter-actions"
+										type="text"
+										icon={<RefreshCw size={14} />}
+										onClick={handleReplaceFilter}
+									>
+										Replace filters with this value
+									</Button>
 								</div>
 							}
 							rootClassName="table-view-actions-content"

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -1,13 +1,8 @@
 import { useMemo } from 'react';
-import { useQueries, useQueryClient } from 'react-query';
+import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
 import { Color } from '@signozhq/design-tokens';
-import { toast } from '@signozhq/sonner';
-import { Button, Tooltip, Typography } from 'antd';
-import {
-	invalidateGetMetricMetadata,
-	useUpdateMetricMetadata,
-} from 'api/generated/services/metrics';
+import { Tooltip, Typography } from 'antd';
 import { isAxiosError } from 'axios';
 import classNames from 'classnames';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
@@ -28,10 +23,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { TimeSeriesProps } from './types';
-import {
-	buildUpdateMetricYAxisUnitPayload,
-	splitQueryIntoOneChartPerQuery,
-} from './utils';
+import { splitQueryIntoOneChartPerQuery } from './utils';
 
 function TimeSeries({
 	showOneChartPerQuery,
@@ -43,7 +35,6 @@ function TimeSeries({
 	yAxisUnit,
 	setYAxisUnit,
 	showYAxisUnitSelector,
-	metrics,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -51,7 +42,6 @@ function TimeSeries({
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
-	const queryClient = useQueryClient();
 
 	const isValidToConvertToMs = useMemo(() => {
 		const isValid: boolean[] = [];
@@ -148,51 +138,54 @@ function TimeSeries({
 		setYAxisUnit(value);
 	};
 
+	// TODO: Enable once we have resolved all related metrics v2 api issues
 	// Show the save unit button if
 	// 1. There is only one metric
 	// 2. The metric has no saved unit
 	// 3. The user has selected a unit
-	const showSaveUnitButton = useMemo(
-		() =>
-			metricUnits.length === 1 &&
-			Boolean(metrics?.[0]) &&
-			!metricUnits[0] &&
-			yAxisUnit,
-		[metricUnits, metrics, yAxisUnit],
-	);
+	// const showSaveUnitButton = useMemo(
+	// 	() =>
+	// 		metricUnits.length === 1 &&
+	// 		Boolean(metrics?.[0]) &&
+	// 		!metricUnits[0] &&
+	// 		yAxisUnit,
+	// 	[metricUnits, metrics, yAxisUnit],
+	// );
 
-	const {
-		mutate: updateMetricMetadata,
-		isLoading: isUpdatingMetricMetadata,
-	} = useUpdateMetricMetadata();
+	// const {
+	// 	mutate: updateMetricMetadata,
+	// 	isLoading: isUpdatingMetricMetadata,
+	// } = useUpdateMetricMetadata();
 
-	const handleSaveUnit = (): void => {
-		if (metrics?.[0]) {
-			updateMetricMetadata(
-				{
-					pathParams: {
-						metricName: metricNames[0],
-					},
-					data: buildUpdateMetricYAxisUnitPayload(
-						metricNames[0],
-						metrics[0],
-						yAxisUnit,
-					),
-				},
-				{
-					onSuccess: () => {
-						toast.success('Unit saved successfully');
-						invalidateGetMetricMetadata(queryClient, {
-							metricName: metricNames[0],
-						});
-					},
-					onError: () => {
-						toast.error('Failed to save unit');
-					},
-				},
-			);
-		}
-	};
+	// const handleSaveUnit = (): void => {
+	// 	updateMetricMetadata(
+	// 		{
+	// 			metricName: metricNames[0],
+	// 			payload: {
+	// 				unit: yAxisUnit,
+	// 				description: metrics[0]?.description ?? '',
+	// 				metricType: metrics[0]?.type as MetricType,
+	// 				temporality: metrics[0]?.temporality,
+	// 			},
+	// 		},
+	// 		{
+	// 			onSuccess: () => {
+	// 				notifications.success({
+	// 					message: 'Unit saved successfully',
+	// 				});
+	// 				queryClient.invalidateQueries([
+	// 					REACT_QUERY_KEY.GET_METRIC_DETAILS,
+	// 					metricNames[0],
+	// 				]);
+	// 			},
+	// 			onError: () => {
+	// 				notifications.error({
+	// 					message: 'Failed to save unit',
+	// 				});
+	// 			},
+	// 		},
+	// 	);
+	// };
 
 	return (
 		<>
@@ -205,7 +198,8 @@ function TimeSeries({
 							source={YAxisSource.EXPLORER}
 							data-testid="y-axis-unit-selector"
 						/>
-						{showSaveUnitButton && (
+						{/* TODO: Enable once we have resolved all related metrics v2 api issues */}
+						{/* {showSaveUnitButton && (
 							<div className="save-unit-container">
 								<Typography.Text>
 									Save the selected unit for this metric?
@@ -219,7 +213,7 @@ function TimeSeries({
 									<Typography.Paragraph>Yes</Typography.Paragraph>
 								</Button>
 							</div>
-						)}
+						)} */}
 					</>
 				)}
 			</div>

frontend/src/container/MetricsExplorer/Explorer/__tests__/Explorer.test.tsx

@@ -3,11 +3,8 @@ import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { render, screen } from '@testing-library/react';
-import {
-	MetricsexplorertypesMetricMetadataDTO,
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import * as useOptionsMenuHooks from 'container/OptionsMenu';
 import * as useUpdateDashboardHooks from 'hooks/dashboard/useUpdateDashboard';
@@ -17,6 +14,7 @@ import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import * as timezoneHooks from 'providers/Timezone';
 import store from 'store';
 import { LicenseEvent } from 'types/api/licensesV3/getActive';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
 
@@ -137,11 +135,11 @@ jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue({
 
 const Y_AXIS_UNIT_SELECTOR_TEST_ID = 'y-axis-unit-selector';
 
-const mockMetric: MetricsexplorertypesMetricMetadataDTO = {
-	type: MetrictypesTypeDTO.sum,
+const mockMetric: MetricMetadata = {
+	type: MetricType.SUM,
 	description: 'metric1 description',
 	unit: 'metric1 unit',
-	temporality: MetrictypesTemporalityDTO.cumulative,
+	temporality: Temporality.CUMULATIVE,
 	isMonotonic: true,
 };
 
@@ -271,10 +269,10 @@ describe('Explorer', () => {
 			isError: false,
 			metrics: [
 				{
-					type: MetrictypesTypeDTO.sum,
+					type: MetricType.SUM,
 					description: 'metric1 description',
 					unit: '',
-					temporality: MetrictypesTemporalityDTO.cumulative,
+					temporality: Temporality.CUMULATIVE,
 					isMonotonic: true,
 				},
 			],

frontend/src/container/MetricsExplorer/Explorer/__tests__/TimeSeries.test.tsx

@@ -1,23 +1,29 @@
+import { UseMutationResult } from 'react-query';
 import { render, RenderResult, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import * as metricsExplorerHooks from 'api/generated/services/metrics';
-import {
-	MetricsexplorertypesMetricMetadataDTO,
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { UpdateMetricMetadataResponse } from 'api/metricsExplorer/updateMetricMetadata';
+import * as useUpdateMetricMetadataHooks from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import { UseUpdateMetricMetadataProps } from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 
 import TimeSeries from '../TimeSeries';
 import { TimeSeriesProps } from '../types';
 
-const mockUpdateMetricMetadata = jest.fn();
-const updateMetricMetadataSpy = jest.spyOn(
-	metricsExplorerHooks,
-	'useUpdateMetricMetadata',
-);
-type UseUpdateMetricMetadataReturnType = ReturnType<
-	typeof metricsExplorerHooks.useUpdateMetricMetadata
+type MockUpdateMetricMetadata = UseMutationResult<
+	SuccessResponse<UpdateMetricMetadataResponse> | ErrorResponse,
+	Error,
+	UseUpdateMetricMetadataProps
 >;
+const mockUpdateMetricMetadata = jest.fn();
+jest
+	.spyOn(useUpdateMetricMetadataHooks, 'useUpdateMetricMetadata')
+	.mockReturnValue(({
+		mutate: mockUpdateMetricMetadata,
+		isLoading: false,
+	} as Partial<MockUpdateMetricMetadata>) as MockUpdateMetricMetadata);
 
 jest.mock('container/TimeSeriesView/TimeSeriesView', () => ({
 	__esModule: true,
@@ -54,11 +60,11 @@ jest.mock('react-redux', () => ({
 	}),
 }));
 
-const mockMetric: MetricsexplorertypesMetricMetadataDTO = {
-	type: MetrictypesTypeDTO.sum,
+const mockMetric: MetricMetadata = {
+	type: MetricType.SUM,
 	description: 'metric1 description',
 	unit: 'metric1 unit',
-	temporality: MetrictypesTemporalityDTO.cumulative,
+	temporality: Temporality.CUMULATIVE,
 	isMonotonic: true,
 };
 
@@ -90,13 +96,6 @@ function renderTimeSeries(
 }
 
 describe('TimeSeries', () => {
-	beforeEach(() => {
-		updateMetricMetadataSpy.mockReturnValue(({
-			mutate: mockUpdateMetricMetadata,
-			isLoading: false,
-		} as Partial<UseUpdateMetricMetadataReturnType>) as UseUpdateMetricMetadataReturnType);
-	});
-
 	it('should render a warning icon when a metric has no unit among multiple metrics', () => {
 		const user = userEvent.setup();
 		const { container } = renderTimeSeries({
@@ -134,17 +133,18 @@ describe('TimeSeries', () => {
 		);
 	});
 
-	it('shows Save unit button when metric had no unit but one is selected', async () => {
+	// TODO: Unskip this test once the save unit button is implemented
+	// Tracking at - https://github.com/SigNoz/engineering-pod/issues/3495
+	it.skip('shows Save unit button when metric had no unit but one is selected', () => {
 		const { findByText, getByRole } = renderTimeSeries({
 			metricUnits: [undefined],
 			metricNames: ['metric1'],
 			metrics: [mockMetric],
 			yAxisUnit: 'seconds',
-			showYAxisUnitSelector: true,
 		});
 
 		expect(
-			await findByText('Save the selected unit for this metric?'),
+			findByText('Save the selected unit for this metric?'),
 		).toBeInTheDocument();
 
 		const yesButton = getByRole('button', { name: 'Yes' });
@@ -152,25 +152,24 @@ describe('TimeSeries', () => {
 		expect(yesButton).toBeEnabled();
 	});
 
-	it('clicking on save unit button shoould upated metric metadata', async () => {
+	// TODO: Unskip this test once the save unit button is implemented
+	// Tracking at - https://github.com/SigNoz/engineering-pod/issues/3495
+	it.skip('clicking on save unit button shoould upated metric metadata', () => {
 		const user = userEvent.setup();
 		const { getByRole } = renderTimeSeries({
 			metricUnits: [''],
 			metricNames: ['metric1'],
 			metrics: [mockMetric],
 			yAxisUnit: 'seconds',
-			showYAxisUnitSelector: true,
 		});
 
 		const yesButton = getByRole('button', { name: /Yes/i });
-		await user.click(yesButton);
+		user.click(yesButton);
 
 		expect(mockUpdateMetricMetadata).toHaveBeenCalledWith(
 			{
-				pathParams: {
-					metricName: 'metric1',
-				},
-				data: expect.objectContaining({ unit: 'seconds' }),
+				metricName: 'metric1',
+				payload: expect.objectContaining({ unit: 'seconds' }),
 			},
 			expect.objectContaining({
 				onSuccess: expect.any(Function),

frontend/src/container/MetricsExplorer/Explorer/__tests__/utils.test.tsx

@@ -1,14 +1,14 @@
 import { UseQueryResult } from 'react-query';
 import { renderHook } from '@testing-library/react';
-import {
-	GetMetricMetadata200,
-	MetricsexplorertypesMetricMetadataDTO,
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { AxiosResponse } from 'axios';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import * as useGetMultipleMetricsHook from 'hooks/metricsExplorer/useGetMultipleMetrics';
+import { SuccessResponseV2 } from 'types/api';
+import {
+	MetricMetadata,
+	MetricMetadataResponse,
+} from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderFormula,
@@ -91,11 +91,11 @@ describe('splitQueryIntoOneChartPerQuery', () => {
 	});
 });
 
-const MOCK_METRIC_METADATA: MetricsexplorertypesMetricMetadataDTO = {
+const MOCK_METRIC_METADATA: MetricMetadata = {
 	description: 'Metric 1 description',
 	unit: 'unit1',
-	type: MetrictypesTypeDTO.gauge,
-	temporality: MetrictypesTemporalityDTO.delta,
+	type: MetricType.GAUGE,
+	temporality: Temporality.DELTA,
 	isMonotonic: true,
 };
 
@@ -104,16 +104,19 @@ describe('useGetMetrics', () => {
 		jest
 			.spyOn(useGetMultipleMetricsHook, 'useGetMultipleMetrics')
 			.mockReturnValue([
-				{
+				({
 					isLoading: false,
 					isError: false,
 					data: {
+						httpStatusCode: 200,
 						data: {
-							data: MOCK_METRIC_METADATA,
 							status: 'success',
+							data: MOCK_METRIC_METADATA,
 						},
 					},
-				} as UseQueryResult<AxiosResponse<GetMetricMetadata200>, Error>,
+				} as Partial<
+					UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>
+				>) as UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>,
 			]);
 	});
 
@@ -130,11 +133,12 @@ describe('useGetMetrics', () => {
 		jest
 			.spyOn(useGetMultipleMetricsHook, 'useGetMultipleMetrics')
 			.mockReturnValue([
-				{
+				({
 					isLoading: true,
 					isError: false,
-					data: undefined,
-				} as UseQueryResult<AxiosResponse<GetMetricMetadata200>, Error>,
+				} as Partial<
+					UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>
+				>) as UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>,
 			]);
 		const { result } = renderHook(() => useGetMetrics(['metric1']));
 		expect(result.current.metrics).toHaveLength(1);

frontend/src/container/MetricsExplorer/Explorer/types.ts

@@ -1,9 +1,9 @@
 import { Dispatch, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
-import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { RelatedMetric } from 'api/metricsExplorer/getRelatedMetrics';
 import { SuccessResponse, Warning } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 
 export enum ExplorerTabs {
 	TIME_SERIES = 'time-series',
@@ -18,7 +18,7 @@ export interface TimeSeriesProps {
 	isMetricUnitsError: boolean;
 	metricUnits: (string | undefined)[];
 	metricNames: string[];
-	metrics: (MetricsexplorertypesMetricMetadataDTO | undefined)[];
+	metrics: (MetricMetadata | undefined)[];
 	handleOpenMetricDetails: (metricName: string) => void;
 	yAxisUnit: string | undefined;
 	setYAxisUnit: (unit: string) => void;

frontend/src/container/MetricsExplorer/Explorer/utils.tsx

@@ -1,12 +1,9 @@
-import { UpdateMetricMetadataMutationBody } from 'api/generated/services/metrics';
-import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { mapMetricUnitToUniversalUnit } from 'components/YAxisUnitSelector/utils';
 import { useGetMultipleMetrics } from 'hooks/metricsExplorer/useGetMultipleMetrics';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
-import { determineIsMonotonicV2 } from '../MetricDetails/utils';
-
 /**
  * Split a query with multiple queryData to multiple distinct queries, each with a single queryData.
  * @param query - The query to split
@@ -71,14 +68,16 @@ export function useGetMetrics(
 ): {
 	isLoading: boolean;
 	isError: boolean;
-	metrics: (MetricsexplorertypesMetricMetadataDTO | undefined)[];
+	metrics: (MetricMetadata | undefined)[];
 } {
 	const metricsData = useGetMultipleMetrics(metricNames, {
 		enabled: metricNames.length > 0 && isEnabled,
 	});
 	return {
 		isLoading: metricsData.some((metric) => metric.isLoading),
-		metrics: metricsData.map((metric) => metric.data?.data?.data),
+		metrics: metricsData
+			.map((metric) => metric.data?.data)
+			.map((data) => data?.data),
 		isError: metricsData.some((metric) => metric.isError),
 	};
 }
@@ -90,24 +89,9 @@ export function useGetMetrics(
  * @returns The units of the metrics, can be undefined if the metric has no unit
  */
 export function getMetricUnits(
-	metrics: (MetricsexplorertypesMetricMetadataDTO | undefined)[],
+	metrics: (MetricMetadata | undefined)[],
 ): (string | undefined)[] {
 	return metrics
 		.map((metric) => metric?.unit)
 		.map((unit) => mapMetricUnitToUniversalUnit(unit) || undefined);
 }
-
-export function buildUpdateMetricYAxisUnitPayload(
-	metricName: string,
-	metric: MetricsexplorertypesMetricMetadataDTO,
-	yAxisUnit: string | undefined,
-): UpdateMetricMetadataMutationBody {
-	return {
-		metricName,
-		type: metric?.type,
-		description: metric?.description,
-		unit: yAxisUnit || '',
-		temporality: metric?.temporality,
-		isMonotonic: determineIsMonotonicV2(metric?.type, metric?.temporality),
-	};
-}

frontend/src/container/MetricsExplorer/MetricDetails/utils.tsx

@@ -1,7 +1,3 @@
-import {
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
 import { Temporality } from 'api/metricsExplorer/getMetricDetails';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import { SpaceAggregation, TimeAggregation } from 'api/v5/v5';
@@ -50,29 +46,6 @@ export function formatNumberToCompactFormat(num: number): string {
 	}).format(num);
 }
 
-export function determineIsMonotonicV2(
-	metricType: MetrictypesTypeDTO,
-	temporality?: MetrictypesTemporalityDTO,
-): boolean {
-	if (
-		metricType === MetrictypesTypeDTO.histogram ||
-		metricType === MetrictypesTypeDTO.exponentialhistogram
-	) {
-		return true;
-	}
-	if (
-		metricType === MetrictypesTypeDTO.gauge ||
-		metricType === MetrictypesTypeDTO.summary
-	) {
-		return false;
-	}
-	if (metricType === MetrictypesTypeDTO.sum) {
-		return temporality === MetrictypesTemporalityDTO.cumulative;
-	}
-	return false;
-}
-
-// TODO: Remove this after API migration is complete
 export function determineIsMonotonic(
 	metricType: MetricType,
 	temporality?: Temporality,

frontend/src/container/PanelWrapper/constants.ts

@@ -1,5 +1,6 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 
+import TimeSeriesPanel from '../DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel';
 import HistogramPanelWrapper from './HistogramPanelWrapper';
 import ListPanelWrapper from './ListPanelWrapper';
 import PiePanelWrapper from './PiePanelWrapper';
@@ -8,7 +9,7 @@ import UplotPanelWrapper from './UplotPanelWrapper';
 import ValuePanelWrapper from './ValuePanelWrapper';
 
 export const PanelTypeVsPanelWrapper = {
-	[PANEL_TYPES.TIME_SERIES]: UplotPanelWrapper,
+	[PANEL_TYPES.TIME_SERIES]: TimeSeriesPanel,
 	[PANEL_TYPES.TABLE]: TablePanelWrapper,
 	[PANEL_TYPES.LIST]: ListPanelWrapper,
 	[PANEL_TYPES.VALUE]: ValuePanelWrapper,

frontend/src/hooks/dashboard/useVariableFetchState.ts

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

frontend/src/hooks/dashboard/utils.ts

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

frontend/src/hooks/metricsExplorer/useGetMultipleMetrics.ts

@@ -1,38 +1,32 @@
 import { useQueries, UseQueryOptions, UseQueryResult } from 'react-query';
-import {
-	getGetMetricMetadataQueryKey,
-	getMetricMetadata,
-} from 'api/generated/services/metrics';
-import { GetMetricMetadata200 } from 'api/generated/services/sigNoz.schemas';
-import { AxiosResponse } from 'axios';
+import { getMetricMetadata } from 'api/metricsExplorer/v2/getMetricMetadata';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { SuccessResponseV2 } from 'types/api';
+import { MetricMetadataResponse } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 
-type QueryResult = UseQueryResult<AxiosResponse<GetMetricMetadata200>, Error>;
+type QueryResult = UseQueryResult<
+	SuccessResponseV2<MetricMetadataResponse>,
+	Error
+>;
 
 type UseGetMultipleMetrics = (
 	metricNames: string[],
-	options?: UseQueryOptions<AxiosResponse<GetMetricMetadata200>, Error>,
+	options?: UseQueryOptions<SuccessResponseV2<MetricMetadataResponse>, Error>,
 	headers?: Record<string, string>,
 ) => QueryResult[];
 
 export const useGetMultipleMetrics: UseGetMultipleMetrics = (
 	metricNames,
 	options,
+	headers,
 ) =>
 	useQueries(
 		metricNames.map(
 			(metricName) =>
 				({
-					queryKey: getGetMetricMetadataQueryKey({
-						metricName,
-					}),
-					queryFn: ({ signal }) =>
-						getMetricMetadata(
-							{
-								metricName,
-							},
-							signal,
-						),
+					queryKey: [REACT_QUERY_KEY.GET_METRIC_METADATA, metricName],
+					queryFn: ({ signal }) => getMetricMetadata(metricName, signal, headers),
 					...options,
-				} as UseQueryOptions<AxiosResponse<GetMetricMetadata200>, Error>),
+				} as UseQueryOptions<SuccessResponseV2<MetricMetadataResponse>, Error>),
 		),
 	);

frontend/src/hooks/useCopyToClipboard.ts

@@ -0,0 +1,61 @@
+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/hooks/useGetYAxisUnit.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
-import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 import { useGetMetrics } from 'container/MetricsExplorer/Explorer/utils';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
@@ -24,13 +24,13 @@ const mockUseGetMetrics = useGetMetrics as jest.MockedFunction<
 
 const MOCK_METRIC_1 = {
 	unit: UniversalYAxisUnit.BYTES,
-} as MetricsexplorertypesMetricMetadataDTO;
+} as MetricMetadata;
 const MOCK_METRIC_2 = {
 	unit: UniversalYAxisUnit.SECONDS,
-} as MetricsexplorertypesMetricMetadataDTO;
+} as MetricMetadata;
 const MOCK_METRIC_3 = {
 	unit: '',
-} as MetricsexplorertypesMetricMetadataDTO;
+} as MetricMetadata;
 
 function createMockCurrentQuery(
 	queryType: EQueryType,

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

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

frontend/src/lib/dashboardVariables/variableReference.ts

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

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

@@ -128,6 +128,15 @@
 		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%;
@@ -157,10 +166,34 @@
 		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;
+		}
 	}
 }
 
@@ -172,4 +205,17 @@
 			}
 		}
 	}
+
+	.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,11 +2,13 @@ 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';
-import { useLegendActions } from './useLegendActions';
 
 import './Legend.styles.scss';
 
@@ -32,6 +34,7 @@ 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,
@@ -59,26 +62,53 @@ 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 => (
-			<AntdTooltip key={item.seriesIndex} title={item.label}>
+		(item: LegendItem): JSX.Element => {
+			const isCopied = copiedId === item.seriesIndex;
+			return (
 				<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,
 					})}
 				>
-					<div
-						className="legend-marker"
-						style={{ borderColor: String(item.color) }}
-						data-is-legend-marker={true}
-					/>
-					<span className="legend-label">{item.label}</span>
+					<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>
-			</AntdTooltip>
-		),
-		[focusedSeriesIndex, position],
+			);
+		},
+		[copiedId, focusedSeriesIndex, handleCopyLegendItem, position],
 	);
 
 	const isEmptyState = useMemo(() => {
@@ -106,6 +136,7 @@ export default function Legend({
 						placeholder="Search..."
 						value={legendSearchQuery}
 						onChange={(e): void => setLegendSearchQuery(e.target.value)}
+						data-testid="legend-search-input"
 						className="legend-search-input"
 					/>
 				</div>

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

@@ -0,0 +1,31 @@
+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,16 +25,28 @@ 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;
-	if (isStackedBarChart && index + 1 < data.length && baseValue !== null) {
-		const nextValue = data[index + 1][dataIndex] ?? null;
-		if (nextValue !== 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;
 			baseValue = baseValue - nextValue;
 		}
 	}
@@ -80,6 +92,7 @@ export function buildTooltipContent({
 			index,
 			dataIndex,
 			isStackedBarChart,
+			series,
 		});
 
 		const isActive = index === activeSeriesIndex;

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

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

@@ -4,12 +4,12 @@ import uPlot, { Axis } from 'uplot';
 
 import { uPlotXAxisValuesFormat } from '../../uPlotLib/utils/constants';
 import getGridColor from '../../uPlotLib/utils/getGridColor';
+import { buildYAxisSizeCalculator } from '../utils/axis';
 import { AxisProps, ConfigBuilder } from './types';
 
 const PANEL_TYPES_WITH_X_AXIS_DATETIME_FORMAT = [
 	PANEL_TYPES.TIME_SERIES,
 	PANEL_TYPES.BAR,
-	PANEL_TYPES.PIE,
 ];
 
 /**
@@ -114,81 +114,6 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 			: undefined;
 	}
 
-	/**
-	 * Calculate axis size from existing size property
-	 */
-	private getExistingAxisSize(
-		self: uPlot,
-		axis: Axis,
-		values: string[] | undefined,
-		axisIdx: number,
-		cycleNum: number,
-	): number {
-		const internalSize = (axis as { _size?: number })._size;
-		if (internalSize !== undefined) {
-			return internalSize;
-		}
-
-		const existingSize = axis.size;
-		if (typeof existingSize === 'function') {
-			return existingSize(self, values ?? [], axisIdx, cycleNum);
-		}
-
-		return existingSize ?? 0;
-	}
-
-	/**
-	 * Calculate text width for longest value
-	 */
-	private calculateTextWidth(
-		self: uPlot,
-		axis: Axis,
-		values: string[] | undefined,
-	): number {
-		if (!values || values.length === 0) {
-			return 0;
-		}
-
-		// Find longest value
-		const longestVal = values.reduce(
-			(acc, val) => (val.length > acc.length ? val : acc),
-			'',
-		);
-
-		if (longestVal === '' || !axis.font?.[0]) {
-			return 0;
-		}
-
-		// eslint-disable-next-line prefer-destructuring, no-param-reassign
-		self.ctx.font = axis.font[0];
-		return self.ctx.measureText(longestVal).width / devicePixelRatio;
-	}
-
-	/**
-	 * Build Y-axis dynamic size calculator
-	 */
-	private buildYAxisSizeCalculator(): uPlot.Axis.Size {
-		return (
-			self: uPlot,
-			values: string[] | undefined,
-			axisIdx: number,
-			cycleNum: number,
-		): number => {
-			const axis = self.axes[axisIdx];
-
-			// Bail out, force convergence
-			if (cycleNum > 1) {
-				return this.getExistingAxisSize(self, axis, values, axisIdx, cycleNum);
-			}
-
-			const gap = this.props.gap ?? 5;
-			let axisSize = (axis.ticks?.size ?? 0) + gap;
-			axisSize += this.calculateTextWidth(self, axis, values);
-
-			return Math.ceil(axisSize);
-		};
-	}
-
 	/**
 	 * Build dynamic size calculator for Y-axis
 	 */
@@ -202,7 +127,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 
 		// Y-axis needs dynamic sizing based on text width
 		if (scaleKey === 'y') {
-			return this.buildYAxisSizeCalculator();
+			return buildYAxisSizeCalculator(this.props.gap ?? 5);
 		}
 
 		return undefined;

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

@@ -1,3 +1,4 @@
+import { SeriesVisibilityState } from 'container/DashboardContainer/visualization/panels/types';
 import { getStoredSeriesVisibility } from 'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils';
 import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
 import { thresholdsDrawHook } from 'lib/uPlotV2/hooks/useThresholdsDrawHook';
@@ -235,9 +236,9 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 	}
 
 	/**
-	 * Returns stored series visibility map from localStorage when preferences source is LOCAL_STORAGE, otherwise null.
+	 * Returns stored series visibility by index from localStorage when preferences source is LOCAL_STORAGE, otherwise null.
 	 */
-	private getStoredVisibilityMap(): Map<string, boolean> | null {
+	private getStoredVisibility(): SeriesVisibilityState | null {
 		if (
 			this.widgetId &&
 			this.selectionPreferencesSource === SelectionPreferencesSource.LOCAL_STORAGE
@@ -251,22 +252,23 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 	 * Get legend items with visibility state restored from localStorage if available
 	 */
 	getLegendItems(): Record<number, LegendItem> {
-		const visibilityMap = this.getStoredVisibilityMap();
-		const isAnySeriesHidden = !!(
-			visibilityMap && Array.from(visibilityMap.values()).some((show) => !show)
+		const seriesVisibilityState = this.getStoredVisibility();
+		const isAnySeriesHidden = !!seriesVisibilityState?.visibility?.some(
+			(show) => !show,
 		);
 
 		return this.series.reduce((acc, s: UPlotSeriesBuilder, index: number) => {
 			const seriesConfig = s.getConfig();
 			const label = seriesConfig.label ?? '';
-			const seriesIndex = index + 1; // +1 because the first series is the timestamp
-
-			const show = resolveSeriesVisibility(
-				label,
-				seriesConfig.show,
-				visibilityMap,
+			// +1 because uPlot series 0 is x-axis/time; data series are at 1, 2, ... (also matches stored visibility[0]=time, visibility[1]=first data, ...)
+			const seriesIndex = index + 1;
+			const show = resolveSeriesVisibility({
+				seriesIndex,
+				seriesShow: seriesConfig.show,
+				seriesLabel: label,
+				seriesVisibilityState,
 				isAnySeriesHidden,
-			);
+			});
 
 			acc[seriesIndex] = {
 				seriesIndex,
@@ -294,22 +296,23 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			...DEFAULT_PLOT_CONFIG,
 		};
 
-		const visibilityMap = this.getStoredVisibilityMap();
-		const isAnySeriesHidden = !!(
-			visibilityMap && Array.from(visibilityMap.values()).some((show) => !show)
+		const seriesVisibilityState = this.getStoredVisibility();
+		const isAnySeriesHidden = !!seriesVisibilityState?.visibility?.some(
+			(show) => !show,
 		);
 
 		config.series = [
 			{ value: (): string => '' }, // Base series for timestamp
-			...this.series.map((s) => {
+			...this.series.map((s, index) => {
 				const series = s.getConfig();
-				const label = series.label ?? '';
-				const visible = resolveSeriesVisibility(
-					label,
-					series.show,
-					visibilityMap,
+				// Stored visibility[0] is x-axis/time; data series start at visibility[1]
+				const visible = resolveSeriesVisibility({
+					seriesIndex: index + 1,
+					seriesShow: series.show,
+					seriesLabel: series.label ?? '',
+					seriesVisibilityState,
 					isAnySeriesHidden,
-				);
+				});
 				return {
 					...series,
 					show: visible,

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

@@ -1,8 +1,10 @@
+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,
@@ -15,20 +17,41 @@ import {
  * Builder for uPlot series configuration
  * Handles creation of series settings
  */
+
+/**
+ * Path builders are static and shared across all instances of UPlotSeriesBuilder
+ */
+let builders: PathBuilders | null = null;
 export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
+	constructor(props: SeriesProps) {
+		super(props);
+		const pathBuilders = uPlot.paths;
+
+		if (!builders) {
+			const linearBuilder = pathBuilders.linear;
+			const splineBuilder = pathBuilders.spline;
+			const steppedBuilder = pathBuilders.stepped;
+
+			if (!linearBuilder || !splineBuilder || !steppedBuilder) {
+				throw new Error('Required uPlot path builders are not available');
+			}
+			builders = {
+				linear: linearBuilder(),
+				spline: splineBuilder(),
+				stepBefore: steppedBuilder({ align: -1 }),
+				stepAfter: steppedBuilder({ align: 1 }),
+			};
+		}
+	}
+
 	private buildLineConfig({
-		lineColor,
-		lineWidth,
-		lineStyle,
-		lineCap,
+		resolvedLineColor,
 	}: {
-		lineColor: string;
-		lineWidth?: number;
-		lineStyle?: LineStyle;
-		lineCap?: Series.Cap;
+		resolvedLineColor: string;
 	}): Partial<Series> {
+		const { lineWidth, lineStyle, lineCap } = this.props;
 		const lineConfig: Partial<Series> = {
-			stroke: lineColor,
+			stroke: resolvedLineColor,
 			width: lineWidth ?? 2,
 		};
 
@@ -39,21 +62,26 @@ 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({
-		pathBuilder,
-		drawStyle,
-		lineInterpolation,
-	}: {
-		pathBuilder?: Series.PathBuilder | null;
-		drawStyle: DrawStyle;
-		lineInterpolation?: LineInterpolation;
-	}): Partial<Series> {
+	private buildPathConfig(): Partial<Series> {
+		const {
+			pathBuilder,
+			drawStyle,
+			lineInterpolation,
+			barAlignment,
+			barMaxWidth,
+			barWidthFactor,
+		} = this.props;
 		if (pathBuilder) {
 			return { paths: pathBuilder };
 		}
@@ -70,7 +98,13 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 					idx0: number,
 					idx1: number,
 				): Series.Paths | null => {
-					const pathsBuilder = getPathBuilder(drawStyle, lineInterpolation);
+					const pathsBuilder = getPathBuilder({
+						drawStyle,
+						lineInterpolation,
+						barAlignment,
+						barMaxWidth,
+						barWidthFactor,
+					});
 
 					return pathsBuilder(self, seriesIdx, idx0, idx1);
 				},
@@ -84,25 +118,21 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	 * Build points configuration
 	 */
 	private buildPointsConfig({
-		lineColor,
-		lineWidth,
-		pointSize,
-		pointsBuilder,
-		pointsFilter,
-		drawStyle,
-		showPoints,
+		resolvedLineColor,
 	}: {
-		lineColor: string;
-		lineWidth?: number;
-		pointSize?: number;
-		pointsBuilder: Series.Points.Show | null;
-		pointsFilter: Series.Points.Filter | null;
-		drawStyle: DrawStyle;
-		showPoints?: VisibilityMode;
+		resolvedLineColor: string;
 	}): Partial<Series.Points> {
+		const {
+			lineWidth,
+			pointSize,
+			pointsBuilder,
+			pointsFilter,
+			drawStyle,
+			showPoints,
+		} = this.props;
 		const pointsConfig: Partial<Series.Points> = {
-			stroke: lineColor,
-			fill: lineColor,
+			stroke: resolvedLineColor,
+			fill: resolvedLineColor,
 			size: !pointSize || pointSize < (lineWidth ?? 2) ? undefined : pointSize,
 			filter: pointsFilter || undefined,
 		};
@@ -136,44 +166,16 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}
 
 	getConfig(): Series {
-		const {
-			drawStyle,
-			pathBuilder,
-			pointsBuilder,
-			pointsFilter,
-			lineInterpolation,
-			lineWidth,
-			lineStyle,
-			lineCap,
-			showPoints,
-			pointSize,
-			scaleKey,
-			label,
-			spanGaps,
-			show = true,
-		} = this.props;
+		const { scaleKey, label, spanGaps, show = true } = this.props;
 
-		const lineColor = this.getLineColor();
+		const resolvedLineColor = this.getLineColor();
 
 		const lineConfig = this.buildLineConfig({
-			lineColor,
-			lineWidth,
-			lineStyle,
-			lineCap,
-		});
-		const pathConfig = this.buildPathConfig({
-			pathBuilder,
-			drawStyle,
-			lineInterpolation,
+			resolvedLineColor,
 		});
+		const pathConfig = this.buildPathConfig();
 		const pointsConfig = this.buildPointsConfig({
-			lineColor,
-			lineWidth,
-			pointSize,
-			pointsBuilder: pointsBuilder ?? null,
-			pointsFilter: pointsFilter ?? null,
-			drawStyle,
-			showPoints,
+			resolvedLineColor,
 		});
 
 		return {
@@ -198,35 +200,39 @@ interface PathBuilders {
 	[key: string]: Series.PathBuilder;
 }
 
-let builders: PathBuilders | null = null;
-
 /**
  * Get path builder based on draw style and interpolation
  */
-function getPathBuilder(
-	style: DrawStyle,
-	lineInterpolation?: LineInterpolation,
-): Series.PathBuilder {
-	const pathBuilders = uPlot.paths;
-
+function getPathBuilder({
+	drawStyle,
+	lineInterpolation,
+	barAlignment = BarAlignment.Center,
+	barWidthFactor = 0.6,
+	barMaxWidth = 200,
+}: {
+	drawStyle: DrawStyle;
+	lineInterpolation?: LineInterpolation;
+	barAlignment?: BarAlignment;
+	barMaxWidth?: number;
+	barWidthFactor?: number;
+}): Series.PathBuilder {
 	if (!builders) {
-		const linearBuilder = pathBuilders.linear;
-		const splineBuilder = pathBuilders.spline;
-		const steppedBuilder = pathBuilders.stepped;
-
-		if (!linearBuilder || !splineBuilder || !steppedBuilder) {
-			throw new Error('Required uPlot path builders are not available');
-		}
-
-		builders = {
-			linear: linearBuilder(),
-			spline: splineBuilder(),
-			stepBefore: steppedBuilder({ align: -1 }),
-			stepAfter: steppedBuilder({ align: 1 }),
-		};
+		throw new Error('Required uPlot path builders are not available');
 	}
 
-	if (style === DrawStyle.Line) {
+	if (drawStyle === DrawStyle.Bar) {
+		const pathBuilders = uPlot.paths;
+		const barsConfigKey = `bars|${barAlignment}|${barWidthFactor}|${barMaxWidth}`;
+		if (!builders[barsConfigKey] && pathBuilders.bars) {
+			builders[barsConfigKey] = pathBuilders.bars({
+				size: [barWidthFactor, barMaxWidth],
+				align: barAlignment,
+			});
+		}
+		return builders[barsConfigKey];
+	}
+
+	if (drawStyle === DrawStyle.Line) {
 		if (lineInterpolation === LineInterpolation.StepBefore) {
 			return builders.stepBefore;
 		}

frontend/src/lib/uPlotV2/config/__tests__/UPlotAxisBuilder.test.ts

@@ -0,0 +1,393 @@
+import { getToolTipValue } from 'components/Graph/yAxisConfig';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { uPlotXAxisValuesFormat } from 'lib/uPlotLib/utils/constants';
+import type uPlot from 'uplot';
+
+import type { AxisProps } from '../types';
+import { UPlotAxisBuilder } from '../UPlotAxisBuilder';
+
+jest.mock('components/Graph/yAxisConfig', () => ({
+	getToolTipValue: jest.fn(),
+}));
+
+const createAxisProps = (overrides: Partial<AxisProps> = {}): AxisProps => ({
+	scaleKey: 'x',
+	label: 'Time',
+	isDarkMode: false,
+	show: true,
+	...overrides,
+});
+
+describe('UPlotAxisBuilder', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('builds basic axis config with defaults', () => {
+		const builder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'x',
+				label: 'Time',
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.scale).toBe('x');
+		expect(config.label).toBe('Time');
+		expect(config.show).toBe(true);
+		expect(config.side).toBe(2);
+		expect(config.gap).toBe(5);
+
+		// Default grid and ticks are created
+		expect(config.grid).toEqual({
+			stroke: 'rgba(0,0,0,0.5)',
+			width: 0.2,
+			show: true,
+		});
+		expect(config.ticks).toEqual({
+			width: 0.3,
+			show: true,
+		});
+	});
+
+	it('sets config values when provided', () => {
+		const builder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'x',
+				label: 'Time',
+				show: false,
+				side: 0,
+				gap: 10,
+				grid: {
+					stroke: '#ff0000',
+					width: 1,
+					show: false,
+				},
+				ticks: {
+					stroke: '#00ff00',
+					width: 1,
+					show: false,
+					size: 10,
+				},
+				values: ['1', '2', '3'],
+				space: 20,
+				size: 100,
+				stroke: '#0000ff',
+			}),
+		);
+		const config = builder.getConfig();
+		expect(config.scale).toBe('x');
+		expect(config.label).toBe('Time');
+		expect(config.show).toBe(false);
+		expect(config.gap).toBe(10);
+		expect(config.grid).toEqual({
+			stroke: '#ff0000',
+			width: 1,
+			show: false,
+		});
+		expect(config.ticks).toEqual({
+			stroke: '#00ff00',
+			width: 1,
+			show: false,
+			size: 10,
+		});
+		expect(config.values).toEqual(['1', '2', '3']);
+		expect(config.space).toBe(20);
+		expect(config.size).toBe(100);
+		expect(config.stroke).toBe('#0000ff');
+	});
+
+	it('merges custom grid config over defaults and respects isDarkMode and isLogScale', () => {
+		const builder = new UPlotAxisBuilder(
+			createAxisProps({
+				isDarkMode: true,
+				isLogScale: true,
+				grid: {
+					width: 1,
+				},
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.grid).toEqual({
+			// stroke falls back to theme-based default when not provided
+			stroke: 'rgba(231,233,237,0.3)',
+			// provided width overrides default
+			width: 1,
+			// show falls back to default when not provided
+			show: true,
+		});
+	});
+
+	it('uses provided ticks config when present and falls back to defaults otherwise', () => {
+		const customTicks = { width: 1, show: false };
+		const withTicks = new UPlotAxisBuilder(
+			createAxisProps({
+				ticks: customTicks,
+			}),
+		);
+		const withoutTicks = new UPlotAxisBuilder(createAxisProps());
+
+		expect(withTicks.getConfig().ticks).toBe(customTicks);
+		expect(withoutTicks.getConfig().ticks).toEqual({
+			width: 0.3,
+			show: true,
+		});
+	});
+
+	it('uses time-based X-axis values formatter for time-series like panels', () => {
+		const builder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'x',
+				panelType: PANEL_TYPES.TIME_SERIES,
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.values).toBe(uPlotXAxisValuesFormat);
+	});
+
+	it('does not attach X-axis datetime formatter when panel type is not supported', () => {
+		const builder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'x',
+				panelType: PANEL_TYPES.LIST, // not in PANEL_TYPES_WITH_X_AXIS_DATETIME_FORMAT
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.values).toBeUndefined();
+	});
+
+	it('builds Y-axis values formatter that delegates to getToolTipValue', () => {
+		const yBuilder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'y',
+				yAxisUnit: 'ms',
+				decimalPrecision: 3,
+			}),
+		);
+
+		const config = yBuilder.getConfig();
+		expect(typeof config.values).toBe('function');
+
+		(getToolTipValue as jest.Mock).mockImplementation(
+			(value: string, unit?: string, precision?: unknown) =>
+				`formatted:${value}:${unit}:${precision}`,
+		);
+
+		// Simulate uPlot calling the values formatter
+		const valuesFn = (config.values as unknown) as (
+			self: uPlot,
+			vals: unknown[],
+		) => string[];
+		const result = valuesFn({} as uPlot, [1, null, 2, Number.NaN]);
+
+		expect(getToolTipValue).toHaveBeenCalledTimes(2);
+		expect(getToolTipValue).toHaveBeenNthCalledWith(1, '1', 'ms', 3);
+		expect(getToolTipValue).toHaveBeenNthCalledWith(2, '2', 'ms', 3);
+
+		// Null/NaN values should map to empty strings
+		expect(result).toEqual(['formatted:1:ms:3', '', 'formatted:2:ms:3', '']);
+	});
+
+	it('adds dynamic size calculator only for Y-axis when size is not provided', () => {
+		const yBuilder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'y',
+			}),
+		);
+		const xBuilder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'x',
+			}),
+		);
+
+		const yConfig = yBuilder.getConfig();
+		const xConfig = xBuilder.getConfig();
+
+		expect(typeof yConfig.size).toBe('function');
+		expect(xConfig.size).toBeUndefined();
+	});
+
+	it('uses explicit size function when provided', () => {
+		const sizeFn: uPlot.Axis.Size = jest.fn(() => 100) as uPlot.Axis.Size;
+
+		const builder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'y',
+				size: sizeFn,
+			}),
+		);
+
+		const config = builder.getConfig();
+		expect(config.size).toBe(sizeFn);
+	});
+
+	it('builds stroke color based on stroke and isDarkMode', () => {
+		const explicitStroke = new UPlotAxisBuilder(
+			createAxisProps({
+				stroke: '#ff0000',
+			}),
+		);
+		const darkStroke = new UPlotAxisBuilder(
+			createAxisProps({
+				stroke: undefined,
+				isDarkMode: true,
+			}),
+		);
+		const lightStroke = new UPlotAxisBuilder(
+			createAxisProps({
+				stroke: undefined,
+				isDarkMode: false,
+			}),
+		);
+
+		expect(explicitStroke.getConfig().stroke).toBe('#ff0000');
+		expect(darkStroke.getConfig().stroke).toBe('white');
+		expect(lightStroke.getConfig().stroke).toBe('black');
+	});
+
+	it('uses explicit values formatter when provided', () => {
+		const customValues: uPlot.Axis.Values = jest.fn(() => ['a', 'b', 'c']);
+
+		const builder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'y',
+				values: customValues,
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.values).toBe(customValues);
+	});
+
+	it('returns undefined values for scaleKey neither x nor y', () => {
+		const builder = new UPlotAxisBuilder(createAxisProps({ scaleKey: 'custom' }));
+
+		const config = builder.getConfig();
+
+		expect(config.values).toBeUndefined();
+	});
+
+	it('includes space in config when provided', () => {
+		const builder = new UPlotAxisBuilder(
+			createAxisProps({ scaleKey: 'y', space: 50 }),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.space).toBe(50);
+	});
+
+	it('includes PANEL_TYPES.BAR and PANEL_TYPES.TIME_SERIES in X-axis datetime formatter', () => {
+		const barBuilder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'x',
+				panelType: PANEL_TYPES.BAR,
+			}),
+		);
+		expect(barBuilder.getConfig().values).toBe(uPlotXAxisValuesFormat);
+
+		const timeSeriesBuilder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'x',
+				panelType: PANEL_TYPES.TIME_SERIES,
+			}),
+		);
+		expect(timeSeriesBuilder.getConfig().values).toBe(uPlotXAxisValuesFormat);
+	});
+
+	it('should return the existing size when cycleNum > 1', () => {
+		const builder = new UPlotAxisBuilder(createAxisProps({ scaleKey: 'y' }));
+
+		const config = builder.getConfig();
+		const sizeFn = config.size;
+		expect(typeof sizeFn).toBe('function');
+
+		const mockAxis = {
+			_size: 80,
+			ticks: { size: 10 },
+			font: ['12px sans-serif'],
+		};
+		const mockSelf = ({
+			axes: [mockAxis],
+			ctx: { measureText: jest.fn(() => ({ width: 60 })), font: '' },
+		} as unknown) as uPlot;
+
+		const result = (sizeFn as (
+			s: uPlot,
+			v: string[],
+			a: number,
+			c: number,
+		) => number)(
+			mockSelf,
+			['100', '200'],
+			0,
+			2, // cycleNum > 1
+		);
+
+		expect(result).toBe(80);
+	});
+
+	it('should invoke the size calculator and compute from text width when cycleNum <= 1', () => {
+		const builder = new UPlotAxisBuilder(
+			createAxisProps({ scaleKey: 'y', gap: 8 }),
+		);
+
+		const config = builder.getConfig();
+		const sizeFn = config.size;
+		expect(typeof sizeFn).toBe('function');
+
+		const mockAxis = {
+			ticks: { size: 12 },
+			font: ['12px sans-serif'],
+		};
+		const measureText = jest.fn(() => ({ width: 48 }));
+		const mockSelf = ({
+			axes: [mockAxis],
+			ctx: {
+				measureText,
+				get font() {
+					return '';
+				},
+				set font(_v: string) {
+					/* noop */
+				},
+			},
+		} as unknown) as uPlot;
+
+		const result = (sizeFn as (
+			s: uPlot,
+			v: string[],
+			a: number,
+			c: number,
+		) => number)(
+			mockSelf,
+			['10', '2000ms'],
+			0,
+			0, // cycleNum <= 1
+		);
+
+		expect(measureText).toHaveBeenCalledWith('2000ms');
+		expect(result).toBeGreaterThanOrEqual(12 + 8);
+	});
+
+	it('merge updates axis props', () => {
+		const builder = new UPlotAxisBuilder(
+			createAxisProps({ scaleKey: 'y', label: 'Original' }),
+		);
+
+		builder.merge({ label: 'Merged', yAxisUnit: 'bytes' });
+
+		const config = builder.getConfig();
+
+		expect(config.label).toBe('Merged');
+		expect(config.values).toBeDefined();
+	});
+});

frontend/src/lib/uPlotV2/config/__tests__/UPlotConfigBuilder.test.ts

@@ -0,0 +1,337 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import uPlot from 'uplot';
+
+import type { SeriesProps } from '../types';
+import { DrawStyle, SelectionPreferencesSource } from '../types';
+import { UPlotConfigBuilder } from '../UPlotConfigBuilder';
+
+// Mock only the real boundary that hits localStorage
+jest.mock(
+	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
+	() => ({
+		getStoredSeriesVisibility: jest.fn(),
+	}),
+);
+
+const getStoredSeriesVisibilityMock = jest.requireMock(
+	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
+) as {
+	getStoredSeriesVisibility: jest.Mock;
+};
+
+describe('UPlotConfigBuilder', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const createSeriesProps = (
+		overrides: Partial<SeriesProps> = {},
+	): SeriesProps => ({
+		scaleKey: 'y',
+		label: 'Requests',
+		colorMapping: {},
+		drawStyle: DrawStyle.Line,
+		panelType: PANEL_TYPES.TIME_SERIES,
+		...overrides,
+	});
+
+	it('returns correct save selection preference flag from constructor args', () => {
+		const builder = new UPlotConfigBuilder({
+			shouldSaveSelectionPreference: true,
+		});
+
+		expect(builder.getShouldSaveSelectionPreference()).toBe(true);
+	});
+
+	it('returns widgetId from constructor args', () => {
+		const builder = new UPlotConfigBuilder({ widgetId: 'widget-123' });
+
+		expect(builder.getWidgetId()).toBe('widget-123');
+	});
+
+	it('sets tzDate from constructor and includes it in config', () => {
+		const tzDate = (ts: number): Date => new Date(ts);
+		const builder = new UPlotConfigBuilder({ tzDate });
+
+		const config = builder.getConfig();
+
+		expect(config.tzDate).toBe(tzDate);
+	});
+
+	it('does not call onDragSelect for click without drag (width === 0)', () => {
+		const onDragSelect = jest.fn();
+		const builder = new UPlotConfigBuilder({ onDragSelect });
+
+		const config = builder.getConfig();
+		const setSelectHooks = config.hooks?.setSelect ?? [];
+		expect(setSelectHooks.length).toBe(1);
+
+		const uplotInstance = ({
+			select: { left: 10, width: 0 },
+			posToVal: jest.fn(),
+		} as unknown) as uPlot;
+
+		// Simulate uPlot calling the hook
+		const setSelectHook = setSelectHooks[0];
+		setSelectHook!(uplotInstance);
+
+		expect(onDragSelect).not.toHaveBeenCalled();
+	});
+
+	it('calls onDragSelect with start and end times in milliseconds for a drag selection', () => {
+		const onDragSelect = jest.fn();
+		const builder = new UPlotConfigBuilder({ onDragSelect });
+
+		const config = builder.getConfig();
+		const setSelectHooks = config.hooks?.setSelect ?? [];
+		expect(setSelectHooks.length).toBe(1);
+
+		const posToVal = jest
+			.fn()
+			// left position
+			.mockReturnValueOnce(100)
+			// left + width
+			.mockReturnValueOnce(110);
+
+		const uplotInstance = ({
+			select: { left: 50, width: 20 },
+			posToVal,
+		} as unknown) as uPlot;
+
+		const setSelectHook = setSelectHooks[0];
+		setSelectHook!(uplotInstance);
+
+		expect(onDragSelect).toHaveBeenCalledTimes(1);
+		// 100 and 110 seconds converted to milliseconds
+		expect(onDragSelect).toHaveBeenCalledWith(100_000, 110_000);
+	});
+
+	it('adds and removes hooks via addHook, and exposes them through getConfig', () => {
+		const builder = new UPlotConfigBuilder();
+		const drawHook = jest.fn();
+
+		const remove = builder.addHook('draw', drawHook as uPlot.Hooks.Defs['draw']);
+
+		let config = builder.getConfig();
+		expect(config.hooks?.draw).toContain(drawHook);
+
+		// Remove and ensure it no longer appears in config
+		remove();
+		config = builder.getConfig();
+		expect(config.hooks?.draw ?? []).not.toContain(drawHook);
+	});
+
+	it('adds axes, scales, and series and wires them into the final config', () => {
+		const builder = new UPlotConfigBuilder();
+
+		// Add axis and scale
+		builder.addAxis({ scaleKey: 'y', label: 'Requests' });
+		builder.addScale({ scaleKey: 'y' });
+
+		// Add two series – legend indices should start from 1 (0 is the timestamp series)
+		builder.addSeries(createSeriesProps({ label: 'Requests' }));
+		builder.addSeries(createSeriesProps({ label: 'Errors' }));
+
+		const config = builder.getConfig();
+
+		// Axes
+		expect(config.axes).toHaveLength(1);
+		expect(config.axes?.[0].scale).toBe('y');
+
+		// Scales are returned as an object keyed by scaleKey
+		expect(config.scales).toBeDefined();
+		expect(Object.keys(config.scales ?? {})).toContain('y');
+
+		// Series: base timestamp + 2 data series
+		expect(config.series).toHaveLength(3);
+		// Base series (index 0) has a value formatter that returns empty string
+		const baseSeries = config.series?.[0] as { value?: () => string };
+		expect(typeof baseSeries?.value).toBe('function');
+		expect(baseSeries?.value?.()).toBe('');
+
+		// Legend items align with series and carry label and color from series config
+		const legendItems = builder.getLegendItems();
+		expect(Object.keys(legendItems)).toEqual(['1', '2']);
+		expect(legendItems[1].seriesIndex).toBe(1);
+		expect(legendItems[1].label).toBe('Requests');
+		expect(legendItems[2].label).toBe('Errors');
+	});
+
+	it('merges axis when addAxis is called twice with same scaleKey', () => {
+		const builder = new UPlotConfigBuilder();
+
+		builder.addAxis({ scaleKey: 'y', label: 'Requests' });
+		builder.addAxis({ scaleKey: 'y', label: 'Updated Label', show: false });
+
+		const config = builder.getConfig();
+
+		expect(config.axes).toHaveLength(1);
+		expect(config.axes?.[0].label).toBe('Updated Label');
+		expect(config.axes?.[0].show).toBe(false);
+	});
+
+	it('merges scale when addScale is called twice with same scaleKey', () => {
+		const builder = new UPlotConfigBuilder();
+
+		builder.addScale({ scaleKey: 'y', min: 0 });
+		builder.addScale({ scaleKey: 'y', max: 100 });
+
+		const config = builder.getConfig();
+
+		// Only one scale entry for 'y' (merge path used, no duplicate added)
+		expect(config.scales).toBeDefined();
+		const scales = config.scales ?? {};
+		expect(Object.keys(scales)).toEqual(['y']);
+		expect(scales.y?.range).toBeDefined();
+	});
+
+	it('restores visibility state from localStorage when selectionPreferencesSource is LOCAL_STORAGE', () => {
+		// Index 0 = x-axis/time; indices 1,2 = data series (Requests, Errors). resolveSeriesVisibility matches by seriesIndex + seriesLabel.
+		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue({
+			labels: ['x-axis', 'Requests', 'Errors'],
+			visibility: [true, true, false],
+		});
+
+		const builder = new UPlotConfigBuilder({
+			widgetId: 'widget-1',
+			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
+		});
+
+		builder.addSeries(createSeriesProps({ label: 'Requests' }));
+		builder.addSeries(createSeriesProps({ label: 'Errors' }));
+
+		const legendItems = builder.getLegendItems();
+
+		// When any series is hidden, legend visibility is driven by the stored map
+		expect(legendItems[1].show).toBe(true);
+		expect(legendItems[2].show).toBe(false);
+
+		const config = builder.getConfig();
+		const [, firstSeries, secondSeries] = config.series ?? [];
+
+		expect(firstSeries?.show).toBe(true);
+		expect(secondSeries?.show).toBe(false);
+	});
+
+	it('does not attempt to read stored visibility when using in-memory preferences', () => {
+		const builder = new UPlotConfigBuilder({
+			widgetId: 'widget-1',
+			selectionPreferencesSource: SelectionPreferencesSource.IN_MEMORY,
+		});
+
+		builder.addSeries(createSeriesProps({ label: 'Requests' }));
+
+		builder.getLegendItems();
+		builder.getConfig();
+
+		expect(
+			getStoredSeriesVisibilityMock.getStoredSeriesVisibility,
+		).not.toHaveBeenCalled();
+	});
+
+	it('adds thresholds only once per scale key', () => {
+		const builder = new UPlotConfigBuilder();
+
+		const thresholdsOptions = {
+			scaleKey: 'y',
+			thresholds: [{ thresholdValue: 100 }],
+		};
+
+		builder.addThresholds(thresholdsOptions);
+		builder.addThresholds(thresholdsOptions);
+
+		const config = builder.getConfig();
+		const drawHooks = config.hooks?.draw ?? [];
+
+		// Only a single draw hook should be registered for the same scaleKey
+		expect(drawHooks.length).toBe(1);
+	});
+
+	it('adds multiple thresholds when scale key is different', () => {
+		const builder = new UPlotConfigBuilder();
+
+		const thresholdsOptions = {
+			scaleKey: 'y',
+			thresholds: [{ thresholdValue: 100 }],
+		};
+		builder.addThresholds(thresholdsOptions);
+		const thresholdsOptions2 = {
+			scaleKey: 'y2',
+			thresholds: [{ thresholdValue: 200 }],
+		};
+		builder.addThresholds(thresholdsOptions2);
+
+		const config = builder.getConfig();
+		const drawHooks = config.hooks?.draw ?? [];
+
+		// Two draw hooks should be registered for different scaleKeys
+		expect(drawHooks.length).toBe(2);
+	});
+
+	it('merges cursor configuration with defaults instead of replacing them', () => {
+		const builder = new UPlotConfigBuilder();
+
+		builder.setCursor({
+			drag: { setScale: false },
+		});
+
+		const config = builder.getConfig();
+
+		expect(config.cursor?.drag?.setScale).toBe(false);
+		// Points configuration from DEFAULT_CURSOR_CONFIG should still be present
+		expect(config.cursor?.points).toBeDefined();
+	});
+
+	it('adds plugins and includes them in config', () => {
+		const builder = new UPlotConfigBuilder();
+		const plugin: uPlot.Plugin = {
+			opts: (): void => {},
+			hooks: {},
+		};
+
+		builder.addPlugin(plugin);
+
+		const config = builder.getConfig();
+
+		expect(config.plugins).toContain(plugin);
+	});
+
+	it('sets padding, legend, focus, select, tzDate, bands and includes them in config', () => {
+		const tzDate = (ts: number): Date => new Date(ts);
+		const builder = new UPlotConfigBuilder();
+
+		const bands: uPlot.Band[] = [{ series: [1, 2], fill: (): string => '#000' }];
+
+		builder.setBands(bands);
+		builder.setPadding([10, 20, 30, 40]);
+		builder.setLegend({ show: true, live: true });
+		builder.setFocus({ alpha: 0.5 });
+		builder.setSelect({ left: 0, width: 0, top: 0, height: 0 });
+		builder.setTzDate(tzDate);
+
+		const config = builder.getConfig();
+
+		expect(config.bands).toEqual(bands);
+		expect(config.padding).toEqual([10, 20, 30, 40]);
+		expect(config.legend).toEqual({ show: true, live: true });
+		expect(config.focus).toEqual({ alpha: 0.5 });
+		expect(config.select).toEqual({ left: 0, width: 0, top: 0, height: 0 });
+		expect(config.tzDate).toBe(tzDate);
+	});
+
+	it('does not include plugins when none added', () => {
+		const builder = new UPlotConfigBuilder();
+
+		const config = builder.getConfig();
+
+		expect(config.plugins).toBeUndefined();
+	});
+
+	it('does not include bands when empty', () => {
+		const builder = new UPlotConfigBuilder();
+
+		const config = builder.getConfig();
+
+		expect(config.bands).toBeUndefined();
+	});
+});

frontend/src/lib/uPlotV2/config/__tests__/UPlotScaleBuilder.test.ts

@@ -0,0 +1,236 @@
+import type uPlot from 'uplot';
+
+import * as scaleUtils from '../../utils/scale';
+import type { ScaleProps } from '../types';
+import { DistributionType } from '../types';
+import { UPlotScaleBuilder } from '../UPlotScaleBuilder';
+
+const createScaleProps = (overrides: Partial<ScaleProps> = {}): ScaleProps => ({
+	scaleKey: 'y',
+	time: false,
+	auto: undefined,
+	min: undefined,
+	max: undefined,
+	softMin: undefined,
+	softMax: undefined,
+	distribution: DistributionType.Linear,
+	...overrides,
+});
+
+describe('UPlotScaleBuilder', () => {
+	const getFallbackMinMaxSpy = jest.spyOn(
+		scaleUtils,
+		'getFallbackMinMaxTimeStamp',
+	);
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('initializes softMin/softMax correctly when both are 0 (treated as unset)', () => {
+		const builder = new UPlotScaleBuilder(
+			createScaleProps({
+				softMin: 0,
+				softMax: 0,
+			}),
+		);
+
+		// Non-time scale so config path uses thresholds pipeline; we just care that
+		// adjustSoftLimitsWithThresholds receives null soft limits instead of 0/0.
+		const adjustSpy = jest.spyOn(scaleUtils, 'adjustSoftLimitsWithThresholds');
+
+		builder.getConfig();
+
+		expect(adjustSpy).toHaveBeenCalledWith(null, null, undefined, undefined);
+	});
+
+	it('handles time scales using explicit min/max and rounds max down to the previous minute', () => {
+		const min = 1_700_000_000; // seconds
+		const max = 1_700_000_600; // seconds
+
+		const builder = new UPlotScaleBuilder(
+			createScaleProps({
+				scaleKey: 'x',
+				time: true,
+				min,
+				max,
+			}),
+		);
+
+		const config = builder.getConfig();
+		const xScale = config.x;
+
+		expect(xScale.time).toBe(true);
+		expect(xScale.auto).toBe(false);
+		expect(Array.isArray(xScale.range)).toBe(true);
+
+		const [resolvedMin, resolvedMax] = xScale.range as [number, number];
+
+		// min is passed through
+		expect(resolvedMin).toBe(min);
+
+		// max is coerced to "endTime - 1 minute" and rounded down to minute precision
+		const oneMinuteAgoTimestamp = (max - 60) * 1000;
+		const currentDate = new Date(oneMinuteAgoTimestamp);
+		currentDate.setSeconds(0);
+		currentDate.setMilliseconds(0);
+		const expectedMax = Math.floor(currentDate.getTime() / 1000);
+
+		expect(resolvedMax).toBe(expectedMax);
+	});
+
+	it('falls back to getFallbackMinMaxTimeStamp when time scale has no min/max', () => {
+		getFallbackMinMaxSpy.mockReturnValue({
+			fallbackMin: 100,
+			fallbackMax: 200,
+		});
+
+		const builder = new UPlotScaleBuilder(
+			createScaleProps({
+				scaleKey: 'x',
+				time: true,
+				min: undefined,
+				max: undefined,
+			}),
+		);
+
+		const config = builder.getConfig();
+		const [resolvedMin, resolvedMax] = config.x.range as [number, number];
+
+		expect(getFallbackMinMaxSpy).toHaveBeenCalled();
+		expect(resolvedMin).toBe(100);
+		// max is aligned to "fallbackMax - 60 seconds" minute boundary
+		expect(resolvedMax).toBeLessThanOrEqual(200);
+		expect(resolvedMax).toBeGreaterThan(100);
+	});
+
+	it('pipes limits through soft-limit adjustment and log-scale normalization before range config', () => {
+		const adjustSpy = jest.spyOn(scaleUtils, 'adjustSoftLimitsWithThresholds');
+		const normalizeSpy = jest.spyOn(scaleUtils, 'normalizeLogScaleLimits');
+		const getRangeConfigSpy = jest.spyOn(scaleUtils, 'getRangeConfig');
+
+		const thresholds = {
+			scaleKey: 'y',
+			thresholds: [{ thresholdValue: 10 }],
+			yAxisUnit: 'ms',
+		};
+
+		const builder = new UPlotScaleBuilder(
+			createScaleProps({
+				softMin: 1,
+				softMax: 5,
+				min: 0,
+				max: 100,
+				distribution: DistributionType.Logarithmic,
+				thresholds,
+				logBase: 2,
+				padMinBy: 0.1,
+				padMaxBy: 0.2,
+			}),
+		);
+
+		builder.getConfig();
+
+		expect(adjustSpy).toHaveBeenCalledWith(1, 5, thresholds.thresholds, 'ms');
+		expect(normalizeSpy).toHaveBeenCalledWith({
+			distr: DistributionType.Logarithmic,
+			logBase: 2,
+			limits: {
+				min: 0,
+				max: 100,
+				softMin: expect.anything(),
+				softMax: expect.anything(),
+			},
+		});
+		expect(getRangeConfigSpy).toHaveBeenCalled();
+	});
+
+	it('computes distribution config for non-time scales and wires range function when range is not provided', () => {
+		const createRangeFnSpy = jest.spyOn(scaleUtils, 'createRangeFunction');
+
+		const builder = new UPlotScaleBuilder(
+			createScaleProps({
+				scaleKey: 'y',
+				time: false,
+				distribution: DistributionType.Linear,
+			}),
+		);
+
+		const config = builder.getConfig();
+		const yScale = config.y;
+
+		expect(createRangeFnSpy).toHaveBeenCalled();
+
+		// range should be a function when not provided explicitly
+		expect(typeof yScale.range).toBe('function');
+
+		// distribution config should be applied
+		expect(yScale.distr).toBeDefined();
+		expect(yScale.log).toBeDefined();
+	});
+
+	it('respects explicit range function when provided on props', () => {
+		const explicitRange: uPlot.Scale.Range = jest.fn(() => [
+			0,
+			10,
+		]) as uPlot.Scale.Range;
+
+		const builder = new UPlotScaleBuilder(
+			createScaleProps({
+				scaleKey: 'y',
+				range: explicitRange,
+			}),
+		);
+
+		const config = builder.getConfig();
+		const yScale = config.y;
+
+		expect(yScale.range).toBe(explicitRange);
+	});
+
+	it('derives auto flag when not explicitly provided, based on hasFixedRange and time', () => {
+		const getRangeConfigSpy = jest.spyOn(scaleUtils, 'getRangeConfig');
+
+		const builder = new UPlotScaleBuilder(
+			createScaleProps({
+				min: 0,
+				max: 100,
+				time: false,
+			}),
+		);
+
+		const config = builder.getConfig();
+		const yScale = config.y;
+
+		expect(getRangeConfigSpy).toHaveBeenCalled();
+		// For non-time scale with fixed min/max, hasFixedRange is true → auto should remain false
+		expect(yScale.auto).toBe(false);
+	});
+
+	it('merge updates internal min/max/soft limits while preserving other props', () => {
+		const builder = new UPlotScaleBuilder(
+			createScaleProps({
+				scaleKey: 'y',
+				min: 0,
+				max: 10,
+				softMin: 1,
+				softMax: 9,
+				time: false,
+			}),
+		);
+
+		builder.merge({
+			min: 2,
+			softMax: undefined,
+		});
+
+		expect(builder.props.min).toBe(2);
+		expect(builder.props.softMax).toBe(undefined);
+		expect(builder.props.max).toBe(10);
+		expect(builder.props.softMin).toBe(1);
+		expect(builder.props.time).toBe(false);
+		expect(builder.props.scaleKey).toBe('y');
+		expect(builder.props.distribution).toBe(DistributionType.Linear);
+		expect(builder.props.thresholds).toBe(undefined);
+	});
+});

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

@@ -0,0 +1,295 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { themeColors } from 'constants/theme';
+import uPlot from 'uplot';
+
+import type { SeriesProps } from '../types';
+import {
+	DrawStyle,
+	LineInterpolation,
+	LineStyle,
+	VisibilityMode,
+} from '../types';
+import { UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
+
+const createBaseProps = (
+	overrides: Partial<SeriesProps> = {},
+): SeriesProps => ({
+	scaleKey: 'y',
+	label: 'Requests',
+	colorMapping: {},
+	drawStyle: DrawStyle.Line,
+	isDarkMode: false,
+	panelType: PANEL_TYPES.TIME_SERIES,
+	...overrides,
+});
+
+interface MockPath extends uPlot.Series.Paths {
+	name?: string;
+}
+
+describe('UPlotSeriesBuilder', () => {
+	it('maps basic props into uPlot series config', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				label: 'Latency',
+				spanGaps: true,
+				show: false,
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.scale).toBe('y');
+		expect(config.label).toBe('Latency');
+		expect(config.spanGaps).toBe(true);
+		expect(config.show).toBe(false);
+		expect(config.pxAlign).toBe(true);
+		expect(typeof config.value).toBe('function');
+	});
+
+	it('uses explicit lineColor when provided, regardless of mapping', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				lineColor: '#ff00ff',
+				colorMapping: { Requests: '#00ff00' },
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.stroke).toBe('#ff00ff');
+	});
+
+	it('falls back to theme colors when no label is provided', () => {
+		const darkBuilder = new UPlotSeriesBuilder(
+			createBaseProps({
+				label: undefined,
+				isDarkMode: true,
+				lineColor: undefined,
+			}),
+		);
+		const lightBuilder = new UPlotSeriesBuilder(
+			createBaseProps({
+				label: undefined,
+				isDarkMode: false,
+				lineColor: undefined,
+			}),
+		);
+
+		const darkConfig = darkBuilder.getConfig();
+		const lightConfig = lightBuilder.getConfig();
+
+		expect(darkConfig.stroke).toBe(themeColors.white);
+		expect(lightConfig.stroke).toBe(themeColors.black);
+	});
+
+	it('uses colorMapping when available and no explicit lineColor is provided', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				label: 'Requests',
+				colorMapping: { Requests: '#123456' },
+				lineColor: undefined,
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.stroke).toBe('#123456');
+	});
+
+	it('passes through a custom pathBuilder when provided', () => {
+		const customPaths = (jest.fn() as unknown) as uPlot.Series.PathBuilder;
+
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				pathBuilder: customPaths,
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.paths).toBe(customPaths);
+	});
+
+	it('does not build line paths when drawStyle is Points, but still renders points', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				drawStyle: DrawStyle.Points,
+				pointSize: 4,
+				lineWidth: 2,
+				lineColor: '#aa00aa',
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(typeof config.paths).toBe('function');
+		expect(config.paths && config.paths({} as uPlot, 1, 0, 10)).toBeNull();
+
+		expect(config.points).toBeDefined();
+		expect(config.points?.stroke).toBe('#aa00aa');
+		expect(config.points?.fill).toBe('#aa00aa');
+		expect(config.points?.show).toBe(true);
+		expect(config.points?.size).toBe(4);
+	});
+
+	it('derives point size based on lineWidth and pointSize', () => {
+		const smallPointsBuilder = new UPlotSeriesBuilder(
+			createBaseProps({
+				lineWidth: 4,
+				pointSize: 2,
+			}),
+		);
+		const largePointsBuilder = new UPlotSeriesBuilder(
+			createBaseProps({
+				lineWidth: 2,
+				pointSize: 4,
+			}),
+		);
+
+		const smallConfig = smallPointsBuilder.getConfig();
+		const largeConfig = largePointsBuilder.getConfig();
+
+		expect(smallConfig.points?.size).toBeUndefined();
+		expect(largeConfig.points?.size).toBe(4);
+	});
+
+	it('uses pointsBuilder when provided instead of default visibility logic', () => {
+		const pointsBuilder: uPlot.Series.Points.Show = jest.fn(
+			() => true,
+		) as uPlot.Series.Points.Show;
+
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				pointsBuilder,
+				drawStyle: DrawStyle.Line,
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.points?.show).toBe(pointsBuilder);
+	});
+
+	it('respects VisibilityMode for point visibility when no custom pointsBuilder is given', () => {
+		const neverPointsBuilder = new UPlotSeriesBuilder(
+			createBaseProps({
+				drawStyle: DrawStyle.Line,
+				showPoints: VisibilityMode.Never,
+			}),
+		);
+		const alwaysPointsBuilder = new UPlotSeriesBuilder(
+			createBaseProps({
+				drawStyle: DrawStyle.Line,
+				showPoints: VisibilityMode.Always,
+			}),
+		);
+
+		const neverConfig = neverPointsBuilder.getConfig();
+		const alwaysConfig = alwaysPointsBuilder.getConfig();
+
+		expect(neverConfig.points?.show).toBe(false);
+		expect(alwaysConfig.points?.show).toBe(true);
+	});
+
+	it('applies LineStyle.Dashed and lineCap to line config', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				lineStyle: LineStyle.Dashed,
+				lineCap: 'round' as CanvasLineCap,
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.dash).toEqual([10, 10]);
+		expect(config.cap).toBe('round');
+	});
+
+	it('builds default paths for Line drawStyle and invokes the path builder', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				drawStyle: DrawStyle.Line,
+				lineInterpolation: LineInterpolation.Linear,
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		const result = config.paths?.({} as uPlot, 1, 0, 10);
+		expect((result as MockPath).name).toBe('linear');
+	});
+
+	it('uses StepBefore and StepAfter interpolation for line paths', () => {
+		const stepBeforeBuilder = new UPlotSeriesBuilder(
+			createBaseProps({
+				drawStyle: DrawStyle.Line,
+				lineInterpolation: LineInterpolation.StepBefore,
+			}),
+		);
+		const stepAfterBuilder = new UPlotSeriesBuilder(
+			createBaseProps({
+				drawStyle: DrawStyle.Line,
+				lineInterpolation: LineInterpolation.StepAfter,
+			}),
+		);
+
+		const stepBeforeConfig = stepBeforeBuilder.getConfig();
+		const stepAfterConfig = stepAfterBuilder.getConfig();
+		const stepBeforePath = stepBeforeConfig.paths?.({} as uPlot, 1, 0, 5);
+		const stepAfterPath = stepAfterConfig.paths?.({} as uPlot, 1, 0, 5);
+		expect((stepBeforePath as MockPath).name).toBe('stepped-(-1)');
+		expect((stepAfterPath as MockPath).name).toBe('stepped-(1)');
+	});
+
+	it('defaults to spline interpolation when lineInterpolation is Spline or undefined', () => {
+		const splineBuilder = new UPlotSeriesBuilder(
+			createBaseProps({
+				drawStyle: DrawStyle.Line,
+				lineInterpolation: LineInterpolation.Spline,
+			}),
+		);
+		const defaultBuilder = new UPlotSeriesBuilder(
+			createBaseProps({ drawStyle: DrawStyle.Line }),
+		);
+
+		const splineConfig = splineBuilder.getConfig();
+		const defaultConfig = defaultBuilder.getConfig();
+
+		const splinePath = splineConfig.paths?.({} as uPlot, 1, 0, 10);
+		const defaultPath = defaultConfig.paths?.({} as uPlot, 1, 0, 10);
+
+		expect((splinePath as MockPath).name).toBe('spline');
+		expect((defaultPath as MockPath).name).toBe('spline');
+	});
+
+	it('uses generateColor when label has no colorMapping and no lineColor', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				label: 'CustomSeries',
+				colorMapping: {},
+				lineColor: undefined,
+			}),
+		);
+
+		const config = builder.getConfig();
+		expect(config.stroke).toBe('#E64A3C');
+	});
+
+	it('passes through pointsFilter when provided', () => {
+		const pointsFilter: uPlot.Series.Points.Filter = jest.fn(
+			(_self, _seriesIdx, _show) => null,
+		);
+
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				pointsFilter,
+				drawStyle: DrawStyle.Line,
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.points?.filter).toBe(pointsFilter);
+	});
+});

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

@@ -126,7 +126,45 @@ export enum VisibilityMode {
 	Never = 'never',
 }
 
-export interface SeriesProps {
+/**
+ * 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 {
 	scaleKey: string;
 	label?: string;
 	panelType: PANEL_TYPES;
@@ -137,20 +175,7 @@ export interface SeriesProps {
 	pointsBuilder?: Series.Points.Show;
 	show?: boolean;
 	spanGaps?: boolean;
-
 	isDarkMode?: boolean;
-
-	// 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/lib/uPlotV2/context/__tests__/PlotContext.test.tsx

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

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

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

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

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

frontend/src/lib/uPlotV2/utils/__tests__/axis.test.ts

@@ -0,0 +1,218 @@
+import type uPlot from 'uplot';
+import { Axis } from 'uplot';
+
+import {
+	buildYAxisSizeCalculator,
+	calculateTextWidth,
+	getExistingAxisSize,
+} from '../axis';
+
+describe('axis utils', () => {
+	describe('calculateTextWidth', () => {
+		it('returns 0 when values are undefined or empty', () => {
+			const mockSelf = ({
+				ctx: {
+					measureText: jest.fn(),
+					font: '',
+				},
+			} as unknown) as uPlot;
+
+			// internally the type is string but it is an array of strings
+			const mockAxis: Axis = { font: (['12px sans-serif'] as unknown) as string };
+
+			expect(calculateTextWidth(mockSelf, mockAxis, undefined)).toBe(0);
+			expect(calculateTextWidth(mockSelf, mockAxis, [])).toBe(0);
+		});
+
+		it('returns 0 when longest value is empty string or axis has no usable font', () => {
+			const mockSelf = ({
+				ctx: {
+					measureText: jest.fn(),
+					font: '',
+				},
+			} as unknown) as uPlot;
+
+			const axisWithoutFont: Axis = { font: '' };
+			const axisWithEmptyFontArray: Axis = { font: '' };
+
+			expect(calculateTextWidth(mockSelf, axisWithoutFont, [''])).toBe(0);
+			expect(
+				calculateTextWidth(mockSelf, axisWithEmptyFontArray, ['a', 'bb']),
+			).toBe(0);
+		});
+
+		it('measures longest value using canvas context and axis font', () => {
+			const measureText = jest.fn(() => ({ width: 100 }));
+			const mockSelf = ({
+				ctx: {
+					font: '',
+					measureText,
+				},
+			} as unknown) as uPlot;
+
+			const mockAxis: Axis = { font: (['14px Arial'] as unknown) as string };
+			const values = ['1', '1234', '12'];
+			const dpr =
+				((global as unknown) as { devicePixelRatio?: number }).devicePixelRatio ??
+				1;
+
+			const result = calculateTextWidth(mockSelf, mockAxis, values);
+
+			expect(measureText).toHaveBeenCalledWith('1234');
+			expect(mockSelf.ctx.font).toBe('14px Arial');
+			expect(result).toBe(100 / dpr);
+		});
+	});
+
+	describe('getExistingAxisSize', () => {
+		it('returns internal _size when present', () => {
+			const axis: any = {
+				_size: 42,
+				size: 10,
+			};
+
+			const result = getExistingAxisSize({
+				uplotInstance: ({} as unknown) as uPlot,
+				axis,
+				axisIdx: 0,
+				cycleNum: 0,
+			});
+
+			expect(result).toBe(42);
+		});
+
+		it('invokes size function when _size is not set', () => {
+			const sizeFn = jest.fn(() => 24);
+			const axis: Axis = { size: sizeFn };
+			const instance = ({} as unknown) as uPlot;
+
+			const result = getExistingAxisSize({
+				uplotInstance: instance,
+				axis,
+				values: ['10', '20'],
+				axisIdx: 1,
+				cycleNum: 2,
+			});
+
+			expect(sizeFn).toHaveBeenCalledWith(instance, ['10', '20'], 1, 2);
+			expect(result).toBe(24);
+		});
+
+		it('returns numeric size or 0 when neither _size nor size are provided', () => {
+			const axisWithSize: Axis = { size: 16 };
+			const axisWithoutSize: Axis = {};
+			const instance = ({} as unknown) as uPlot;
+
+			expect(
+				getExistingAxisSize({
+					uplotInstance: instance,
+					axis: axisWithSize,
+					axisIdx: 0,
+					cycleNum: 0,
+				}),
+			).toBe(16);
+
+			expect(
+				getExistingAxisSize({
+					uplotInstance: instance,
+					axis: axisWithoutSize,
+					axisIdx: 0,
+					cycleNum: 0,
+				}),
+			).toBe(0);
+		});
+	});
+
+	describe('buildYAxisSizeCalculator', () => {
+		it('delegates to getExistingAxisSize when cycleNum > 1', () => {
+			const sizeCalculator = buildYAxisSizeCalculator(5);
+
+			const axis: any = {
+				_size: 80,
+				ticks: { size: 10 },
+				font: ['12px sans-serif'],
+			};
+
+			const measureText = jest.fn(() => ({ width: 60 }));
+			const self = ({
+				axes: [axis],
+				ctx: {
+					font: '',
+					measureText,
+				},
+			} as unknown) as uPlot;
+
+			if (typeof sizeCalculator === 'number') {
+				throw new Error('Size calculator is a number');
+			}
+
+			const result = sizeCalculator(self, ['10', '20'], 0, 2);
+
+			expect(result).toBe(80);
+			expect(measureText).not.toHaveBeenCalled();
+		});
+
+		it('computes size from ticks, gap and text width when cycleNum <= 1', () => {
+			const gap = 7;
+			const sizeCalculator = buildYAxisSizeCalculator(gap);
+
+			const axis: Axis = {
+				ticks: { size: 12 },
+				font: (['12px sans-serif'] as unknown) as string,
+			};
+
+			const measureText = jest.fn(() => ({ width: 50 }));
+			const self = ({
+				axes: [axis],
+				ctx: {
+					font: '',
+					measureText,
+				},
+			} as unknown) as uPlot;
+
+			const dpr =
+				((global as unknown) as { devicePixelRatio?: number }).devicePixelRatio ??
+				1;
+			const expected = Math.ceil(12 + gap + 50 / dpr);
+
+			if (typeof sizeCalculator === 'number') {
+				throw new Error('Size calculator is a number');
+			}
+
+			const result = sizeCalculator(self, ['short', 'the-longest'], 0, 0);
+			expect(measureText).toHaveBeenCalledWith('the-longest');
+			expect(result).toBe(expected);
+		});
+
+		it('uses 0 ticks size when ticks are not defined', () => {
+			const gap = 4;
+			const sizeCalculator = buildYAxisSizeCalculator(gap);
+
+			const axis: Axis = {
+				font: (['12px sans-serif'] as unknown) as string,
+			};
+
+			const measureText = jest.fn(() => ({ width: 40 }));
+			const self = ({
+				axes: [axis],
+				ctx: {
+					font: '',
+					measureText,
+				},
+			} as unknown) as uPlot;
+
+			const dpr =
+				((global as unknown) as { devicePixelRatio?: number }).devicePixelRatio ??
+				1;
+			const expected = Math.ceil(gap + 40 / dpr);
+
+			if (typeof sizeCalculator === 'number') {
+				throw new Error('Size calculator is a number');
+			}
+
+			const result = sizeCalculator(self, ['1', '123'], 0, 1);
+
+			expect(result).toBe(expected);
+		});
+	});
+});

frontend/src/lib/uPlotV2/utils/axis.ts

@@ -0,0 +1,80 @@
+import { Axis } from 'uplot';
+
+/**
+ * Calculate text width for longest value
+ */
+export function calculateTextWidth(
+	self: uPlot,
+	axis: Axis,
+	values: string[] | undefined,
+): number {
+	if (!values || values.length === 0) {
+		return 0;
+	}
+
+	// Find longest value
+	const longestVal = values.reduce(
+		(acc, val) => (val.length > acc.length ? val : acc),
+		'',
+	);
+
+	if (longestVal === '' || !axis.font?.[0]) {
+		return 0;
+	}
+
+	self.ctx.font = axis.font[0];
+	return self.ctx.measureText(longestVal).width / devicePixelRatio;
+}
+
+export function getExistingAxisSize({
+	uplotInstance,
+	axis,
+	values,
+	axisIdx,
+	cycleNum,
+}: {
+	uplotInstance: uPlot;
+	axis: Axis;
+	values?: string[];
+	axisIdx: number;
+	cycleNum: number;
+}): number {
+	const internalSize = (axis as { _size?: number })._size;
+	if (internalSize !== undefined) {
+		return internalSize;
+	}
+
+	const existingSize = axis.size;
+	if (typeof existingSize === 'function') {
+		return existingSize(uplotInstance, values ?? [], axisIdx, cycleNum);
+	}
+
+	return existingSize ?? 0;
+}
+
+export function buildYAxisSizeCalculator(gap: number): uPlot.Axis.Size {
+	return (
+		self: uPlot,
+		values: string[] | undefined,
+		axisIdx: number,
+		cycleNum: number,
+	): number => {
+		const axis = self.axes[axisIdx];
+
+		// Bail out, force convergence
+		if (cycleNum > 1) {
+			return getExistingAxisSize({
+				uplotInstance: self,
+				axis,
+				values,
+				axisIdx,
+				cycleNum,
+			});
+		}
+
+		let axisSize = (axis.ticks?.size ?? 0) + gap;
+		axisSize += calculateTextWidth(self, axis, values);
+
+		return Math.ceil(axisSize);
+	};
+}

frontend/src/lib/uPlotV2/utils/seriesVisibility.ts

@@ -1,11 +1,25 @@
-export function resolveSeriesVisibility(
-	label: string,
-	seriesShow: boolean | undefined | null,
-	visibilityMap: Map<string, boolean> | null,
-	isAnySeriesHidden: boolean,
-): boolean {
-	if (isAnySeriesHidden) {
-		return visibilityMap?.get(label) ?? false;
+import { SeriesVisibilityState } from 'container/DashboardContainer/visualization/panels/types';
+
+export function resolveSeriesVisibility({
+	seriesIndex,
+	seriesShow,
+	seriesLabel,
+	seriesVisibilityState,
+	isAnySeriesHidden,
+}: {
+	seriesIndex: number;
+	seriesShow: boolean | undefined | null;
+	seriesLabel: string;
+	seriesVisibilityState: SeriesVisibilityState | null;
+	isAnySeriesHidden: boolean;
+}): boolean {
+	if (
+		isAnySeriesHidden &&
+		seriesVisibilityState?.visibility &&
+		seriesVisibilityState.labels.length > seriesIndex &&
+		seriesVisibilityState.labels[seriesIndex] === seriesLabel
+	) {
+		return seriesVisibilityState.visibility[seriesIndex] ?? false;
 	}
 	return seriesShow ?? true;
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/utils/docLinks.ts

@@ -6,6 +6,8 @@ const DOCLINKS = {
 		'https://signoz.io/docs/product-features/trace-explorer/?utm_source=product&utm_medium=traces-explorer-trace-tab#traces-view',
 	METRICS_EXPLORER_EMPTY_STATE:
 		'https://signoz.io/docs/userguide/send-metrics-cloud/',
+	EXTERNAL_API_MONITORING:
+		'https://signoz.io/docs/external-api-monitoring/overview/',
 };
 
 export default DOCLINKS;

pkg/emailing/config.go

@@ -10,6 +10,27 @@ 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 {
@@ -45,6 +66,19 @@ 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,6 +15,7 @@ type provider struct {
 	settings factory.ScopedProviderSettings
 	store    emailtypes.TemplateStore
 	client   *client.Client
+	config   emailing.Config
 }
 
 func NewFactory() factory.ProviderFactory[emailing.Emailing, emailing.Config] {
@@ -55,7 +56,12 @@ func New(ctx context.Context, providerSettings factory.ProviderSettings, config
 		return nil, err
 	}
 
-	return &provider{settings: settings, store: store, client: client}, nil
+	return &provider{
+		settings: settings,
+		store:    store,
+		client:   client,
+		config:   config,
+	}, nil
 }
 
 func (provider *provider) SendHTML(ctx context.Context, to string, subject string, templateName emailtypes.TemplateName, data map[string]any) error {
@@ -69,8 +75,19 @@ 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/user/impluser/module.go

@@ -22,8 +22,6 @@ 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 {
@@ -146,11 +144,9 @@ func (m *Module) CreateBulkInvite(ctx context.Context, orgID valuer.UUID, userID
 			continue
 		}
 
-		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),
+		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),
 		}); err != nil {
 			m.settings.Logger().ErrorContext(ctx, "failed to send email", "error", err)
 		}
@@ -261,18 +257,6 @@ func (m *Module) UpdateUser(ctx context.Context, orgID valuer.UUID, id string, u
 	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)
-		}
-	}
-
 	if err := m.tokenizer.DeleteIdentity(ctx, valuer.MustNewUUID(id)); err != nil {
 		return nil, err
 	}
@@ -394,10 +378,9 @@ func (module *Module) ForgotPassword(ctx context.Context, orgID valuer.UUID, ema
 	if err := module.emailing.SendHTML(
 		ctx,
 		user.Email.String(),
-		"Reset your SigNoz password",
+		"A Password Reset Was Requested for SigNoz",
 		emailtypes.TemplateNameResetPassword,
 		map[string]any{
-			"Name":   user.DisplayName,
 			"Link":   resetLink,
 			"Expiry": humanizedTokenLifetime,
 		},

pkg/querier/querier.go

@@ -278,7 +278,7 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 	var metricTemporality map[string]metrictypes.Temporality
 	if len(metricNames) > 0 {
 		var err error
-		metricTemporality, err = q.metadataStore.FetchTemporalityMulti(ctx, metricNames...)
+		metricTemporality, err = q.metadataStore.FetchTemporalityMulti(ctx, req.Start, req.End, metricNames...)
 		if err != nil {
 			q.logger.WarnContext(ctx, "failed to fetch metric temporality", "error", err, "metrics", metricNames)
 			// Continue without temporality - statement builder will handle unspecified

pkg/query-service/app/clickhouseReader/reader.go

@@ -3261,20 +3261,14 @@ func (r *ClickHouseReader) GetMetricAggregateAttributes(ctx context.Context, org
 		metadata := metadataMap[name]
 
 		typ := string(metadata.MetricType)
-		temporality := string(metadata.Temporality)
-		isMonotonic := metadata.IsMonotonic
-
-		// Non-monotonic cumulative sums are treated as gauges
-		if typ == "Sum" && !isMonotonic && temporality == string(v3.Cumulative) {
-			typ = "Gauge"
-		}
 
 		// unlike traces/logs `tag`/`resource` type, the `Type` will be metric type
 		key := v3.AttributeKey{
-			Key:      name,
-			DataType: v3.AttributeKeyDataTypeFloat64,
-			Type:     v3.AttributeKeyType(typ),
-			IsColumn: true,
+			Key:         name,
+			DataType:    v3.AttributeKeyDataTypeFloat64,
+			Type:        v3.AttributeKeyType(typ),
+			IsMonotonic: metadata.IsMonotonic,
+			IsColumn:    true,
 		}
 
 		if _, ok := seen[name+typ]; ok {
@@ -5419,6 +5413,7 @@ func (r *ClickHouseReader) ListSummaryMetrics(ctx context.Context, orgID valuer.
 		    t.metric_name AS metric_name,
 		    ANY_VALUE(t.description) AS description,
 		    ANY_VALUE(t.type) AS metric_type,
+			ANY_VALUE(t.is_monotonic) AS metric_is_monotonic,
 		    ANY_VALUE(t.unit) AS metric_unit,
 		    uniq(t.fingerprint) AS timeseries,
 			uniq(metric_name) OVER() AS total
@@ -5450,7 +5445,7 @@ func (r *ClickHouseReader) ListSummaryMetrics(ctx context.Context, orgID valuer.
 
 	for rows.Next() {
 		var metric metrics_explorer.MetricDetail
-		if err := rows.Scan(&metric.MetricName, &metric.Description, &metric.MetricType, &metric.MetricUnit, &metric.TimeSeries, &response.Total); err != nil {
+		if err := rows.Scan(&metric.MetricName, &metric.Description, &metric.MetricType, &metric.IsMonotonic, &metric.MetricUnit, &metric.TimeSeries, &response.Total); err != nil {
 			zap.L().Error("Error scanning metric row", zap.Error(err))
 			return &response, &model.ApiError{Typ: "ClickHouseError", Err: err}
 		}

pkg/query-service/model/metrics_explorer/summary.go

@@ -36,6 +36,7 @@ type MetricDetail struct {
 	TimeSeries   uint64 `json:"timeseries"`
 	Samples      uint64 `json:"samples"`
 	LastReceived int64  `json:"lastReceived"`
+	IsMonotonic  bool   `json:"is_monotonic"`
 }
 
 type TreeMapResponseItem struct {

pkg/query-service/model/v3/v3.go

@@ -381,11 +381,12 @@ func (t AttributeKeyType) String() string {
 }
 
 type AttributeKey struct {
-	Key      string               `json:"key"`
-	DataType AttributeKeyDataType `json:"dataType"`
-	Type     AttributeKeyType     `json:"type"`
-	IsColumn bool                 `json:"isColumn"`
-	IsJSON   bool                 `json:"isJSON"`
+	Key         string               `json:"key"`
+	DataType    AttributeKeyDataType `json:"dataType"`
+	Type        AttributeKeyType     `json:"type"`
+	IsColumn    bool                 `json:"isColumn"`
+	IsMonotonic bool                 `json:"is_monotonic"`
+	IsJSON      bool                 `json:"isJSON"`
 }
 
 func (a AttributeKey) CacheKey() string {

pkg/telemetrymetadata/metadata.go

@@ -1597,12 +1597,12 @@ func (t *telemetryMetaStore) GetAllValues(ctx context.Context, fieldValueSelecto
 	return values, complete, nil
 }
 
-func (t *telemetryMetaStore) FetchTemporality(ctx context.Context, metricName string) (metrictypes.Temporality, error) {
+func (t *telemetryMetaStore) FetchTemporality(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricName string) (metrictypes.Temporality, error) {
 	if metricName == "" {
 		return metrictypes.Unknown, errors.Newf(errors.TypeInternal, errors.CodeInternal, "metric name cannot be empty")
 	}
 
-	temporalityMap, err := t.FetchTemporalityMulti(ctx, metricName)
+	temporalityMap, err := t.FetchTemporalityMulti(ctx, queryTimeRangeStartTs, queryTimeRangeEndTs, metricName)
 	if err != nil {
 		return metrictypes.Unknown, err
 	}
@@ -1615,13 +1615,13 @@ func (t *telemetryMetaStore) FetchTemporality(ctx context.Context, metricName st
 	return temporality, nil
 }
 
-func (t *telemetryMetaStore) FetchTemporalityMulti(ctx context.Context, metricNames ...string) (map[string]metrictypes.Temporality, error) {
+func (t *telemetryMetaStore) FetchTemporalityMulti(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricNames ...string) (map[string]metrictypes.Temporality, error) {
 	if len(metricNames) == 0 {
 		return make(map[string]metrictypes.Temporality), nil
 	}
 
 	result := make(map[string]metrictypes.Temporality)
-	metricsTemporality, err := t.fetchMetricsTemporality(ctx, metricNames...)
+	metricsTemporality, err := t.fetchMetricsTemporality(ctx, queryTimeRangeStartTs, queryTimeRangeEndTs, metricNames...)
 	if err != nil {
 		return nil, err
 	}
@@ -1630,8 +1630,12 @@ func (t *telemetryMetaStore) FetchTemporalityMulti(ctx context.Context, metricNa
 
 	// For metrics not found in the database, set to Unknown
 	for _, metricName := range metricNames {
-		if temporality, exists := metricsTemporality[metricName]; exists {
-			result[metricName] = temporality
+		if temporality, exists := metricsTemporality[metricName]; exists && len(temporality) > 0 {
+			if len(temporality) > 1 {
+				result[metricName] = metrictypes.Multiple
+			} else {
+				result[metricName] = temporality[0]
+			}
 			continue
 		}
 		if temporality, exists := meterMetricsTemporality[metricName]; exists {
@@ -1644,8 +1648,10 @@ func (t *telemetryMetaStore) FetchTemporalityMulti(ctx context.Context, metricNa
 	return result, nil
 }
 
-func (t *telemetryMetaStore) fetchMetricsTemporality(ctx context.Context, metricNames ...string) (map[string]metrictypes.Temporality, error) {
-	result := make(map[string]metrictypes.Temporality)
+func (t *telemetryMetaStore) fetchMetricsTemporality(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricNames ...string) (map[string][]metrictypes.Temporality, error) {
+	result := make(map[string][]metrictypes.Temporality)
+
+	adjustedStartTs, adjustedEndTs, tsTableName, _ := telemetrymetrics.WhichTSTableToUse(queryTimeRangeStartTs, queryTimeRangeEndTs, nil)
 
 	// Build query to fetch temporality for all metrics
 	// We use attr_string_value where attr_name = '__temporality__'
@@ -1653,14 +1659,18 @@ func (t *telemetryMetaStore) fetchMetricsTemporality(ctx context.Context, metric
 	// and metric_name column contains temporality value, so we use the correct mapping
 	sb := sqlbuilder.Select(
 		"metric_name",
-		"argMax(temporality, last_reported_unix_milli) as temporality",
-	).From(t.metricsDBName + "." + t.metricsFieldsTblName)
+		"temporality",
+	).
+		From(t.metricsDBName + "." + tsTableName)
 
 	// Filter by metric names (in the temporality column due to data mix-up)
-	sb.Where(sb.In("metric_name", metricNames))
+	sb.Where(
+		sb.In("metric_name", metricNames),
+		sb.GTE("unix_milli", adjustedStartTs),
+		sb.LT("unix_milli", adjustedEndTs),
+	)
 
-	// Group by metric name to get one temporality per metric
-	sb.GroupBy("metric_name")
+	sb.GroupBy("metric_name", "temporality")
 
 	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
 
@@ -1692,8 +1702,12 @@ func (t *telemetryMetaStore) fetchMetricsTemporality(ctx context.Context, metric
 			// Unknown or empty temporality
 			temporality = metrictypes.Unknown
 		}
-
-		result[metricName] = temporality
+		if temporality != metrictypes.Unknown {
+			result[metricName] = append(result[metricName], temporality)
+		}
+	}
+	if err := rows.Err(); err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "error iterating over metrics temporality rows")
 	}
 
 	return result, nil

pkg/telemetrymetrics/statement_builder.go

@@ -21,6 +21,10 @@ const (
 	RateWithoutNegative     = `If((per_series_value - lagInFrame(per_series_value, 1, 0) OVER rate_window) < 0, per_series_value / (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window), (per_series_value - lagInFrame(per_series_value, 1, 0) OVER rate_window) / (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window))`
 	IncreaseWithoutNegative = `If((per_series_value - lagInFrame(per_series_value, 1, 0) OVER rate_window) < 0, per_series_value, ((per_series_value - lagInFrame(per_series_value, 1, 0) OVER rate_window) / (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window)) * (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window))`
 
+	RateWithoutNegativeMultiTemporality     = `IF(LOWER(temporality) LIKE LOWER('delta'), %s, IF((%s - lagInFrame(%s, 1, 0) OVER rate_window) < 0, %s / (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window), (%s - lagInFrame(%s, 1, 0) OVER rate_window) / (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window))) AS per_series_value`
+	IncreaseWithoutNegativeMultiTemporality = `IF(LOWER(temporality) LIKE LOWER('delta'), %s, IF((%s - lagInFrame(%s, 1, 0) OVER rate_window) < 0, %s, ((%s - lagInFrame(%s, 1, 0) OVER rate_window) / (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window)) * (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window))) AS per_series_value`
+	OthersMultiTemporality                  = `IF(LOWER(temporality) LIKE LOWER('delta'), %s, %s) AS per_series_value`
+
 	RateWithInterpolation = `
 		CASE 
 			WHEN row_number() OVER rate_window = 1 THEN 
@@ -377,7 +381,7 @@ func (b *MetricQueryStatementBuilder) buildTimeSeriesCTE(
 		sb.LTE("unix_milli", end),
 	)
 
-	if query.Aggregations[0].Temporality != metrictypes.Unknown {
+	if query.Aggregations[0].Temporality != metrictypes.Multiple && query.Aggregations[0].Temporality != metrictypes.Unknown {
 		sb.Where(sb.ILike("temporality", query.Aggregations[0].Temporality.StringValue()))
 	}
 
@@ -407,8 +411,10 @@ func (b *MetricQueryStatementBuilder) buildTemporalAggregationCTE(
 ) (string, []any, error) {
 	if query.Aggregations[0].Temporality == metrictypes.Delta {
 		return b.buildTemporalAggDelta(ctx, start, end, query, timeSeriesCTE, timeSeriesCTEArgs)
+	} else if query.Aggregations[0].Temporality != metrictypes.Multiple {
+		return b.buildTemporalAggCumulativeOrUnspecified(ctx, start, end, query, timeSeriesCTE, timeSeriesCTEArgs)
 	}
-	return b.buildTemporalAggCumulativeOrUnspecified(ctx, start, end, query, timeSeriesCTE, timeSeriesCTEArgs)
+	return b.buildTemporalAggForMultipleTemporalities(ctx, start, end, query, timeSeriesCTE, timeSeriesCTEArgs)
 }
 
 func (b *MetricQueryStatementBuilder) buildTemporalAggDelta(
@@ -528,6 +534,58 @@ func (b *MetricQueryStatementBuilder) buildTemporalAggCumulativeOrUnspecified(
 	}
 }
 
+// because RateInterpolation is not enabled anywhere due to some gaps in the logic wrt cache handling, it hasn't been considered for the multi temporality
+func (b *MetricQueryStatementBuilder) buildTemporalAggForMultipleTemporalities(
+	_ context.Context,
+	start, end uint64,
+	query qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation],
+	timeSeriesCTE string,
+	timeSeriesCTEArgs []any,
+) (string, []any, error) {
+	stepSec := int64(query.StepInterval.Seconds())
+	sb := sqlbuilder.NewSelectBuilder()
+
+	sb.SelectMore(fmt.Sprintf(
+		"toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(%d)) AS ts",
+		stepSec,
+	))
+	for _, g := range query.GroupBy {
+		sb.SelectMore(fmt.Sprintf("`%s`", g.TelemetryFieldKey.Name))
+	}
+
+	aggForDeltaTemporality := AggregationColumnForSamplesTable(start, end, query.Aggregations[0].Type, metrictypes.Delta, query.Aggregations[0].TimeAggregation, query.Aggregations[0].TableHints)
+	aggForCumulativeTemporality := AggregationColumnForSamplesTable(start, end, query.Aggregations[0].Type, metrictypes.Cumulative, query.Aggregations[0].TimeAggregation, query.Aggregations[0].TableHints)
+	if query.Aggregations[0].TimeAggregation == metrictypes.TimeAggregationRate {
+		aggForDeltaTemporality = fmt.Sprintf("%s/%d", aggForDeltaTemporality, stepSec)
+	}
+
+	switch query.Aggregations[0].TimeAggregation {
+	case metrictypes.TimeAggregationRate:
+		rateExpr := fmt.Sprintf(RateWithoutNegativeMultiTemporality, aggForDeltaTemporality, aggForCumulativeTemporality, aggForCumulativeTemporality, aggForCumulativeTemporality, start, aggForCumulativeTemporality, aggForCumulativeTemporality, start)
+		sb.SelectMore(rateExpr)
+	case metrictypes.TimeAggregationIncrease:
+		increaseExpr := fmt.Sprintf(IncreaseWithoutNegativeMultiTemporality, aggForDeltaTemporality, aggForCumulativeTemporality, aggForCumulativeTemporality, aggForCumulativeTemporality, aggForCumulativeTemporality, aggForCumulativeTemporality, start, start)
+		sb.SelectMore(increaseExpr)
+	default:
+		expr := fmt.Sprintf(OthersMultiTemporality, aggForDeltaTemporality, aggForCumulativeTemporality)
+		sb.SelectMore(expr)
+	}
+
+	tbl := WhichSamplesTableToUse(start, end, query.Aggregations[0].Type, query.Aggregations[0].TimeAggregation, query.Aggregations[0].TableHints)
+	sb.From(fmt.Sprintf("%s.%s AS points", DBName, tbl))
+	sb.JoinWithOption(sqlbuilder.InnerJoin, timeSeriesCTE, "points.fingerprint = filtered_time_series.fingerprint")
+	sb.Where(
+		sb.In("metric_name", query.Aggregations[0].MetricName),
+		sb.GTE("unix_milli", start),
+		sb.LT("unix_milli", end),
+	)
+	sb.GroupBy("fingerprint", "ts", "temporality")
+	sb.GroupBy(querybuilder.GroupByKeys(query.GroupBy)...)
+	queryWithoutWindow, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse, timeSeriesCTEArgs...)
+	queryWithWindowAndOrder := queryWithoutWindow + " WINDOW rate_window AS (PARTITION BY fingerprint ORDER BY fingerprint ASC, ts ASC) ORDER BY ts"
+	return fmt.Sprintf("__temporal_aggregation_cte AS (%s)", queryWithWindowAndOrder), args, nil
+}
+
 func (b *MetricQueryStatementBuilder) buildSpatialAggregationCTE(
 	_ context.Context,
 	_ uint64,

pkg/types/emailtypes/template.go

@@ -12,13 +12,12 @@ 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, TemplateNameUpdateRole, TemplateNameResetPassword}
+	Templates = []TemplateName{TemplateNameInvitationEmail, TemplateNameResetPassword}
 )
 
 var (
-	TemplateNameInvitationEmail = TemplateName{valuer.NewString("invitation_email")}
-	TemplateNameUpdateRole      = TemplateName{valuer.NewString("update_role")}
-	TemplateNameResetPassword   = TemplateName{valuer.NewString("reset_password_email")}
+	TemplateNameInvitationEmail = TemplateName{valuer.NewString("invitation")}
+	TemplateNameResetPassword   = TemplateName{valuer.NewString("reset_password")}
 )
 
 type TemplateName struct{ valuer.String }
@@ -27,8 +26,6 @@ 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:
@@ -40,7 +37,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, errors.WrapInternalf(err, errors.CodeInternal, "failed to execute template")
+		return nil, err
 	}
 
 	return buf.Bytes(), nil

pkg/types/integration.go

@@ -151,7 +151,8 @@ func (c *AccountConfig) Value() (driver.Value, error) {
 	if err != nil {
 		return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't serialize cloud account config to JSON")
 	}
-	return serialized, nil
+	// Return as string instead of []byte to ensure PostgreSQL stores as text, not bytea
+	return string(serialized), nil
 }
 
 type AgentReport struct {
@@ -186,7 +187,8 @@ func (r *AgentReport) Value() (driver.Value, error) {
 			err, errors.CodeInternal, "couldn't serialize agent report to JSON",
 		)
 	}
-	return serialized, nil
+	// Return as string instead of []byte to ensure PostgreSQL stores as text, not bytea
+	return string(serialized), nil
 }
 
 type CloudIntegrationService struct {
@@ -240,5 +242,6 @@ func (c *CloudServiceConfig) Value() (driver.Value, error) {
 			err, errors.CodeInternal, "couldn't serialize cloud service config to JSON",
 		)
 	}
-	return serialized, nil
+	// Return as string instead of []byte to ensure PostgreSQL stores as text, not bytea
+	return string(serialized), nil
 }

pkg/types/metrictypes/metrictypes.go

@@ -19,6 +19,7 @@ var (
 	Cumulative  = Temporality{valuer.NewString("cumulative")}
 	Unspecified = Temporality{valuer.NewString("unspecified")}
 	Unknown     = Temporality{valuer.NewString("")}
+	Multiple    = Temporality{valuer.NewString("__multiple__")}
 )
 
 func (t Temporality) Value() (driver.Value, error) {

pkg/types/telemetrytypes/store.go

@@ -27,10 +27,10 @@ type MetadataStore interface {
 	GetAllValues(ctx context.Context, fieldValueSelector *FieldValueSelector) (*TelemetryFieldValues, bool, error)
 
 	// FetchTemporality fetches the temporality for metric
-	FetchTemporality(ctx context.Context, metricName string) (metrictypes.Temporality, error)
+	FetchTemporality(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricName string) (metrictypes.Temporality, error)
 
 	// FetchTemporalityMulti fetches the temporality for multiple metrics
-	FetchTemporalityMulti(ctx context.Context, metricNames ...string) (map[string]metrictypes.Temporality, error)
+	FetchTemporalityMulti(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricNames ...string) (map[string]metrictypes.Temporality, error)
 
 	// ListLogsJSONIndexes lists the JSON indexes for the logs table.
 	ListLogsJSONIndexes(ctx context.Context, filters ...string) (map[string][]schemamigrator.Index, error)

pkg/types/telemetrytypes/telemetrytypestest/metadata_store.go

@@ -265,7 +265,7 @@ func (m *MockMetadataStore) SetAllValues(lookupKey string, values *telemetrytype
 }
 
 // FetchTemporality fetches the temporality for a metric
-func (m *MockMetadataStore) FetchTemporality(ctx context.Context, metricName string) (metrictypes.Temporality, error) {
+func (m *MockMetadataStore) FetchTemporality(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricName string) (metrictypes.Temporality, error) {
 	if temporality, exists := m.TemporalityMap[metricName]; exists {
 		return temporality, nil
 	}
@@ -273,7 +273,7 @@ func (m *MockMetadataStore) FetchTemporality(ctx context.Context, metricName str
 }
 
 // FetchTemporalityMulti fetches the temporality for multiple metrics
-func (m *MockMetadataStore) FetchTemporalityMulti(ctx context.Context, metricNames ...string) (map[string]metrictypes.Temporality, error) {
+func (m *MockMetadataStore) FetchTemporalityMulti(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricNames ...string) (map[string]metrictypes.Temporality, error) {
 	result := make(map[string]metrictypes.Temporality)
 
 	for _, metricName := range metricNames {

templates/email/invitation.gotmpl

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

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

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