chore: minor fix

* fix(host-list): not showing refresh status & refresh interval queries overlaps

* fix(hosts-list): standardize the name of the store

* fix(hosts-list): use nano second multiplier

* fix(host-list): not showing a good error message

* fix(host-list): ensure states do not conflict with each other

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -13,7 +13,9 @@ export interface HostListPayload {
 	orderBy?: {
 		columnName: string;
 		order: 'asc' | 'desc';
-	};
+	} | null;
+	start?: number;
+	end?: number;
 }
 
 export interface TimeSeriesValue {

frontend/src/components/ErrorModal/components/ErrorContent.tsx

@@ -10,7 +10,12 @@ import APIError from 'types/api/error';
 import './ErrorContent.styles.scss';
 
 interface ErrorContentProps {
-	error: APIError;
+	error:
+		| APIError
+		| {
+				code: number;
+				message: string;
+		  };
 	icon?: ReactNode;
 }
 
@@ -20,7 +25,15 @@ function ErrorContent({ error, icon }: ErrorContentProps): JSX.Element {
 		errors: errorMessages,
 		code: errorCode,
 		message: errorMessage,
-	} = error?.error?.error || {};
+	} =
+		error && 'error' in error
+			? error?.error?.error || {}
+			: {
+					url: undefined,
+					errors: [],
+					code: error.code || 500,
+					message: error.message || 'Something went wrong',
+			  };
 	return (
 		<section className="error-content">
 			{/* Summary Header */}

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

@@ -13,7 +13,7 @@ import uPlot from 'uplot';
 
 import { ChartProps } from '../types';
 
-const TOOLTIP_WIDTH_PADDING = 60;
+const TOOLTIP_WIDTH_PADDING = 120;
 const TOOLTIP_MIN_WIDTH = 200;
 
 export default function ChartWrapper({

frontend/src/container/InfraMonitoringHosts/HostsList.tsx

@@ -1,41 +1,52 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
+import { useQuery } from 'react-query';
 import { VerticalAlignTopOutlined } from '@ant-design/icons';
 import { Button, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { HostListPayload } from 'api/infraMonitoring/getHostLists';
+import {
+	getHostLists,
+	HostListPayload,
+	HostListResponse,
+} from 'api/infraMonitoring/getHostLists';
 import HostMetricDetail from 'components/HostMetricsDetail';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
+import { FeatureKeys } from 'constants/features';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import {
 	useInfraMonitoringCurrentPage,
 	useInfraMonitoringFiltersHosts,
 	useInfraMonitoringOrderByHosts,
 } from 'container/InfraMonitoringK8s/hooks';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
-import { useGetHostList } from 'hooks/infraMonitoring/useGetHostList';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { Filter } from 'lucide-react';
 import { parseAsString, useQueryState } from 'nuqs';
-import { AppState } from 'store/reducers';
-import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
-import { GlobalReducer } from 'types/reducer/globalTime';
+import { useAppContext } from 'providers/App/App';
+import { useGlobalTimeStore } from 'store/globalTime';
+import {
+	getAutoRefreshQueryKey,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime/utils';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	IBuilderQuery,
+	Query,
+	TagFilter,
+} from 'types/api/queryBuilder/queryBuilderData';
 
-import { FeatureKeys } from '../../constants/features';
-import { useAppContext } from '../../providers/App/App';
 import HostsListControls from './HostsListControls';
 import HostsListTable from './HostsListTable';
 import { getHostListsQuery, GetHostsQuickFiltersConfig } from './utils';
 
 import './InfraMonitoring.styles.scss';
-function HostsList(): JSX.Element {
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
 
+const defaultFilters: TagFilter = { items: [], op: 'and' };
+const baseQuery = getHostListsQuery();
+
+function HostsList(): JSX.Element {
 	const [currentPage, setCurrentPage] = useInfraMonitoringCurrentPage();
 	const [filters, setFilters] = useInfraMonitoringFiltersHosts();
 	const [orderBy, setOrderBy] = useInfraMonitoringOrderByHosts();
@@ -62,57 +73,49 @@ function HostsList(): JSX.Element {
 
 	const { pageSize, setPageSize } = usePageSize('hosts');
 
-	const query = useMemo(() => {
-		const baseQuery = getHostListsQuery();
-		return {
-			...baseQuery,
-			limit: pageSize,
-			offset: (currentPage - 1) * pageSize,
-			filters,
-			start: Math.floor(minTime / 1000000),
-			end: Math.floor(maxTime / 1000000),
-			orderBy,
-		};
-	}, [pageSize, currentPage, filters, minTime, maxTime, orderBy]);
+	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
+	const isRefreshEnabled = useGlobalTimeStore((s) => s.isRefreshEnabled);
+	const refreshInterval = useGlobalTimeStore((s) => s.refreshInterval);
+	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
 
-	const queryKey = useMemo(() => {
-		if (selectedHostName) {
-			return [
-				'hostList',
+	const queryKey = useMemo(
+		() =>
+			getAutoRefreshQueryKey(
+				selectedTime,
+				REACT_QUERY_KEY.GET_HOST_LIST,
 				String(pageSize),
 				String(currentPage),
 				JSON.stringify(filters),
 				JSON.stringify(orderBy),
-			];
-		}
-		return [
-			'hostList',
-			String(pageSize),
-			String(currentPage),
-			JSON.stringify(filters),
-			JSON.stringify(orderBy),
-			String(minTime),
-			String(maxTime),
-		];
-	}, [
-		pageSize,
-		currentPage,
-		filters,
-		orderBy,
-		selectedHostName,
-		minTime,
-		maxTime,
-	]);
-
-	const { data, isFetching, isLoading, isError } = useGetHostList(
-		query as HostListPayload,
-		{
-			queryKey,
-			enabled: !!query,
-			keepPreviousData: true,
-		},
+			),
+		[pageSize, currentPage, filters, orderBy, selectedTime],
 	);
 
+	const { data, isFetching, isLoading, isError } = useQuery<
+		SuccessResponse<HostListResponse> | ErrorResponse,
+		Error
+	>({
+		queryKey,
+		queryFn: ({ signal }) => {
+			const { minTime, maxTime } = getMinMaxTime();
+
+			const payload: HostListPayload = {
+				...baseQuery,
+				limit: pageSize,
+				offset: (currentPage - 1) * pageSize,
+				filters: filters ?? defaultFilters,
+				orderBy,
+				start: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
+				end: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
+			};
+
+			return getHostLists(payload, signal);
+		},
+		enabled: true,
+		keepPreviousData: true,
+		refetchInterval: isRefreshEnabled ? refreshInterval : false,
+	});
+
 	const hostMetricsData = useMemo(() => data?.payload?.data?.records || [], [
 		data,
 	]);
@@ -227,7 +230,7 @@ function HostsList(): JSX.Element {
 						isError={isError}
 						tableData={data}
 						hostMetricsData={hostMetricsData}
-						filters={filters || { items: [], op: 'AND' }}
+						filters={filters ?? defaultFilters}
 						currentPage={currentPage}
 						setCurrentPage={setCurrentPage}
 						onHostClick={handleHostClick}

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -10,6 +10,7 @@ import {
 } from 'antd';
 import type { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
+import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import { InfraMonitoringEvents } from 'constants/events';
 import { isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
@@ -26,9 +27,40 @@ import {
 function EmptyOrLoadingView(
 	viewState: EmptyOrLoadingViewProps,
 ): React.ReactNode {
-	const { isError, errorMessage } = viewState;
-	if (isError) {
-		return <Typography>{errorMessage || 'Something went wrong'}</Typography>;
+	if (viewState.showTableLoadingState) {
+		return (
+			<div className="hosts-list-loading-state">
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+			</div>
+		);
+	}
+	const { isError, data } = viewState;
+	if (isError || data?.error || (data?.statusCode || 0) >= 300) {
+		return (
+			<ErrorContent
+				error={{
+					code: data?.statusCode || 500,
+					message: data?.error || 'Something went wrong',
+				}}
+			/>
+		);
 	}
 	if (viewState.showHostsEmptyState) {
 		return (
@@ -76,30 +108,6 @@ function EmptyOrLoadingView(
 			</div>
 		);
 	}
-	if (viewState.showTableLoadingState) {
-		return (
-			<div className="hosts-list-loading-state">
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-			</div>
-		);
-	}
 	return null;
 }
 
@@ -190,7 +198,8 @@ export default function HostsListTable({
 		!isLoading &&
 		formattedHostMetricsData.length === 0 &&
 		(!sentAnyHostMetricsData || isSendingIncorrectK8SAgentMetrics) &&
-		!filters.items.length;
+		!filters.items.length &&
+		!endTimeBeforeRetention;
 
 	const showEndTimeBeforeRetentionMessage =
 		!isFetching &&
@@ -211,7 +220,7 @@ export default function HostsListTable({
 
 	const emptyOrLoadingView = EmptyOrLoadingView({
 		isError,
-		errorMessage: data?.error ?? '',
+		data,
 		showHostsEmptyState,
 		sentAnyHostMetricsData,
 		isSendingIncorrectK8SAgentMetrics,

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

@@ -2,8 +2,8 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
-import { render } from '@testing-library/react';
-import * as useGetHostListHooks from 'hooks/infraMonitoring/useGetHostList';
+import { render, waitFor } from '@testing-library/react';
+import * as getHostListsApi from 'api/infraMonitoring/getHostLists';
 import { withNuqsTestingAdapter } from 'nuqs/adapters/testing';
 import * as appContextHooks from 'providers/App/App';
 import * as timezoneHooks from 'providers/Timezone';
@@ -19,6 +19,10 @@ jest.mock('lib/getMinMax', () => ({
 		maxTime: 1713738000000,
 		isValidShortHandDateTimeFormat: jest.fn().mockReturnValue(true),
 	})),
+	getMinMaxForSelectedTime: jest.fn().mockReturnValue({
+		minTime: 1713734400000000000,
+		maxTime: 1713738000000000000,
+	}),
 }));
 jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
 	__esModule: true,
@@ -41,7 +45,13 @@ jest.mock('components/CustomTimePicker/CustomTimePicker', () => ({
 	),
 }));
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			retry: false,
+		},
+	},
+});
 
 jest.mock('react-redux', () => ({
 	...jest.requireActual('react-redux'),
@@ -80,27 +90,40 @@ jest.spyOn(timezoneHooks, 'useTimezone').mockReturnValue({
 		offset: 0,
 	},
 } as any);
-jest.spyOn(useGetHostListHooks, 'useGetHostList').mockReturnValue({
-	data: {
-		payload: {
-			data: {
-				records: [
-					{
-						hostName: 'test-host',
-						active: true,
-						cpu: 0.75,
-						memory: 0.65,
-						wait: 0.03,
-					},
-				],
-				isSendingK8SAgentMetrics: false,
-				sentAnyHostMetricsData: true,
-			},
+
+jest.spyOn(getHostListsApi, 'getHostLists').mockResolvedValue({
+	statusCode: 200,
+	error: null,
+	message: 'Success',
+	payload: {
+		status: 'success',
+		data: {
+			type: 'list',
+			records: [
+				{
+					hostName: 'test-host',
+					active: true,
+					os: 'linux',
+					cpu: 0.75,
+					cpuTimeSeries: { labels: {}, labelsArray: [], values: [] },
+					memory: 0.65,
+					memoryTimeSeries: { labels: {}, labelsArray: [], values: [] },
+					wait: 0.03,
+					waitTimeSeries: { labels: {}, labelsArray: [], values: [] },
+					load15: 0.5,
+					load15TimeSeries: { labels: {}, labelsArray: [], values: [] },
+				},
+			],
+			groups: null,
+			total: 1,
+			sentAnyHostMetricsData: true,
+			isSendingK8SAgentMetrics: false,
+			endTimeBeforeRetention: false,
 		},
 	},
-	isLoading: false,
-	isError: false,
-} as any);
+	params: {} as any,
+});
+
 jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
 	user: {
 		role: 'admin',
@@ -128,22 +151,11 @@ jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
 const Wrapper = withNuqsTestingAdapter({ searchParams: {} });
 
 describe('HostsList', () => {
-	it('renders hosts list table', () => {
-		const { container } = render(
-			<Wrapper>
-				<QueryClientProvider client={queryClient}>
-					<MemoryRouter>
-						<Provider store={store}>
-							<HostsList />
-						</Provider>
-					</MemoryRouter>
-				</QueryClientProvider>
-			</Wrapper>,
-		);
-		expect(container.querySelector('.hosts-list-table')).toBeInTheDocument();
+	beforeEach(() => {
+		queryClient.clear();
 	});
 
-	it('renders filters', () => {
+	it('renders hosts list table', async () => {
 		const { container } = render(
 			<Wrapper>
 				<QueryClientProvider client={queryClient}>
@@ -155,6 +167,25 @@ describe('HostsList', () => {
 				</QueryClientProvider>
 			</Wrapper>,
 		);
-		expect(container.querySelector('.filters')).toBeInTheDocument();
+		await waitFor(() => {
+			expect(container.querySelector('.hosts-list-table')).toBeInTheDocument();
+		});
+	});
+
+	it('renders filters', async () => {
+		const { container } = render(
+			<Wrapper>
+				<QueryClientProvider client={queryClient}>
+					<MemoryRouter>
+						<Provider store={store}>
+							<HostsList />
+						</Provider>
+					</MemoryRouter>
+				</QueryClientProvider>
+			</Wrapper>,
+		);
+		await waitFor(() => {
+			expect(container.querySelector('.filters')).toBeInTheDocument();
+		});
 	});
 });

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -1,8 +1,13 @@
 import { Dispatch, SetStateAction } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, TabsProps, Tag, Tooltip, Typography } from 'antd';
-import { TableColumnType as ColumnType } from 'antd';
+import {
+	Progress,
+	TableColumnType as ColumnType,
+	Tag,
+	Tooltip,
+	Typography,
+} from 'antd';
 import { SortOrder } from 'antd/lib/table/interface';
 import {
 	HostData,
@@ -13,8 +18,6 @@ import {
 	FiltersType,
 	IQuickFiltersConfig,
 } 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';
@@ -22,9 +25,6 @@ import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { OrderBySchemaType } from '../InfraMonitoringK8s/schemas';
-import HostsList from './HostsList';
-
-import './InfraMonitoring.styles.scss';
 
 export interface HostRowData {
 	key?: string;
@@ -112,7 +112,10 @@ export interface HostsListTableProps {
 
 export interface EmptyOrLoadingViewProps {
 	isError: boolean;
-	errorMessage: string;
+	data:
+		| ErrorResponse<string>
+		| SuccessResponse<HostListResponse, unknown>
+		| undefined;
 	showHostsEmptyState: boolean;
 	sentAnyHostMetricsData: boolean;
 	isSendingIncorrectK8SAgentMetrics: boolean;
@@ -141,14 +144,6 @@ function mapOrderByToSortOrder(
 		: undefined;
 }
 
-export const getTabsItems = (): TabsProps['items'] => [
-	{
-		label: <TabLabel label="List View" isDisabled={false} tooltipText="" />,
-		key: PANEL_TYPES.LIST,
-		children: <HostsList />,
-	},
-];
-
 export const getHostsListColumns = (
 	orderBy: OrderBySchemaType,
 ): ColumnType<HostRowData>[] => [

frontend/src/hooks/infraMonitoring/useGetHostList.ts

@@ -1,42 +0,0 @@
-import { useMemo } from 'react';
-import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
-import {
-	getHostLists,
-	HostListPayload,
-	HostListResponse,
-} from 'api/infraMonitoring/getHostLists';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-
-type UseGetHostList = (
-	requestData: HostListPayload,
-	options?: UseQueryOptions<
-		SuccessResponse<HostListResponse> | ErrorResponse,
-		Error
-	>,
-	headers?: Record<string, string>,
-) => UseQueryResult<SuccessResponse<HostListResponse> | ErrorResponse, Error>;
-
-export const useGetHostList: UseGetHostList = (
-	requestData,
-	options,
-	headers,
-) => {
-	const queryKey = useMemo(() => {
-		if (options?.queryKey && Array.isArray(options.queryKey)) {
-			return [...options.queryKey];
-		}
-
-		if (options?.queryKey && typeof options.queryKey === 'string') {
-			return options.queryKey;
-		}
-
-		return [REACT_QUERY_KEY.GET_HOST_LIST, requestData];
-	}, [options?.queryKey, requestData]);
-
-	return useQuery<SuccessResponse<HostListResponse> | ErrorResponse, Error>({
-		queryFn: ({ signal }) => getHostLists(requestData, signal, headers),
-		...options,
-		queryKey,
-	});
-};

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

@@ -5,7 +5,6 @@
 	-webkit-font-smoothing: antialiased;
 	color: var(--bg-vanilla-100);
 	border-radius: 6px;
-	padding: 1rem 0.5rem 0.5rem 1rem;
 	border: 1px solid var(--bg-ink-100);
 	display: flex;
 	flex-direction: column;
@@ -21,30 +20,58 @@
 				background: var(--bg-vanilla-400);
 			}
 		}
+
+		.uplot-tooltip-divider {
+			background-color: var(--bg-vanilla-300);
+		}
 	}
 
-	.uplot-tooltip-header {
-		font-size: 13px;
-		font-weight: 500;
+	.uplot-tooltip-header-container {
+		padding: 1rem 0.5rem 0 1rem;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		&:last-child {
+			padding-bottom: 1rem;
+		}
+
+		.uplot-tooltip-header {
+			font-size: 13px;
+			font-weight: 500;
+		}
+
+		// Pinned active-series row has tighter left padding since it sits
+		// directly under the timestamp header with no marker indent.
+		.uplot-tooltip-item {
+			padding: 4px 8px 4px 0;
+		}
 	}
 
-	.uplot-tooltip-list-container {
-		overflow-y: auto;
-		max-height: 330px;
+	.uplot-tooltip-divider {
+		width: 100%;
+		height: 1px;
+		background-color: var(--bg-ink-100);
+	}
 
-		.uplot-tooltip-list {
-			&::-webkit-scrollbar {
-				width: 0.3rem;
-			}
+	.uplot-tooltip-list {
+		// Virtuoso absolutely positions its item rows; left: 0 prevents accidental
+		// horizontal offset when the scroller has padding or transform applied.
+		div[data-viewport-type='element'] {
+			left: 0;
+		}
 
-			&::-webkit-scrollbar-track {
-				background: transparent;
-			}
+		&::-webkit-scrollbar {
+			width: 0.3rem;
+		}
 
-			&::-webkit-scrollbar-thumb {
-				background: var(--bg-slate-100);
-				border-radius: 0.5rem;
-			}
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--bg-slate-100);
+			border-radius: 0.5rem;
 		}
 	}
 
@@ -52,10 +79,11 @@
 		display: flex;
 		align-items: center;
 		gap: 8px;
-		margin-bottom: 4px;
+		padding: 4px 8px 4px 16px;
 
 		.uplot-tooltip-item-marker {
 			border-radius: 50%;
+			border-style: solid;
 			border-width: 2px;
 			width: 12px;
 			height: 12px;
@@ -63,8 +91,24 @@
 		}
 
 		.uplot-tooltip-item-content {
-			white-space: wrap;
-			word-break: break-all;
+			width: 100%;
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			justify-content: space-between;
+
+			.uplot-tooltip-item-label {
+				white-space: normal;
+				overflow-wrap: anywhere;
+			}
+
+			&-separator {
+				flex: 1;
+				border-width: 0.5px;
+				border-style: dashed;
+				min-width: 24px;
+				opacity: 0.5;
+			}
 		}
 	}
 }

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

@@ -6,13 +6,14 @@ import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useTimezone } from 'providers/Timezone';
 
-import { TooltipProps } from '../types';
+import { TooltipContentItem, TooltipProps } from '../types';
 
 import './Tooltip.styles.scss';
 
-const TOOLTIP_LIST_MAX_HEIGHT = 330;
-const TOOLTIP_ITEM_HEIGHT = 38;
-const TOOLTIP_LIST_PADDING = 10;
+// Fallback per-item height used for the initial size estimate before
+// Virtuoso reports the real total height via totalListHeightChanged.
+const ITEM_HEIGHT = 38;
+const LIST_MAX_HEIGHT = 300;
 
 export default function Tooltip({
 	uPlotInstance,
@@ -21,27 +22,26 @@ export default function Tooltip({
 	showTooltipHeader = true,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-	const [listHeight, setListHeight] = useState(0);
-	const tooltipContent = content ?? [];
 	const { timezone: userTimezone } = useTimezone();
+	const [totalListHeight, setTotalListHeight] = useState(0);
 
-	const resolvedTimezone = useMemo(() => {
-		if (!timezone) {
-			return userTimezone.value;
-		}
-		return timezone.value;
-	}, [timezone, userTimezone]);
+	const tooltipContent = useMemo(() => content ?? [], [content]);
+
+	const resolvedTimezone = timezone?.value ?? userTimezone.value;
 
 	const headerTitle = useMemo(() => {
 		if (!showTooltipHeader) {
 			return null;
 		}
-		const data = uPlotInstance.data;
 		const cursorIdx = uPlotInstance.cursor.idx;
 		if (cursorIdx == null) {
 			return null;
 		}
-		return dayjs(data[0][cursorIdx] * 1000)
+		const ts = uPlotInstance.data[0]?.[cursorIdx];
+		if (ts == null) {
+			return null;
+		}
+		return dayjs(ts * 1000)
 			.tz(resolvedTimezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [
@@ -51,18 +51,24 @@ export default function Tooltip({
 		showTooltipHeader,
 	]);
 
-	const virtuosoStyle = useMemo(() => {
-		return {
-			height:
-				listHeight > 0
-					? Math.min(listHeight + TOOLTIP_LIST_PADDING, TOOLTIP_LIST_MAX_HEIGHT)
-					: Math.min(
-							tooltipContent.length * TOOLTIP_ITEM_HEIGHT,
-							TOOLTIP_LIST_MAX_HEIGHT,
-					  ),
-			width: '100%',
-		};
-	}, [listHeight, tooltipContent.length]);
+	const activeItem = useMemo(
+		() => tooltipContent.find((item) => item.isActive) ?? null,
+		[tooltipContent],
+	);
+
+	// Use the measured height from Virtuoso when available; fall back to a
+	// per-item estimate on the first render.  Math.ceil prevents a 1 px
+	// subpixel rounding gap from triggering a spurious scrollbar.
+	const virtuosoHeight =
+		totalListHeight > 0
+			? Math.ceil(Math.min(totalListHeight, LIST_MAX_HEIGHT))
+			: Math.min(tooltipContent.length * ITEM_HEIGHT, LIST_MAX_HEIGHT);
+
+	const showHeader = showTooltipHeader || activeItem != null;
+	// With a single series the active item is fully represented in the header —
+	// hide the divider and list to avoid showing a duplicate row.
+	const showList = tooltipContent.length > 1;
+	const showDivider = showList && showHeader;
 
 	return (
 		<div
@@ -72,38 +78,85 @@ export default function Tooltip({
 			)}
 			data-testid="uplot-tooltip-container"
 		>
-			{showTooltipHeader && (
-				<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
-					<span>{headerTitle}</span>
+			{showHeader && (
+				<div className="uplot-tooltip-header-container">
+					{showTooltipHeader && headerTitle && (
+						<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
+							<span>{headerTitle}</span>
+						</div>
+					)}
+
+					{activeItem && (
+						<TooltipItem
+							item={activeItem}
+							isItemActive={true}
+							containerTestId="uplot-tooltip-pinned"
+							markerTestId="uplot-tooltip-pinned-marker"
+							contentTestId="uplot-tooltip-pinned-content"
+						/>
+					)}
 				</div>
 			)}
-			<div className="uplot-tooltip-list-container">
-				{tooltipContent.length > 0 ? (
-					<Virtuoso
-						className="uplot-tooltip-list"
-						data-testid="uplot-tooltip-list"
-						data={tooltipContent}
-						style={virtuosoStyle}
-						totalListHeightChanged={setListHeight}
-						itemContent={(_, item): JSX.Element => (
-							<div className="uplot-tooltip-item" data-testid="uplot-tooltip-item">
-								<div
-									className="uplot-tooltip-item-marker"
-									style={{ borderColor: item.color }}
-									data-is-legend-marker={true}
-									data-testid="uplot-tooltip-item-marker"
-								/>
-								<div
-									className="uplot-tooltip-item-content"
-									style={{ color: item.color, fontWeight: item.isActive ? 700 : 400 }}
-									data-testid="uplot-tooltip-item-content"
-								>
-									{item.label}: {item.tooltipValue}
-								</div>
-							</div>
-						)}
-					/>
-				) : null}
+
+			{showDivider && <span className="uplot-tooltip-divider" />}
+
+			{showList && (
+				<Virtuoso
+					className="uplot-tooltip-list"
+					data-testid="uplot-tooltip-list"
+					data={tooltipContent}
+					style={{ height: virtuosoHeight, width: '100%' }}
+					totalListHeightChanged={setTotalListHeight}
+					itemContent={(_, item): JSX.Element => (
+						<TooltipItem item={item} isItemActive={false} />
+					)}
+				/>
+			)}
+		</div>
+	);
+}
+
+interface TooltipItemProps {
+	item: TooltipContentItem;
+	isItemActive: boolean;
+	containerTestId?: string;
+	markerTestId?: string;
+	contentTestId?: string;
+}
+
+function TooltipItem({
+	item,
+	isItemActive,
+	containerTestId = 'uplot-tooltip-item',
+	markerTestId = 'uplot-tooltip-item-marker',
+	contentTestId = 'uplot-tooltip-item-content',
+}: TooltipItemProps): JSX.Element {
+	return (
+		<div
+			className="uplot-tooltip-item"
+			style={{
+				opacity: isItemActive ? 1 : 0.8,
+				fontWeight: isItemActive ? 700 : 400,
+			}}
+			data-testid={containerTestId}
+		>
+			<div
+				className="uplot-tooltip-item-marker"
+				style={{ borderColor: item.color }}
+				data-is-legend-marker={true}
+				data-testid={markerTestId}
+			/>
+			<div
+				className="uplot-tooltip-item-content"
+				style={{ color: item.color }}
+				data-testid={contentTestId}
+			>
+				<span className="uplot-tooltip-item-label">{item.label}</span>
+				<span
+					className="uplot-tooltip-item-content-separator"
+					style={{ borderColor: item.color }}
+				/>
+				<span className="uplot-tooltip-item-value">{item.tooltipValue}</span>
 			</div>
 		</div>
 	);

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

@@ -157,22 +157,30 @@ describe('Tooltip', () => {
 		expect(container).not.toHaveClass('lightMode');
 	});
 
-	it('renders tooltip items when content is provided', () => {
+	it('renders single active item in header only, without a list', () => {
 		const uPlotInstance = createUPlotInstance(null);
-		const content = [createTooltipContent()];
+		const content = [createTooltipContent({ isActive: true })];
 
 		renderTooltip({ uPlotInstance, content });
 
-		const list = screen.queryByTestId('uplot-tooltip-list');
+		// Active item is shown in the header, not duplicated in a list
+		expect(screen.queryByTestId('uplot-tooltip-list')).toBeNull();
+		expect(screen.getByTestId('uplot-tooltip-pinned')).toBeInTheDocument();
+		const pinnedContent = screen.getByTestId('uplot-tooltip-pinned-content');
+		expect(pinnedContent).toHaveTextContent('Series A');
+		expect(pinnedContent).toHaveTextContent('10');
+	});
 
-		expect(list).not.toBeNull();
+	it('renders list when multiple series are present', () => {
+		const uPlotInstance = createUPlotInstance(null);
+		const content = [
+			createTooltipContent({ isActive: true }),
+			createTooltipContent({ label: 'Series B', isActive: false }),
+		];
 
-		const marker = screen.getByTestId('uplot-tooltip-item-marker');
-		const itemContent = screen.getByTestId('uplot-tooltip-item-content');
+		renderTooltip({ uPlotInstance, content });
 
-		expect(marker).toHaveStyle({ borderColor: '#ff0000' });
-		expect(itemContent).toHaveStyle({ color: '#ff0000', fontWeight: '700' });
-		expect(itemContent).toHaveTextContent('Series A: 10');
+		expect(screen.getByTestId('uplot-tooltip-list')).toBeInTheDocument();
 	});
 
 	it('does not render tooltip list when content is empty', () => {
@@ -192,7 +200,7 @@ describe('Tooltip', () => {
 		renderTooltip({ uPlotInstance, content });
 
 		const list = screen.getByTestId('uplot-tooltip-list');
-		expect(list).toHaveStyle({ height: '210px' });
+		expect(list).toHaveStyle({ height: '200px' });
 	});
 
 	it('sets tooltip list height based on content length when Virtuoso reports 0 height', () => {

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

@@ -72,8 +72,7 @@ export function buildTooltipContent({
 	decimalPrecision?: PrecisionOption;
 	isStackedBarChart?: boolean;
 }): TooltipContentItem[] {
-	const active: TooltipContentItem[] = [];
-	const rest: TooltipContentItem[] = [];
+	const items: TooltipContentItem[] = [];
 
 	for (let index = 1; index < series.length; index += 1) {
 		const s = series[index];
@@ -98,21 +97,17 @@ export function buildTooltipContent({
 		const isActive = index === activeSeriesIndex;
 
 		if (Number.isFinite(baseValue) && baseValue !== null) {
-			const item: TooltipContentItem = {
+			items.push({
 				label: String(s.label ?? ''),
 				value: baseValue,
 				tooltipValue: getToolTipValue(baseValue, yAxisUnit, decimalPrecision),
 				color: resolveSeriesColor(s.stroke, uPlotInstance, index),
 				isActive,
-			};
-
-			if (isActive) {
-				active.push(item);
-			} else {
-				rest.push(item);
-			}
+			});
 		}
 	}
 
-	return [...active, ...rest];
+	// Return items in series-index order (stable) — never re-sort by active state,
+	// so the list position of each series stays fixed as the user moves the cursor.
+	return items;
 }

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.styles.scss

@@ -6,7 +6,7 @@
 	white-space: pre;
 	border-radius: 4px;
 	position: fixed;
-	overflow: auto;
+	overflow: hidden;
 	transform: translate(-1000px, -1000px); // hide the tooltip initially
 	opacity: 0;
 	pointer-events: none;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -36,8 +36,8 @@ const HOVER_DISMISS_DELAY_MS = 100;
 export default function TooltipPlugin({
 	config,
 	render,
-	maxWidth = 300,
-	maxHeight = 400,
+	maxWidth = 450,
+	maxHeight = 600,
 	syncMode = DashboardCursorSync.None,
 	syncKey = '_tooltip_sync_global_',
 	pinnedTooltipElement,