Merge branch 'main' into fix/tooltip-height

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

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
 import HistogramTooltip from 'lib/uPlotV2/components/Tooltip/HistogramTooltip';
-import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
 import {
 	HistogramTooltipProps,
 	TooltipRenderArgs,
@@ -22,21 +21,11 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 			if (customRenderTooltip) {
 				return customRenderTooltip(props);
 			}
-			const content = buildTooltipContent({
-				data: props.uPlotInstance.data,
-				series: props.uPlotInstance.series,
-				dataIndexes: props.dataIndexes,
-				activeSeriesIndex: props.seriesIndex,
-				uPlotInstance: props.uPlotInstance,
-				yAxisUnit: rest.yAxisUnit ?? '',
-				decimalPrecision: rest.decimalPrecision,
-			});
 			const tooltipProps: HistogramTooltipProps = {
 				...props,
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
-				content,
 			};
 			return <HistogramTooltip {...tooltipProps} />;
 		},

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

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
 import TimeSeriesTooltip from 'lib/uPlotV2/components/Tooltip/TimeSeriesTooltip';
-import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
 import {
 	TimeSeriesTooltipProps,
 	TooltipRenderArgs,
@@ -17,21 +16,11 @@ export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
 			if (customRenderTooltip) {
 				return customRenderTooltip(props);
 			}
-			const content = buildTooltipContent({
-				data: props.uPlotInstance.data,
-				series: props.uPlotInstance.series,
-				dataIndexes: props.dataIndexes,
-				activeSeriesIndex: props.seriesIndex,
-				uPlotInstance: props.uPlotInstance,
-				yAxisUnit: rest.yAxisUnit ?? '',
-				decimalPrecision: rest.decimalPrecision,
-			});
 			const tooltipProps: TimeSeriesTooltipProps = {
 				...props,
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
-				content,
 			};
 			return <TimeSeriesTooltip {...tooltipProps} />;
 		},

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -11,6 +11,7 @@ import './Tooltip.styles.scss';
 
 const TOOLTIP_LIST_MAX_HEIGHT = 330;
 const TOOLTIP_ITEM_HEIGHT = 38;
+const TOOLTIP_LIST_PADDING = 10;
 
 export default function Tooltip({
 	uPlotInstance,
@@ -19,7 +20,7 @@ export default function Tooltip({
 	showTooltipHeader = true,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-
+	const [listHeight, setListHeight] = useState(0);
 	const tooltipContent = content ?? [];
 
 	const headerTitle = useMemo(() => {
@@ -41,34 +42,45 @@ export default function Tooltip({
 		showTooltipHeader,
 	]);
 
+	const virtuosoHeight = useMemo(() => {
+		return listHeight > 0
+			? Math.min(listHeight + TOOLTIP_LIST_PADDING, TOOLTIP_LIST_MAX_HEIGHT)
+			: Math.min(
+					tooltipContent.length * TOOLTIP_ITEM_HEIGHT,
+					TOOLTIP_LIST_MAX_HEIGHT,
+			  );
+	}, [listHeight, tooltipContent.length]);
+
 	return (
 		<div
 			className={cx(
 				'uplot-tooltip-container',
 				isDarkMode ? 'darkMode' : 'lightMode',
 			)}
+			data-testid="uplot-tooltip-container"
 		>
 			{showTooltipHeader && (
-				<div className="uplot-tooltip-header">
+				<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
 					<span>{headerTitle}</span>
 				</div>
 			)}
 			<div
 				style={{
-					height: Math.min(
-						tooltipContent.length * TOOLTIP_ITEM_HEIGHT,
-						TOOLTIP_LIST_MAX_HEIGHT,
-					),
-					minHeight: 0,
+					maxHeight: TOOLTIP_LIST_MAX_HEIGHT,
 				}}
+				data-testid="uplot-tooltip-list"
 			>
 				{tooltipContent.length > 0 ? (
 					<Virtuoso
 						className="uplot-tooltip-list"
 						data={tooltipContent}
-						defaultItemHeight={TOOLTIP_ITEM_HEIGHT}
+						style={{
+							height: virtuosoHeight,
+							width: '100%',
+						}}
+						totalListHeightChanged={setListHeight}
 						itemContent={(_, item): JSX.Element => (
-							<div className="uplot-tooltip-item">
+							<div className="uplot-tooltip-item" data-testid="uplot-tooltip-item">
 								<div
 									className="uplot-tooltip-item-marker"
 									style={{ borderColor: item.color }}

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

@@ -0,0 +1,218 @@
+import React from 'react';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import dayjs from 'dayjs';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { render, RenderResult, screen } from 'tests/test-utils';
+import uPlot from 'uplot';
+
+import { TooltipContentItem } from '../../types';
+import Tooltip from '../Tooltip';
+
+type MockVirtuosoProps = {
+	data: TooltipContentItem[];
+	itemContent: (index: number, item: TooltipContentItem) => React.ReactNode;
+	className?: string;
+	style?: React.CSSProperties;
+	totalListHeightChanged?: (height: number) => void;
+};
+
+let mockTotalListHeight = 200;
+
+jest.mock('react-virtuoso', () => {
+	const actual = jest.requireActual('react-virtuoso');
+
+	return {
+		...actual,
+		Virtuoso: ({
+			data,
+			itemContent,
+			className,
+			style,
+			totalListHeightChanged,
+		}: MockVirtuosoProps): JSX.Element => {
+			if (totalListHeightChanged) {
+				// Simulate Virtuoso reporting total list height
+				totalListHeightChanged(mockTotalListHeight);
+			}
+
+			return (
+				<div className={className} style={style}>
+					{data.map((item, index) => (
+						<div key={item.label ?? index.toString()}>{itemContent(index, item)}</div>
+					))}
+				</div>
+			);
+		},
+	};
+});
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: jest.fn(),
+}));
+
+const mockUseIsDarkMode = useIsDarkMode as jest.MockedFunction<
+	typeof useIsDarkMode
+>;
+
+type TooltipTestProps = React.ComponentProps<typeof Tooltip>;
+
+function createTooltipContent(
+	overrides: Partial<TooltipContentItem> = {},
+): TooltipContentItem {
+	return {
+		label: 'Series A',
+		value: 10,
+		tooltipValue: '10',
+		color: '#ff0000',
+		isActive: true,
+		...overrides,
+	};
+}
+
+function createUPlotInstance(cursorIdx: number | null): uPlot {
+	return ({
+		data: [[1], []],
+		cursor: { idx: cursorIdx },
+		// The rest of the uPlot fields are not used by Tooltip
+	} as unknown) as uPlot;
+}
+
+function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
+	const defaultProps: TooltipTestProps = {
+		uPlotInstance: createUPlotInstance(null),
+		timezone: 'UTC',
+		content: [],
+		showTooltipHeader: true,
+		// TooltipRenderArgs (not used directly in component but required by type)
+		dataIndexes: [],
+		seriesIndex: null,
+		isPinned: false,
+		dismiss: jest.fn(),
+		viaSync: false,
+	} as TooltipTestProps;
+
+	return render(
+		<VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 38 }}>
+			<Tooltip {...defaultProps} {...props} />
+		</VirtuosoMockContext.Provider>,
+	);
+}
+
+describe('Tooltip', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUseIsDarkMode.mockReturnValue(false);
+		mockTotalListHeight = 200;
+	});
+
+	it('renders header title when showTooltipHeader is true and cursor index is present', () => {
+		const uPlotInstance = createUPlotInstance(0);
+
+		renderTooltip({ uPlotInstance });
+
+		const expectedTitle = dayjs(1 * 1000)
+			.tz('UTC')
+			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
+
+		expect(screen.getByText(expectedTitle)).toBeInTheDocument();
+	});
+
+	it('does not render header when showTooltipHeader is false', () => {
+		const uPlotInstance = createUPlotInstance(0);
+
+		renderTooltip({ uPlotInstance, showTooltipHeader: false });
+
+		const unexpectedTitle = dayjs(1 * 1000)
+			.tz('UTC')
+			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
+
+		expect(screen.queryByText(unexpectedTitle)).not.toBeInTheDocument();
+	});
+
+	it('renders lightMode class when dark mode is disabled', () => {
+		const uPlotInstance = createUPlotInstance(null);
+		mockUseIsDarkMode.mockReturnValue(false);
+
+		renderTooltip({ uPlotInstance });
+
+		const container = document.querySelector(
+			'.uplot-tooltip-container',
+		) as HTMLElement;
+
+		expect(container).toHaveClass('lightMode');
+		expect(container).not.toHaveClass('darkMode');
+	});
+
+	it('renders darkMode class when dark mode is enabled', () => {
+		const uPlotInstance = createUPlotInstance(null);
+		mockUseIsDarkMode.mockReturnValue(true);
+
+		renderTooltip({ uPlotInstance });
+
+		const container = document.querySelector(
+			'.uplot-tooltip-container',
+		) as HTMLElement;
+
+		expect(container).toHaveClass('darkMode');
+		expect(container).not.toHaveClass('lightMode');
+	});
+
+	it('renders tooltip items when content is provided', () => {
+		const uPlotInstance = createUPlotInstance(null);
+		const content = [createTooltipContent()];
+
+		renderTooltip({ uPlotInstance, content });
+
+		const list = document.querySelector(
+			'.uplot-tooltip-list',
+		) as HTMLElement | null;
+
+		expect(list).not.toBeNull();
+
+		const marker = document.querySelector(
+			'.uplot-tooltip-item-marker',
+		) as HTMLElement;
+		const itemContent = document.querySelector(
+			'.uplot-tooltip-item-content',
+		) as HTMLElement;
+
+		expect(marker).toHaveStyle({ borderColor: '#ff0000' });
+		expect(itemContent).toHaveStyle({ color: '#ff0000', fontWeight: '700' });
+		expect(itemContent).toHaveTextContent('Series A: 10');
+	});
+
+	it('does not render tooltip list when content is empty', () => {
+		const uPlotInstance = createUPlotInstance(null);
+
+		renderTooltip({ uPlotInstance, content: [] });
+
+		const list = document.querySelector(
+			'.uplot-tooltip-list',
+		) as HTMLElement | null;
+
+		expect(list).toBeNull();
+	});
+
+	it('sets tooltip list height based on content length, height returned by Virtuoso', () => {
+		const uPlotInstance = createUPlotInstance(null);
+		const content = [createTooltipContent(), createTooltipContent()];
+
+		renderTooltip({ uPlotInstance, content });
+
+		const list = document.querySelector('.uplot-tooltip-list') as HTMLElement;
+		expect(list).toHaveStyle({ height: '210px' });
+	});
+
+	it('sets tooltip list height based on content length when Virtuoso reports 0 height', () => {
+		const uPlotInstance = createUPlotInstance(null);
+		const content = [createTooltipContent(), createTooltipContent()];
+		mockTotalListHeight = 0;
+
+		renderTooltip({ uPlotInstance, content });
+
+		const list = document.querySelector('.uplot-tooltip-list') as HTMLElement;
+		// Falls back to content length: 2 items * 38px = 76px
+		expect(list).toHaveStyle({ height: '76px' });
+	});
+});

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

@@ -0,0 +1,277 @@
+import { PrecisionOption } from 'components/Graph/types';
+import { getToolTipValue } from 'components/Graph/yAxisConfig';
+import uPlot, { AlignedData, Series } from 'uplot';
+
+import { TooltipContentItem } from '../../types';
+import {
+	buildTooltipContent,
+	FALLBACK_SERIES_COLOR,
+	getTooltipBaseValue,
+	resolveSeriesColor,
+} from '../utils';
+
+jest.mock('components/Graph/yAxisConfig', () => ({
+	getToolTipValue: jest.fn(),
+}));
+
+const mockGetToolTipValue = getToolTipValue as jest.MockedFunction<
+	typeof getToolTipValue
+>;
+
+function createUPlotInstance(): uPlot {
+	return ({
+		data: [],
+		cursor: { idx: 0 },
+	} as unknown) as uPlot;
+}
+
+describe('Tooltip utils', () => {
+	describe('resolveSeriesColor', () => {
+		it('returns string stroke when provided', () => {
+			const u = createUPlotInstance();
+			const stroke: Series.Stroke = '#ff0000';
+
+			const color = resolveSeriesColor(stroke, u, 1);
+
+			expect(color).toBe('#ff0000');
+		});
+
+		it('returns result of stroke function when provided', () => {
+			const u = createUPlotInstance();
+			const strokeFn: Series.Stroke = (uInstance, seriesIdx): string =>
+				`color-${seriesIdx}-${uInstance.cursor.idx}`;
+
+			const color = resolveSeriesColor(strokeFn, u, 2);
+
+			expect(color).toBe('color-2-0');
+		});
+
+		it('returns fallback color when stroke is not provided', () => {
+			const u = createUPlotInstance();
+
+			const color = resolveSeriesColor(undefined, u, 1);
+
+			expect(color).toBe(FALLBACK_SERIES_COLOR);
+		});
+	});
+
+	describe('getTooltipBaseValue', () => {
+		it('returns value from aligned data for non-stacked charts', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[10, 20],
+			];
+
+			const result = getTooltipBaseValue({
+				data,
+				index: 1,
+				dataIndex: 1,
+				isStackedBarChart: false,
+			});
+
+			expect(result).toBe(20);
+		});
+
+		it('returns null when value is missing', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[10, null],
+			];
+
+			const result = getTooltipBaseValue({
+				data,
+				index: 1,
+				dataIndex: 1,
+			});
+
+			expect(result).toBeNull();
+		});
+
+		it('subtracts next visible stacked value for stacked bar charts', () => {
+			// data[1] and data[2] contain stacked values at dataIndex 1
+			const data: AlignedData = [
+				[0, 1],
+				[30, 60], // series 1 stacked
+				[10, 20], // series 2 stacked
+			];
+
+			const series: Series[] = [
+				{ label: 'x', show: true } as Series,
+				{ label: 'A', show: true } as Series,
+				{ label: 'B', show: true } as Series,
+			];
+
+			const result = getTooltipBaseValue({
+				data,
+				index: 1,
+				dataIndex: 1,
+				isStackedBarChart: true,
+				series,
+			});
+
+			// 60 (stacked at series 1) - 20 (next visible stacked) = 40
+			expect(result).toBe(40);
+		});
+
+		it('skips hidden series when computing base value for stacked charts', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[30, 60], // series 1 stacked
+				[10, 20], // series 2 stacked but hidden
+				[5, 10], // series 3 stacked and visible
+			];
+
+			const series: Series[] = [
+				{ label: 'x', show: true } as Series,
+				{ label: 'A', show: true } as Series,
+				{ label: 'B', show: false } as Series,
+				{ label: 'C', show: true } as Series,
+			];
+
+			const result = getTooltipBaseValue({
+				data,
+				index: 1,
+				dataIndex: 1,
+				isStackedBarChart: true,
+				series,
+			});
+
+			// 60 (stacked at series 1) - 10 (next *visible* stacked, series 3) = 50
+			expect(result).toBe(50);
+		});
+
+		it('does not subtract when there is no next visible series', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[10, 20], // series 1
+				[5, (null as unknown) as number], // series 2 missing
+			];
+
+			const series: Series[] = [
+				{ label: 'x', show: true } as Series,
+				{ label: 'A', show: true } as Series,
+				{ label: 'B', show: false } as Series,
+			];
+
+			const result = getTooltipBaseValue({
+				data,
+				index: 1,
+				dataIndex: 1,
+				isStackedBarChart: true,
+				series,
+			});
+
+			expect(result).toBe(20);
+		});
+	});
+
+	describe('buildTooltipContent', () => {
+		const yAxisUnit = 'ms';
+		const decimalPrecision: PrecisionOption = 2;
+
+		beforeEach(() => {
+			mockGetToolTipValue.mockReset();
+			mockGetToolTipValue.mockImplementation(
+				(value: string | number): string => `formatted-${value}`,
+			);
+		});
+
+		function createSeriesConfig(): Series[] {
+			return [
+				{ label: 'x', show: true } as Series,
+				{ label: 'A', show: true, stroke: '#ff0000' } as Series,
+				{
+					label: 'B',
+					show: true,
+					stroke: (_u: uPlot, idx: number): string => `color-${idx}`,
+				} as Series,
+				{ label: 'C', show: false, stroke: '#00ff00' } as Series,
+			];
+		}
+
+		it('builds tooltip content with active series first', () => {
+			const data: AlignedData = [[0], [10], [20], [30]];
+			const series = createSeriesConfig();
+			const dataIndexes = [null, 0, 0, 0];
+			const u = createUPlotInstance();
+
+			const result = buildTooltipContent({
+				data,
+				series,
+				dataIndexes,
+				activeSeriesIndex: 2,
+				uPlotInstance: u,
+				yAxisUnit,
+				decimalPrecision,
+			});
+
+			expect(result).toHaveLength(2);
+			// Active (series index 2) should come first
+			expect(result[0]).toMatchObject<Partial<TooltipContentItem>>({
+				label: 'B',
+				value: 20,
+				tooltipValue: 'formatted-20',
+				color: 'color-2',
+				isActive: true,
+			});
+			expect(result[1]).toMatchObject<Partial<TooltipContentItem>>({
+				label: 'A',
+				value: 10,
+				tooltipValue: 'formatted-10',
+				color: '#ff0000',
+				isActive: false,
+			});
+		});
+
+		it('skips series with null data index or non-finite values', () => {
+			const data: AlignedData = [[0], [42], [Infinity]];
+			const series: Series[] = [
+				{ label: 'x', show: true } as Series,
+				{ label: 'A', show: true, stroke: '#ff0000' } as Series,
+				{ label: 'B', show: true, stroke: '#00ff00' } as Series,
+			];
+			const dataIndexes = [null, 0, null];
+			const u = createUPlotInstance();
+
+			const result = buildTooltipContent({
+				data,
+				series,
+				dataIndexes,
+				activeSeriesIndex: 1,
+				uPlotInstance: u,
+				yAxisUnit,
+				decimalPrecision,
+			});
+
+			// Only the finite, non-null value from series A should be included
+			expect(result).toHaveLength(1);
+			expect(result[0].label).toBe('A');
+		});
+
+		it('uses stacked base values when building content for stacked bar charts', () => {
+			const data: AlignedData = [[0], [60], [30]];
+			const series: Series[] = [
+				{ label: 'x', show: true } as Series,
+				{ label: 'A', show: true, stroke: '#ff0000' } as Series,
+				{ label: 'B', show: true, stroke: '#00ff00' } as Series,
+			];
+			const dataIndexes = [null, 0, 0];
+			const u = createUPlotInstance();
+
+			const result = buildTooltipContent({
+				data,
+				series,
+				dataIndexes,
+				activeSeriesIndex: 1,
+				uPlotInstance: u,
+				yAxisUnit,
+				decimalPrecision,
+				isStackedBarChart: true,
+			});
+
+			// baseValue for series 1 at index 0 should be 60 - 30 (next visible) = 30
+			expect(result[0].value).toBe(30);
+			expect(result[1].value).toBe(30);
+		});
+	});
+});

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

@@ -4,7 +4,7 @@ import uPlot, { AlignedData, Series } from 'uplot';
 
 import { TooltipContentItem } from '../types';
 
-const FALLBACK_SERIES_COLOR = '#000000';
+export const FALLBACK_SERIES_COLOR = '#000000';
 
 export function resolveSeriesColor(
 	stroke: Series.Stroke | undefined,