chore: added frontend changes for properly displaying a - when host name not exists

frontend/__mocks__/uplotMock.ts

@@ -12,8 +12,6 @@ export interface MockUPlotInstance {
 export interface MockUPlotPaths {
 	spline: jest.Mock;
 	bars: jest.Mock;
-	linear: jest.Mock;
-	stepped: jest.Mock;
 }
 
 // Create mock instance methods
@@ -25,23 +23,10 @@ const createMockUPlotInstance = (): MockUPlotInstance => ({
 	setSeries: 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})`),
-	),
+// Create mock paths
+const mockPaths: MockUPlotPaths = {
+	spline: jest.fn(),
+	bars: jest.fn(),
 };
 
 // Mock static methods

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: true,
+			spanGaps: false,
 			lineStyle: LineStyle.Solid,
 			lineInterpolation: LineInterpolation.Spline,
 			showPoints: VisibilityMode.Never,

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

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

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

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

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -178,7 +178,9 @@ export default function HostsListTable({
 				indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 			}}
 			tableLayout="fixed"
-			rowKey={(record): string => record.hostName}
+			rowKey={(record): string =>
+				(record as HostRowData & { key: string }).key ?? record.hostName
+			}
 			onChange={handleTableChange}
 			onRow={(record): { onClick: () => void; className: string } => ({
 				onClick: (): void => handleRowClick(record),

frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss

@@ -126,7 +126,8 @@
 				background: var(--bg-ink-500);
 			}
 
-			.ant-table-cell:has(.hostname-column-value) {
+			.ant-table-cell:has(.hostname-column-value),
+			.ant-table-cell:has(.hostname-cell-missing) {
 				background: var(--bg-ink-400);
 			}
 
@@ -139,6 +140,23 @@
 				letter-spacing: -0.07px;
 			}
 
+			.hostname-cell-missing {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+			}
+
+			.hostname-cell-placeholder {
+				color: var(--Vanilla-400, #c0c1c3);
+			}
+
+			.hostname-cell-warning-icon {
+				display: inline-flex;
+				align-items: center;
+				margin-left: 4px;
+				cursor: help;
+			}
+
 			.status-cell {
 				.active-tag {
 					color: var(--bg-forest-500);
@@ -357,7 +375,8 @@
 				color: var(--bg-ink-500);
 			}
 
-			.ant-table-cell:has(.hostname-column-value) {
+			.ant-table-cell:has(.hostname-column-value),
+			.ant-table-cell:has(.hostname-cell-missing) {
 				background: var(--bg-vanilla-100);
 			}
 
@@ -365,6 +384,10 @@
 				color: var(--bg-ink-300);
 			}
 
+			.hostname-cell-placeholder {
+				color: var(--text-ink-300);
+			}
+
 			.ant-table-tbody > tr:hover > td {
 				background: rgba(0, 0, 0, 0.04);
 			}

frontend/src/container/InfraMonitoringHosts/__tests__/utilts.test.tsx

@@ -1,13 +1,24 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { HostData, TimeSeries } from 'api/infraMonitoring/getHostLists';
 
-import { formatDataForTable, GetHostsQuickFiltersConfig } from '../utils';
+import {
+	formatDataForTable,
+	GetHostsQuickFiltersConfig,
+	HostnameCell,
+} from '../utils';
 
 const PROGRESS_BAR_CLASS = '.progress-bar';
 
+const emptyTimeSeries: TimeSeries = {
+	labels: {},
+	labelsArray: [],
+	values: [],
+};
+
 describe('InfraMonitoringHosts utils', () => {
 	describe('formatDataForTable', () => {
 		it('should format host data correctly', () => {
-			const mockData = [
+			const mockData: HostData[] = [
 				{
 					hostName: 'test-host',
 					active: true,
@@ -16,8 +27,12 @@ describe('InfraMonitoringHosts utils', () => {
 					wait: 0.05,
 					load15: 2.5,
 					os: 'linux',
+					cpuTimeSeries: emptyTimeSeries,
+					memoryTimeSeries: emptyTimeSeries,
+					waitTimeSeries: emptyTimeSeries,
+					load15TimeSeries: emptyTimeSeries,
 				},
-			] as any;
+			];
 
 			const result = formatDataForTable(mockData);
 
@@ -46,7 +61,7 @@ describe('InfraMonitoringHosts utils', () => {
 		});
 
 		it('should handle inactive hosts', () => {
-			const mockData = [
+			const mockData: HostData[] = [
 				{
 					hostName: 'test-host',
 					active: false,
@@ -55,12 +70,12 @@ describe('InfraMonitoringHosts utils', () => {
 					wait: 0.02,
 					load15: 1.2,
 					os: 'linux',
-					cpuTimeSeries: [],
-					memoryTimeSeries: [],
-					waitTimeSeries: [],
-					load15TimeSeries: [],
+					cpuTimeSeries: emptyTimeSeries,
+					memoryTimeSeries: emptyTimeSeries,
+					waitTimeSeries: emptyTimeSeries,
+					load15TimeSeries: emptyTimeSeries,
 				},
-			] as any;
+			];
 
 			const result = formatDataForTable(mockData);
 
@@ -68,6 +83,65 @@ describe('InfraMonitoringHosts utils', () => {
 			expect(inactiveTag.container.textContent).toBe('INACTIVE');
 			expect(inactiveTag.container.querySelector('.inactive')).toBeTruthy();
 		});
+
+		it('should set hostName to empty string when host has no hostname', () => {
+			const mockData: HostData[] = [
+				{
+					hostName: '',
+					active: true,
+					cpu: 0.5,
+					memory: 0.4,
+					wait: 0.01,
+					load15: 1.0,
+					os: 'linux',
+					cpuTimeSeries: emptyTimeSeries,
+					memoryTimeSeries: emptyTimeSeries,
+					waitTimeSeries: emptyTimeSeries,
+					load15TimeSeries: emptyTimeSeries,
+				},
+			];
+
+			const result = formatDataForTable(mockData);
+			expect(result[0].hostName).toBe('');
+			expect(result[0].key).toBe('-0');
+		});
+	});
+
+	describe('HostnameCell', () => {
+		it('should render hostname when present (case A: no icon)', () => {
+			const { container } = render(<HostnameCell hostName="gke-prod-1" />);
+			expect(container.querySelector('.hostname-column-value')).toBeTruthy();
+			expect(container.textContent).toBe('gke-prod-1');
+			expect(container.querySelector('.hostname-cell-missing')).toBeFalsy();
+			expect(container.querySelector('.hostname-cell-warning-icon')).toBeFalsy();
+		});
+
+		it('should render placeholder and icon when hostName is empty (case B)', () => {
+			const { container } = render(<HostnameCell hostName="" />);
+			expect(screen.getByText('-')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
+			const iconWrapper = container.querySelector('.hostname-cell-warning-icon');
+			expect(iconWrapper).toBeTruthy();
+			expect(iconWrapper?.getAttribute('aria-label')).toBe(
+				'Missing host.name metadata',
+			);
+			expect(iconWrapper?.getAttribute('tabindex')).toBe('0');
+			// Tooltip with "Learn how to configure →" link is shown on hover/focus
+		});
+
+		it('should render placeholder and icon when hostName is whitespace only (case C)', () => {
+			const { container } = render(<HostnameCell hostName="   " />);
+			expect(screen.getByText('-')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-warning-icon')).toBeTruthy();
+		});
+
+		it('should render placeholder and icon when hostName is undefined (case D)', () => {
+			const { container } = render(<HostnameCell hostName={undefined} />);
+			expect(screen.getByText('-')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-warning-icon')).toBeTruthy();
+		});
 	});
 
 	describe('GetHostsQuickFiltersConfig', () => {

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, TabsProps, Tag, Tooltip } from 'antd';
+import { Progress, TabsProps, Tag, Tooltip, Typography } from 'antd';
 import { ColumnType } from 'antd/es/table';
 import {
 	HostData,
@@ -14,6 +14,7 @@ import {
 } from 'components/QuickFilters/types';
 import TabLabel from 'components/TabLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { TriangleAlert } from 'lucide-react';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -24,6 +25,7 @@ import HostsList from './HostsList';
 import './InfraMonitoring.styles.scss';
 
 export interface HostRowData {
+	key?: string;
 	hostName: string;
 	cpu: React.ReactNode;
 	memory: React.ReactNode;
@@ -32,6 +34,59 @@ export interface HostRowData {
 	active: React.ReactNode;
 }
 
+const HOSTNAME_DOCS_URL =
+	'https://signoz.io/docs/logs-management/guides/set-resource-attributes-for-logs/';
+
+export function HostnameCell({
+	hostName,
+}: {
+	hostName?: string | null;
+}): React.ReactElement {
+	const isEmpty = !hostName || !hostName.trim();
+	if (!isEmpty) {
+		return <div className="hostname-column-value">{hostName}</div>;
+	}
+	return (
+		<div className="hostname-cell-missing">
+			<Typography.Text type="secondary" className="hostname-cell-placeholder">
+				-
+			</Typography.Text>
+			<Tooltip
+				title={
+					<div>
+						Missing host.name metadata.
+						<br />
+						<a
+							href={HOSTNAME_DOCS_URL}
+							target="_blank"
+							rel="noopener noreferrer"
+							onClick={(e): void => e.stopPropagation()}
+						>
+							Learn how to configure →
+						</a>
+					</div>
+				}
+				trigger={['hover', 'focus']}
+			>
+				<span
+					className="hostname-cell-warning-icon"
+					tabIndex={0}
+					role="img"
+					aria-label="Missing host.name metadata"
+					onClick={(e): void => e.stopPropagation()}
+					onKeyDown={(e): void => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.stopPropagation();
+						}
+					}}
+				>
+					<TriangleAlert size={14} color={Color.BG_CHERRY_500} />
+				</span>
+			</Tooltip>
+		</div>
+	);
+}
+
 export interface HostsListTableProps {
 	isLoading: boolean;
 	isError: boolean;
@@ -75,8 +130,8 @@ export const getHostsListColumns = (): ColumnType<HostRowData>[] => [
 		dataIndex: 'hostName',
 		key: 'hostName',
 		width: 250,
-		render: (value: string): React.ReactNode => (
-			<div className="hostname-column-value">{value}</div>
+		render: (value: string | undefined): React.ReactNode => (
+			<HostnameCell hostName={value ?? ''} />
 		),
 	},
 	{

frontend/src/container/PanelWrapper/constants.ts

@@ -1,6 +1,5 @@
 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';
@@ -9,7 +8,7 @@ import UplotPanelWrapper from './UplotPanelWrapper';
 import ValuePanelWrapper from './ValuePanelWrapper';
 
 export const PanelTypeVsPanelWrapper = {
-	[PANEL_TYPES.TIME_SERIES]: TimeSeriesPanel,
+	[PANEL_TYPES.TIME_SERIES]: UplotPanelWrapper,
 	[PANEL_TYPES.TABLE]: TablePanelWrapper,
 	[PANEL_TYPES.LIST]: ListPanelWrapper,
 	[PANEL_TYPES.VALUE]: ValuePanelWrapper,

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

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

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

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

frontend/src/lib/uPlotV2/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,6 +114,81 @@ 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
 	 */
@@ -127,7 +202,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 
 		// Y-axis needs dynamic sizing based on text width
 		if (scaleKey === 'y') {
-			return buildYAxisSizeCalculator(this.props.gap ?? 5);
+			return this.buildYAxisSizeCalculator();
 		}
 
 		return undefined;

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

@@ -15,33 +15,7 @@ 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,
@@ -224,6 +198,8 @@ interface PathBuilders {
 	[key: string]: Series.PathBuilder;
 }
 
+let builders: PathBuilders | null = null;
+
 /**
  * Get path builder based on draw style and interpolation
  */
@@ -231,8 +207,23 @@ function getPathBuilder(
 	style: DrawStyle,
 	lineInterpolation?: LineInterpolation,
 ): Series.PathBuilder {
+	const pathBuilders = uPlot.paths;
+
 	if (!builders) {
-		throw new Error('Required uPlot path builders are not available');
+		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 }),
+		};
 	}
 
 	if (style === DrawStyle.Line) {

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

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

@@ -1,340 +0,0 @@
-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', () => {
-		const visibilityMap = new Map<string, boolean>([
-			['Requests', true],
-			['Errors', false],
-		]);
-
-		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue(
-			visibilityMap,
-		);
-
-		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

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

@@ -1,295 +0,0 @@
-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/context/__tests__/PlotContext.test.tsx

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

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

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

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

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

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

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

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