chore: fixed plotcontext test

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

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

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

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

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

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

frontend/src/lib/uPlotV2/context/__tests__/PlotContext.test.tsx

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

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

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

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

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