Merge branch 'main' into test/tooltip-plugin

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

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

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

@@ -1,62 +0,0 @@
-import { isInvalidPlotValue, normalizePlotValue } from '../dataUtils';
-
-describe('dataUtils', () => {
-	describe('isInvalidPlotValue', () => {
-		it('treats null and undefined as invalid', () => {
-			expect(isInvalidPlotValue(null)).toBe(true);
-			expect(isInvalidPlotValue(undefined)).toBe(true);
-		});
-
-		it('treats finite numbers as valid and non-finite as invalid', () => {
-			expect(isInvalidPlotValue(0)).toBe(false);
-			expect(isInvalidPlotValue(123.45)).toBe(false);
-			expect(isInvalidPlotValue(Number.NaN)).toBe(true);
-			expect(isInvalidPlotValue(Infinity)).toBe(true);
-			expect(isInvalidPlotValue(-Infinity)).toBe(true);
-		});
-
-		it('treats well-formed numeric strings as valid', () => {
-			expect(isInvalidPlotValue('0')).toBe(false);
-			expect(isInvalidPlotValue('123.45')).toBe(false);
-			expect(isInvalidPlotValue('-1')).toBe(false);
-		});
-
-		it('treats Infinity/NaN string variants and non-numeric strings as invalid', () => {
-			expect(isInvalidPlotValue('+Inf')).toBe(true);
-			expect(isInvalidPlotValue('-Inf')).toBe(true);
-			expect(isInvalidPlotValue('Infinity')).toBe(true);
-			expect(isInvalidPlotValue('-Infinity')).toBe(true);
-			expect(isInvalidPlotValue('NaN')).toBe(true);
-			expect(isInvalidPlotValue('not-a-number')).toBe(true);
-		});
-
-		it('treats non-number, non-string values as valid (left to caller)', () => {
-			expect(isInvalidPlotValue({})).toBe(false);
-			expect(isInvalidPlotValue([])).toBe(false);
-			expect(isInvalidPlotValue(true)).toBe(false);
-		});
-	});
-
-	describe('normalizePlotValue', () => {
-		it('returns null for invalid values detected by isInvalidPlotValue', () => {
-			expect(normalizePlotValue(null)).toBeNull();
-			expect(normalizePlotValue(undefined)).toBeNull();
-			expect(normalizePlotValue(NaN)).toBeNull();
-			expect(normalizePlotValue(Infinity)).toBeNull();
-			expect(normalizePlotValue('-Infinity')).toBeNull();
-			expect(normalizePlotValue('not-a-number')).toBeNull();
-		});
-
-		it('parses valid numeric strings into numbers', () => {
-			expect(normalizePlotValue('0')).toBe(0);
-			expect(normalizePlotValue('123.45')).toBe(123.45);
-			expect(normalizePlotValue('-1')).toBe(-1);
-		});
-
-		it('passes through valid numbers unchanged', () => {
-			expect(normalizePlotValue(0)).toBe(0);
-			expect(normalizePlotValue(123)).toBe(123);
-			expect(normalizePlotValue(42.5)).toBe(42.5);
-		});
-	});
-});

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

@@ -1,201 +0,0 @@
-import uPlot from 'uplot';
-
-import { DistributionType } from '../../config/types';
-import * as scaleUtils from '../scale';
-
-describe('scale utils', () => {
-	describe('normalizeLogScaleLimits', () => {
-		it('returns limits unchanged when distribution is not logarithmic', () => {
-			const limits = {
-				min: 1,
-				max: 100,
-				softMin: 5,
-				softMax: 50,
-			};
-
-			const result = scaleUtils.normalizeLogScaleLimits({
-				distr: DistributionType.Linear,
-				logBase: 10,
-				limits,
-			});
-
-			expect(result).toEqual(limits);
-		});
-
-		it('snaps positive limits to powers of the log base when distribution is logarithmic', () => {
-			const result = scaleUtils.normalizeLogScaleLimits({
-				distr: DistributionType.Logarithmic,
-				logBase: 10,
-				limits: {
-					min: 3,
-					max: 900,
-					softMin: 12,
-					softMax: 85,
-				},
-			});
-
-			expect(result.min).toBe(1); // 10^0
-			expect(result.max).toBe(1000); // 10^3
-			expect(result.softMin).toBe(10); // 10^1
-			expect(result.softMax).toBe(100); // 10^2
-		});
-	});
-
-	describe('getDistributionConfig', () => {
-		it('returns empty config for time scales', () => {
-			const config = scaleUtils.getDistributionConfig({
-				time: true,
-				distr: DistributionType.Linear,
-				logBase: 2,
-			});
-
-			expect(config).toEqual({});
-		});
-
-		it('returns linear distribution settings for non-time scales', () => {
-			const config = scaleUtils.getDistributionConfig({
-				time: false,
-				distr: DistributionType.Linear,
-				logBase: 2,
-			});
-
-			expect(config.distr).toBe(1);
-			expect(config.log).toBe(2);
-		});
-
-		it('returns log distribution settings for non-time scales', () => {
-			const config = scaleUtils.getDistributionConfig({
-				time: false,
-				distr: DistributionType.Logarithmic,
-				logBase: 10,
-			});
-
-			expect(config.distr).toBe(3);
-			expect(config.log).toBe(10);
-		});
-	});
-
-	describe('getRangeConfig', () => {
-		it('computes range config and fixed range flags correctly', () => {
-			const {
-				rangeConfig,
-				hardMinOnly,
-				hardMaxOnly,
-				hasFixedRange,
-			} = scaleUtils.getRangeConfig(0, 100, null, null, 0.1, 0.2);
-
-			expect(rangeConfig.min).toEqual({
-				pad: 0.1,
-				hard: 0,
-				soft: undefined,
-				mode: 3,
-			});
-			expect(rangeConfig.max).toEqual({
-				pad: 0.2,
-				hard: 100,
-				soft: undefined,
-				mode: 3,
-			});
-			expect(hardMinOnly).toBe(true);
-			expect(hardMaxOnly).toBe(true);
-			expect(hasFixedRange).toBe(true);
-		});
-	});
-
-	describe('createRangeFunction', () => {
-		it('returns [dataMin, dataMax] when no fixed range and no data', () => {
-			const params = {
-				rangeConfig: {} as uPlot.Range.Config,
-				hardMinOnly: false,
-				hardMaxOnly: false,
-				hasFixedRange: false,
-				min: null,
-				max: null,
-			};
-
-			const rangeFn = scaleUtils.createRangeFunction(params);
-
-			const u = ({
-				scales: {
-					y: {
-						distr: 1,
-						log: 10,
-					},
-				},
-			} as unknown) as uPlot;
-
-			const result = rangeFn(
-				u,
-				(null as unknown) as number,
-				(null as unknown) as number,
-				'y',
-			);
-
-			expect(result).toEqual([null, null]);
-		});
-
-		it('applies hard min/max for linear scale when only hard limits are set', () => {
-			const params = {
-				rangeConfig: {} as uPlot.Range.Config,
-				hardMinOnly: true,
-				hardMaxOnly: true,
-				hasFixedRange: true,
-				min: 0,
-				max: 100,
-			};
-
-			const rangeFn = scaleUtils.createRangeFunction(params);
-
-			// Use an undefined distr so the range function skips calling uPlot.rangeNum
-			// and we can focus on the behavior of applyHardLimits.
-			const u = ({
-				scales: {
-					y: {
-						distr: undefined,
-						log: 10,
-					},
-				},
-			} as unknown) as uPlot;
-
-			const result = rangeFn(u, 10, 20, 'y');
-
-			// After applyHardLimits, the returned range should respect configured min/max
-			expect(result).toEqual([0, 100]);
-		});
-	});
-
-	describe('adjustSoftLimitsWithThresholds', () => {
-		it('returns original soft limits when there are no thresholds', () => {
-			const result = scaleUtils.adjustSoftLimitsWithThresholds(1, 5, [], 'ms');
-
-			expect(result).toEqual({ softMin: 1, softMax: 5 });
-		});
-
-		it('expands soft limits to include threshold min/max values', () => {
-			const result = scaleUtils.adjustSoftLimitsWithThresholds(
-				3,
-				6,
-				[{ thresholdValue: 2 }, { thresholdValue: 8 }],
-				'ms',
-			);
-
-			// min should be pulled down to the smallest threshold value
-			expect(result.softMin).toBe(2);
-			// max should be pushed up to the largest threshold value
-			expect(result.softMax).toBe(8);
-		});
-	});
-
-	describe('getFallbackMinMaxTimeStamp', () => {
-		it('returns a 24-hour window ending at approximately now', () => {
-			const { fallbackMin, fallbackMax } = scaleUtils.getFallbackMinMaxTimeStamp();
-
-			// Difference should be exactly one day in seconds
-			expect(fallbackMax - fallbackMin).toBe(86400);
-
-			// Both should be reasonable timestamps (not NaN or negative)
-			expect(fallbackMin).toBeGreaterThan(0);
-			expect(fallbackMax).toBeGreaterThan(fallbackMin);
-		});
-	});
-});

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

@@ -1,36 +0,0 @@
-import { findMinMaxThresholdValues } from '../threshold';
-
-describe('findMinMaxThresholdValues', () => {
-	it('returns [null, null] when thresholds array is empty or missing', () => {
-		expect(findMinMaxThresholdValues([], 'ms')).toEqual([null, null]);
-		// @ts-expect-error intentional undefined to cover defensive branch
-		expect(findMinMaxThresholdValues(undefined, 'ms')).toEqual([null, null]);
-	});
-
-	it('returns min and max from thresholdValue when units are not provided', () => {
-		const thresholds = [
-			{ thresholdValue: 5 },
-			{ thresholdValue: 1 },
-			{ thresholdValue: 10 },
-		];
-
-		const [min, max] = findMinMaxThresholdValues(thresholds);
-
-		expect(min).toBe(1);
-		expect(max).toBe(10);
-	});
-
-	it('ignores thresholds without a value or with unconvertible units', () => {
-		const thresholds = [
-			// Should be ignored: convertValue returns null for unknown unit
-			{ thresholdValue: 100, thresholdUnit: 'unknown-unit' },
-			// Should be used
-			{ thresholdValue: 4 },
-		];
-
-		const [min, max] = findMinMaxThresholdValues(thresholds, 'ms');
-
-		expect(min).toBe(4);
-		expect(max).toBe(4);
-	});
-});