fix: minor changes

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

@@ -14,11 +14,9 @@ import {
 	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { isInvalidPlotValue } from 'lib/uPlotV2/utils/dataUtils';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
 
 import { PanelMode } from '../types';
 import { buildBaseConfig } from '../utils/baseConfigBuilder';
@@ -33,22 +31,6 @@ export const prepareChartData = (
 	return [timestampArr, ...yAxisValuesArr];
 };
 
-function hasSingleVisiblePointForSeries(series: QueryData): boolean {
-	const rawValues = series.values ?? [];
-	let validPointCount = 0;
-
-	for (const [, rawValue] of rawValues) {
-		if (!isInvalidPlotValue(rawValue)) {
-			validPointCount += 1;
-			if (validPointCount > 1) {
-				return false;
-			}
-		}
-	}
-
-	return true;
-}
-
 export const prepareUPlotConfig = ({
 	widget,
 	isDarkMode,
@@ -86,7 +68,6 @@ export const prepareUPlotConfig = ({
 	});
 
 	apiResponse.data?.result?.forEach((series) => {
-		const hasSingleVisiblePoint = hasSingleVisiblePointForSeries(series);
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query
@@ -99,15 +80,13 @@ export const prepareUPlotConfig = ({
 
 		builder.addSeries({
 			scaleKey: 'y',
-			drawStyle: hasSingleVisiblePoint ? DrawStyle.Points : DrawStyle.Line,
+			drawStyle: DrawStyle.Line,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
 			spanGaps: true,
 			lineStyle: LineStyle.Solid,
 			lineInterpolation: LineInterpolation.Spline,
-			showPoints: hasSingleVisiblePoint
-				? VisibilityMode.Always
-				: VisibilityMode.Never,
+			showPoints: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
 			panelType: PANEL_TYPES.TIME_SERIES,

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,6 +42,15 @@ 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(
@@ -55,18 +65,18 @@ export default function Tooltip({
 			)}
 			<div
 				style={{
-					height: Math.min(
-						tooltipContent.length * TOOLTIP_ITEM_HEIGHT,
-						TOOLTIP_LIST_MAX_HEIGHT,
-					),
-					minHeight: 0,
+					maxHeight: TOOLTIP_LIST_MAX_HEIGHT,
 				}}
 			>
 				{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