chore: removed weakref

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

@@ -10,15 +10,7 @@ import { useBarChartStacking } from '../../hooks/useBarChartStacking';
 import { BarChartProps } from '../types';
 
 export default function BarChart(props: BarChartProps): JSX.Element {
-	const {
-		children,
-		isStackedBarChart,
-		renderTooltip: customRenderTooltip,
-		config,
-		data,
-		pinnedTooltipElement,
-		...rest
-	} = props;
+	const { children, isStackedBarChart, config, data, ...rest } = props;
 
 	const chartData = useBarChartStacking({
 		data,
@@ -28,27 +20,16 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
-			if (customRenderTooltip) {
-				return customRenderTooltip(props);
-			}
 			const tooltipProps: BarTooltipProps = {
 				...props,
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
 				isStackedBarChart: isStackedBarChart,
-				pinnedTooltipElement,
 			};
 			return <BarChartTooltip {...tooltipProps} />;
 		},
-		[
-			customRenderTooltip,
-			rest.timezone,
-			rest.yAxisUnit,
-			rest.decimalPrecision,
-			isStackedBarChart,
-			pinnedTooltipElement,
-		],
+		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision, isStackedBarChart],
 	);
 
 	return (

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

@@ -13,7 +13,6 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 		children,
 		renderTooltip: customRenderTooltip,
 		isQueriesMerged,
-		pinnedTooltipElement,
 		...rest
 	} = props;
 
@@ -27,17 +26,10 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
-				pinnedTooltipElement,
 			};
 			return <HistogramTooltip {...tooltipProps} />;
 		},
-		[
-			customRenderTooltip,
-			pinnedTooltipElement,
-			rest.timezone,
-			rest.yAxisUnit,
-			rest.decimalPrecision,
-		],
+		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
 	);
 
 	return (

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

@@ -9,12 +9,7 @@ import {
 import { TimeSeriesChartProps } from '../types';
 
 export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
-	const {
-		children,
-		renderTooltip: customRenderTooltip,
-		pinnedTooltipElement,
-		...rest
-	} = props;
+	const { children, renderTooltip: customRenderTooltip, ...rest } = props;
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
@@ -26,17 +21,10 @@ export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
-				pinnedTooltipElement,
 			};
 			return <TimeSeriesTooltip {...tooltipProps} />;
 		},
-		[
-			customRenderTooltip,
-			pinnedTooltipElement,
-			rest.timezone,
-			rest.yAxisUnit,
-			rest.decimalPrecision,
-		],
+		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
 	);
 
 	return (

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -1,22 +1,17 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import {
-	DashboardCursorSync,
-	TooltipClickData,
-} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 
 interface BaseChartProps {
 	width: number;
 	height: number;
 	showTooltip?: boolean;
 	showLegend?: boolean;
-	timezone?: Timezone;
+	timezone: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
 	renderTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;
 }

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -129,12 +129,12 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					onDestroy={onPlotDestroy}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
+					timezone={timezone.value}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
 					isStackedBarChart={widget.stackedBarChart ?? false}
-					timezone={timezone}
 				>
 					<ContextMenu
 						coordinates={coordinates}

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

@@ -5,7 +5,12 @@ import { getInitialStackedBands } from 'container/DashboardContainer/visualizati
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
+import {
+	DrawStyle,
+	LineInterpolation,
+	LineStyle,
+	VisibilityMode,
+} from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { get } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -58,12 +63,7 @@ export function prepareBarPanelConfig({
 	const minStepInterval = Math.min(...Object.values(stepIntervals));
 
 	const builder = buildBaseConfig({
-		widgetId: widget.id,
-		thresholds: widget.thresholds,
-		yAxisUnit: widget.yAxisUnit,
-		softMin: widget.softMin ?? undefined,
-		softMax: widget.softMax ?? undefined,
-		isLogScale: widget.isLogScale,
+		widget,
 		isDarkMode,
 		onClick,
 		onDragSelect,
@@ -98,8 +98,14 @@ export function prepareBarPanelConfig({
 		builder.addSeries({
 			scaleKey: 'y',
 			drawStyle: DrawStyle.Bar,
+			panelType: PANEL_TYPES.BAR,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
+			spanGaps: false,
+			lineStyle: LineStyle.Solid,
+			lineInterpolation: LineInterpolation.Spline,
+			showPoints: VisibilityMode.Never,
+			pointSize: 5,
 			isDarkMode,
 			stepInterval: currentStepInterval,
 		});

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx

@@ -100,7 +100,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					syncMode={DashboardCursorSync.Crosshair}
-					timezone={timezone}
+					timezone={timezone.value}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}

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

@@ -154,12 +154,7 @@ export function prepareHistogramPanelConfig({
 	isDarkMode: boolean;
 }): UPlotConfigBuilder {
 	const builder = buildBaseConfig({
-		widgetId: widget.id,
-		thresholds: widget.thresholds,
-		yAxisUnit: widget.yAxisUnit,
-		softMin: widget.softMin ?? undefined,
-		softMax: widget.softMax ?? undefined,
-		isLogScale: widget.isLogScale,
+		widget,
 		isDarkMode,
 		apiResponse,
 		panelMode,
@@ -196,8 +191,10 @@ export function prepareHistogramPanelConfig({
 		builder.addSeries({
 			label: '',
 			scaleKey: 'y',
-			drawStyle: DrawStyle.Histogram,
+			drawStyle: DrawStyle.Bar,
+			panelType: PANEL_TYPES.HISTOGRAM,
 			colorMapping: widget.customLegendColors ?? {},
+			spanGaps: false,
 			barWidthFactor: 1,
 			pointSize: 5,
 			lineColor: '#3f5ecc',
@@ -219,8 +216,10 @@ export function prepareHistogramPanelConfig({
 			builder.addSeries({
 				label: label,
 				scaleKey: 'y',
-				drawStyle: DrawStyle.Histogram,
+				drawStyle: DrawStyle.Bar,
+				panelType: PANEL_TYPES.HISTOGRAM,
 				colorMapping: widget.customLegendColors ?? {},
+				spanGaps: false,
 				barWidthFactor: 1,
 				pointSize: 5,
 				isDarkMode,

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -118,7 +118,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					}}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone}
+					timezone={timezone.value}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}

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

@@ -82,12 +82,7 @@ export const prepareUPlotConfig = ({
 	const minStepInterval = Math.min(...Object.values(stepIntervals));
 
 	const builder = buildBaseConfig({
-		widgetId: widget.id,
-		thresholds: widget.thresholds,
-		yAxisUnit: widget.yAxisUnit,
-		softMin: widget.softMin ?? undefined,
-		softMax: widget.softMax ?? undefined,
-		isLogScale: widget.isLogScale,
+		widget,
 		isDarkMode,
 		onClick,
 		onDragSelect,
@@ -125,6 +120,7 @@ export const prepareUPlotConfig = ({
 				: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
+			panelType: PANEL_TYPES.TIME_SERIES,
 		});
 	});
 

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

@@ -1,11 +1,11 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import { STEP_INTERVAL_MULTIPLIER } from 'lib/uPlotV2/constants';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 import { PanelMode } from '../../types';
-import { BaseConfigBuilderProps, buildBaseConfig } from '../baseConfigBuilder';
+import { buildBaseConfig } from '../baseConfigBuilder';
 
 jest.mock(
 	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
@@ -27,17 +27,16 @@ jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
 	default: jest.fn().mockReturnValue({ name: 'onClickPlugin' }),
 }));
 
-const createBaseConfigBuilderProps = (
-	overrides: Partial<BaseConfigBuilderProps> = {},
-): Partial<BaseConfigBuilderProps> => ({
-	widgetId: 'widget-1',
-	yAxisUnit: 'ms',
-	isLogScale: false,
-	softMin: undefined,
-	softMax: undefined,
-	thresholds: [],
-	...overrides,
-});
+const createWidget = (overrides: Partial<Widgets> = {}): Widgets =>
+	({
+		id: 'widget-1',
+		yAxisUnit: 'ms',
+		isLogScale: false,
+		softMin: undefined,
+		softMax: undefined,
+		thresholds: [],
+		...overrides,
+	} as Widgets);
 
 const createApiResponse = (
 	overrides: Partial<MetricRangePayloadProps> = {},
@@ -48,7 +47,7 @@ const createApiResponse = (
 	} as MetricRangePayloadProps);
 
 const baseProps = {
-	...createBaseConfigBuilderProps(),
+	widget: createWidget(),
 	apiResponse: createApiResponse(),
 	isDarkMode: true,
 	panelMode: PanelMode.DASHBOARD_VIEW,
@@ -68,7 +67,7 @@ describe('buildBaseConfig', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
 			panelMode: PanelMode.DASHBOARD_VIEW,
-			...createBaseConfigBuilderProps({ widgetId: 'my-widget' }),
+			widget: createWidget({ id: 'my-widget' }),
 		});
 
 		expect(builder.getWidgetId()).toBe('my-widget');
@@ -128,7 +127,7 @@ describe('buildBaseConfig', () => {
 	it('configures log scale on y axis when widget.isLogScale is true', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
-			...createBaseConfigBuilderProps({ isLogScale: true }),
+			widget: createWidget({ isLogScale: true }),
 		});
 
 		const config = builder.getConfig();
@@ -172,7 +171,7 @@ describe('buildBaseConfig', () => {
 	it('adds thresholds from widget', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
-			...createBaseConfigBuilderProps({
+			widget: createWidget({
 				thresholds: [
 					{
 						thresholdValue: 80,
@@ -180,7 +179,7 @@ describe('buildBaseConfig', () => {
 						thresholdUnit: 'ms',
 						thresholdLabel: 'High',
 					},
-				] as ThresholdProps[],
+				] as Widgets['thresholds'],
 			}),
 		});
 

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

@@ -1,6 +1,5 @@
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import onClickPlugin, {
 	OnClickPluginOpts,
 } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -10,32 +9,28 @@ import {
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 import { PanelMode } from '../types';
 
 export interface BaseConfigBuilderProps {
-	widgetId?: string;
-	thresholds?: ThresholdProps[];
+	widget: Widgets;
 	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
 	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect?: (startTime: number, endTime: number) => void;
 	timezone?: Timezone;
-	panelMode?: PanelMode;
+	panelMode: PanelMode;
 	panelType: PANEL_TYPES;
 	minTimeScale?: number;
 	maxTimeScale?: number;
 	stepInterval?: number;
-	isLogScale?: boolean;
-	yAxisUnit?: string;
-	softMin?: number;
-	softMax?: number;
 }
 
 export function buildBaseConfig({
-	widgetId,
+	widget,
 	isDarkMode,
 	onClick,
 	onDragSelect,
@@ -43,14 +38,9 @@ export function buildBaseConfig({
 	timezone,
 	panelMode,
 	panelType,
-	thresholds,
 	minTimeScale,
 	maxTimeScale,
 	stepInterval,
-	isLogScale,
-	yAxisUnit,
-	softMin,
-	softMax,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
 	const tzDate = timezone
 		? (timestamp: number): Date =>
@@ -59,26 +49,27 @@ export function buildBaseConfig({
 
 	const builder = new UPlotConfigBuilder({
 		onDragSelect,
-		widgetId: widgetId,
+		widgetId: widget.id,
 		tzDate,
 		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
-		selectionPreferencesSource: panelMode
-			? [PanelMode.DASHBOARD_VIEW, PanelMode.STANDALONE_VIEW].includes(panelMode)
-				? SelectionPreferencesSource.LOCAL_STORAGE
-				: SelectionPreferencesSource.IN_MEMORY
+		selectionPreferencesSource: [
+			PanelMode.DASHBOARD_VIEW,
+			PanelMode.STANDALONE_VIEW,
+		].includes(panelMode)
+			? SelectionPreferencesSource.LOCAL_STORAGE
 			: SelectionPreferencesSource.IN_MEMORY,
 		stepInterval,
 	});
 
 	const thresholdOptions: ThresholdsDrawHookOptions = {
 		scaleKey: 'y',
-		thresholds: (thresholds || []).map((threshold) => ({
+		thresholds: (widget.thresholds || []).map((threshold) => ({
 			thresholdValue: threshold.thresholdValue ?? 0,
 			thresholdColor: threshold.thresholdColor,
 			thresholdUnit: threshold.thresholdUnit,
 			thresholdLabel: threshold.thresholdLabel,
 		})),
-		yAxisUnit: yAxisUnit,
+		yAxisUnit: widget.yAxisUnit,
 	};
 
 	builder.addThresholds(thresholdOptions);
@@ -88,8 +79,8 @@ export function buildBaseConfig({
 		time: true,
 		min: minTimeScale,
 		max: maxTimeScale,
-		logBase: isLogScale ? 10 : undefined,
-		distribution: isLogScale
+		logBase: widget.isLogScale ? 10 : undefined,
+		distribution: widget.isLogScale
 			? DistributionType.Logarithmic
 			: DistributionType.Linear,
 	});
@@ -100,11 +91,11 @@ export function buildBaseConfig({
 		time: false,
 		min: undefined,
 		max: undefined,
-		softMin: softMin,
-		softMax: softMax,
+		softMin: widget.softMin ?? undefined,
+		softMax: widget.softMax ?? undefined,
 		thresholds: thresholdOptions,
-		logBase: isLogScale ? 10 : undefined,
-		distribution: isLogScale
+		logBase: widget.isLogScale ? 10 : undefined,
+		distribution: widget.isLogScale
 			? DistributionType.Logarithmic
 			: DistributionType.Linear,
 	});
@@ -123,7 +114,7 @@ export function buildBaseConfig({
 		show: true,
 		side: 2,
 		isDarkMode,
-		isLogScale: isLogScale,
+		isLogScale: widget.isLogScale,
 		panelType,
 	});
 
@@ -132,8 +123,8 @@ export function buildBaseConfig({
 		show: true,
 		side: 3,
 		isDarkMode,
-		isLogScale: isLogScale,
-		yAxisUnit: yAxisUnit,
+		isLogScale: widget.isLogScale,
+		yAxisUnit: widget.yAxisUnit,
 		panelType,
 	});
 

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

@@ -4,7 +4,6 @@ import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useTimezone } from 'providers/Timezone';
 
 import { TooltipProps } from '../types';
 
@@ -18,22 +17,11 @@ export default function Tooltip({
 	uPlotInstance,
 	timezone,
 	content,
-	isPinned,
 	showTooltipHeader = true,
-	pinnedTooltipElement,
-	clickData,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [listHeight, setListHeight] = useState(0);
 	const tooltipContent = content ?? [];
-	const { timezone: userTimezone } = useTimezone();
-
-	const resolvedTimezone = useMemo(() => {
-		if (!timezone) {
-			return userTimezone.value;
-		}
-		return timezone.value;
-	}, [timezone, userTimezone]);
 
 	const headerTitle = useMemo(() => {
 		if (!showTooltipHeader) {
@@ -45,10 +33,10 @@ export default function Tooltip({
 			return null;
 		}
 		return dayjs(data[0][cursorIdx] * 1000)
-			.tz(resolvedTimezone)
+			.tz(timezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [
-		resolvedTimezone,
+		timezone,
 		uPlotInstance.data,
 		uPlotInstance.cursor.idx,
 		showTooltipHeader,
@@ -75,45 +63,39 @@ export default function Tooltip({
 			)}
 			data-testid="uplot-tooltip-container"
 		>
-			{isPinned && clickData ? (
-				pinnedTooltipElement?.(clickData)
-			) : (
-				<>
-					{showTooltipHeader && (
-						<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
-							<span>{headerTitle}</span>
-						</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}
-					</div>
-				</>
+			{showTooltipHeader && (
+				<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
+					<span>{headerTitle}</span>
+				</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}
+			</div>
 		</div>
 	);
 }

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

@@ -6,7 +6,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { render, RenderResult, screen } from 'tests/test-utils';
 import uPlot from 'uplot';
 
-import type { TooltipClickData } from '../../../plugins/TooltipPlugin/types';
 import { TooltipContentItem } from '../../types';
 import Tooltip from '../Tooltip';
 
@@ -84,7 +83,7 @@ function createUPlotInstance(cursorIdx: number | null): uPlot {
 function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
 	const defaultProps: TooltipTestProps = {
 		uPlotInstance: createUPlotInstance(null),
-		timezone: { value: 'UTC', name: 'UTC', offset: '0', searchIndex: '0' },
+		timezone: 'UTC',
 		content: [],
 		showTooltipHeader: true,
 		// TooltipRenderArgs (not used directly in component but required by type)
@@ -93,7 +92,6 @@ function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
 		isPinned: false,
 		dismiss: jest.fn(),
 		viaSync: false,
-		clickData: null,
 	} as TooltipTestProps;
 
 	return render(
@@ -207,43 +205,4 @@ describe('Tooltip', () => {
 		// Falls back to content length: 2 items * 38px = 76px
 		expect(list).toHaveStyle({ height: '76px' });
 	});
-
-	it('renders pinned tooltip content when clickData is provided', () => {
-		const uPlotInstance = createUPlotInstance(0);
-
-		const clickData: TooltipClickData = {
-			xValue: 100,
-			yValue: 200,
-			focusedSeries: {
-				seriesIndex: 1,
-				seriesName: 'Series A',
-				value: 10,
-				color: '#ff0000',
-			},
-			clickedDataTimestamp: 100,
-			mouseX: 50,
-			mouseY: 60,
-			absoluteMouseX: 150,
-			absoluteMouseY: 160,
-		};
-
-		const pinnedTooltipElement = jest.fn(
-			(data: TooltipClickData): JSX.Element => (
-				<div data-testid="pinned-tooltip">{`Pinned at ${data.xValue}`}</div>
-			),
-		);
-
-		renderTooltip({
-			uPlotInstance,
-			isPinned: true,
-			clickData,
-			pinnedTooltipElement,
-			content: [createTooltipContent()],
-		});
-
-		expect(pinnedTooltipElement).toHaveBeenCalledWith(clickData);
-		expect(screen.getByTestId('pinned-tooltip')).toBeInTheDocument();
-		expect(screen.queryByTestId('uplot-tooltip-header')).not.toBeInTheDocument();
-		expect(screen.queryByTestId('uplot-tooltip-list')).not.toBeInTheDocument();
-	});
 });

frontend/src/lib/uPlotV2/components/types.ts

@@ -1,10 +1,8 @@
 import { ReactNode } from 'react';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import uPlot from 'uplot';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
-import { TooltipClickData } from '../plugins/TooltipPlugin/types';
 
 /**
  * Props for the Plot component
@@ -59,16 +57,14 @@ export interface TooltipRenderArgs {
 	isPinned: boolean;
 	dismiss: () => void;
 	viaSync: boolean;
-	clickData: TooltipClickData | null;
 }
 
 export interface BaseTooltipProps {
 	showTooltipHeader?: boolean;
-	timezone?: Timezone;
+	timezone: string;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	content?: TooltipContentItem[];
-	pinnedTooltipElement?: (clickData: TooltipClickData) => ReactNode;
 }
 
 export interface TimeSeriesTooltipProps

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -1,3 +1,4 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
@@ -22,9 +23,6 @@ import {
  * Path builders are static and shared across all instances of UPlotSeriesBuilder
  */
 let builders: PathBuilders | null = null;
-
-const DEFAULT_LINE_WIDTH = 2;
-export const POINT_SIZE_FACTOR = 2.5;
 export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	constructor(props: SeriesProps) {
 		super(props);
@@ -55,7 +53,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		const { lineWidth, lineStyle, lineCap, fillColor } = this.props;
 		const lineConfig: Partial<Series> = {
 			stroke: resolvedLineColor,
-			width: lineWidth ?? DEFAULT_LINE_WIDTH,
+			width: lineWidth ?? 2,
 		};
 
 		if (lineStyle === LineStyle.Dashed) {
@@ -68,9 +66,9 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 
 		if (fillColor) {
 			lineConfig.fill = fillColor;
-		} else if (this.props.drawStyle === DrawStyle.Bar) {
+		} else if (this.props.panelType === PANEL_TYPES.BAR) {
 			lineConfig.fill = resolvedLineColor;
-		} else if (this.props.drawStyle === DrawStyle.Histogram) {
+		} else if (this.props.panelType === PANEL_TYPES.HISTOGRAM) {
 			lineConfig.fill = `${resolvedLineColor}40`;
 		}
 
@@ -139,19 +137,10 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			drawStyle,
 			showPoints,
 		} = this.props;
-
-		/**
-		 * If pointSize is not provided, use the lineWidth * POINT_SIZE_FACTOR
-		 * to determine the point size.
-		 * POINT_SIZE_FACTOR is 2, so the point size will be 2x the line width.
-		 */
-		const resolvedPointSize =
-			pointSize ?? (lineWidth ?? DEFAULT_LINE_WIDTH) * POINT_SIZE_FACTOR;
-
 		const pointsConfig: Partial<Series.Points> = {
 			stroke: resolvedLineColor,
 			fill: resolvedLineColor,
-			size: resolvedPointSize,
+			size: !pointSize || pointSize < (lineWidth ?? 2) ? undefined : pointSize,
 			filter: pointsFilter || undefined,
 		};
 
@@ -242,7 +231,7 @@ function getPathBuilder({
 		throw new Error('Required uPlot path builders are not available');
 	}
 
-	if (drawStyle === DrawStyle.Bar || drawStyle === DrawStyle.Histogram) {
+	if (drawStyle === DrawStyle.Bar) {
 		const pathBuilders = uPlot.paths;
 		return getBarPathBuilder({
 			pathBuilders,

frontend/src/lib/uPlotV2/config/__tests__/UPlotConfigBuilder.test.ts

@@ -1,3 +1,4 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import uPlot from 'uplot';
 
 import {
@@ -42,6 +43,7 @@ describe('UPlotConfigBuilder', () => {
 		label: 'Requests',
 		colorMapping: {},
 		drawStyle: DrawStyle.Line,
+		panelType: PANEL_TYPES.TIME_SERIES,
 		...overrides,
 	});
 

frontend/src/lib/uPlotV2/config/__tests__/UPlotSeriesBuilder.test.ts

@@ -1,3 +1,4 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import uPlot from 'uplot';
 
@@ -8,7 +9,7 @@ import {
 	LineStyle,
 	VisibilityMode,
 } from '../types';
-import { POINT_SIZE_FACTOR, UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
+import { UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
 
 const createBaseProps = (
 	overrides: Partial<SeriesProps> = {},
@@ -18,6 +19,7 @@ const createBaseProps = (
 	colorMapping: {},
 	drawStyle: DrawStyle.Line,
 	isDarkMode: false,
+	panelType: PANEL_TYPES.TIME_SERIES,
 	...overrides,
 });
 
@@ -135,6 +137,7 @@ describe('UPlotSeriesBuilder', () => {
 		const smallPointsBuilder = new UPlotSeriesBuilder(
 			createBaseProps({
 				lineWidth: 4,
+				pointSize: 2,
 			}),
 		);
 		const largePointsBuilder = new UPlotSeriesBuilder(
@@ -147,7 +150,7 @@ describe('UPlotSeriesBuilder', () => {
 		const smallConfig = smallPointsBuilder.getConfig();
 		const largeConfig = largePointsBuilder.getConfig();
 
-		expect(smallConfig.points?.size).toBe(4 * POINT_SIZE_FACTOR); // should be lineWidth * POINT_SIZE_FACTOR, when pointSize is not provided
+		expect(smallConfig.points?.size).toBeUndefined();
 		expect(largeConfig.points?.size).toBe(4);
 	});
 

frontend/src/lib/uPlotV2/config/types.ts

@@ -112,7 +112,6 @@ export enum DrawStyle {
 	Line = 'line',
 	Points = 'points',
 	Bar = 'bar',
-	Histogram = 'histogram',
 }
 
 export enum LineInterpolation {
@@ -169,6 +168,7 @@ export interface PointsConfig {
 export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	scaleKey: string;
 	label?: string;
+	panelType: PANEL_TYPES;
 	colorMapping: Record<string, string>;
 	drawStyle: DrawStyle;
 	pathBuilder?: Series.PathBuilder;

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

@@ -1,7 +1,6 @@
 import { useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'classnames';
-import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
 import uPlot from 'uplot';
 
 import {
@@ -9,6 +8,7 @@ import {
 	createSetCursorHandler,
 	createSetLegendHandler,
 	createSetSeriesHandler,
+	getPlot,
 	isScrollEventInPlot,
 	updatePlotVisibility,
 	updateWindowSize,
@@ -54,7 +54,7 @@ export default function TooltipPlugin({
 	const [viewState, setState] = useState<TooltipViewState>(
 		createInitialViewState,
 	);
-	const { plot, isHovering, isPinned, contents, style } = viewState;
+	const { hasPlot, isHovering, isPinned, contents, style } = viewState;
 
 	/**
 	 * Merge a partial view update into the current React state.
@@ -73,12 +73,25 @@ export default function TooltipPlugin({
 		layoutRef.current?.observer.disconnect();
 		layoutRef.current = createLayoutObserver(layoutRef);
 
+		/**
+		 * Plot lifecycle and GC: viewState uses hasPlot (boolean), not the plot
+		 * reference; clearPlotReferences runs in cleanup so
+		 * detached canvases can be garbage collected.
+		 */
 		// Controller holds the mutable interaction state for this tooltip
 		// instance. It is intentionally *not* React state so uPlot hooks
 		// and DOM listeners can update it freely without triggering a
 		// render on every mouse move.
 		const controller: TooltipControllerState = createInitialControllerState();
 
+		/**
+		 * Clear plot references so detached canvases can be garbage collected.
+		 */
+		const clearPlotReferences = (): void => {
+			controller.plot = null;
+			updateState({ hasPlot: false });
+		};
+
 		const syncTooltipWithDashboard = syncMode === DashboardCursorSync.Tooltip;
 
 		// Enable uPlot's built-in cursor sync when requested so that
@@ -111,9 +124,10 @@ export default function TooltipPlugin({
 		// Lock uPlot's internal cursor when the tooltip is pinned so
 		// subsequent mouse moves do not move the crosshair.
 		function updateCursorLock(): void {
-			if (controller.plot) {
+			const plot = getPlot(controller);
+			if (plot) {
 				// @ts-ignore uPlot cursor lock is not working as expected
-				controller.plot.cursor._lock = controller.pinned;
+				plot.cursor._lock = controller.pinned;
 			}
 		}
 
@@ -143,9 +157,9 @@ export default function TooltipPlugin({
 			const isPinnedBeforeDismiss = controller.pinned;
 			controller.pinned = false;
 			controller.hoverActive = false;
-			controller.clickData = null;
-			if (controller.plot) {
-				controller.plot.setCursor({ left: -10, top: -10 });
+			const plot = getPlot(controller);
+			if (plot) {
+				plot.setCursor({ left: -10, top: -10 });
 			}
 			scheduleRender(isPinnedBeforeDismiss);
 		}
@@ -153,17 +167,17 @@ export default function TooltipPlugin({
 		// Build the React node to be rendered inside the tooltip by
 		// delegating to the caller-provided `render` function.
 		function createTooltipContents(): React.ReactNode {
-			if (!controller.hoverActive || !controller.plot) {
+			const plot = getPlot(controller);
+			if (!controller.hoverActive || !plot) {
 				return null;
 			}
 			return renderRef.current({
-				uPlotInstance: controller.plot,
+				uPlotInstance: plot,
 				dataIndexes: controller.seriesIndexes,
 				seriesIndex: controller.focusedSeriesIndex,
 				isPinned: controller.pinned,
 				dismiss: dismissTooltip,
 				viaSync: controller.cursorDrivenBySync,
-				clickData: controller.clickData,
 			});
 		}
 
@@ -243,33 +257,17 @@ export default function TooltipPlugin({
 
 		// When pinning is enabled, a click on the plot overlay while
 		// hovering converts the transient tooltip into a pinned one.
-		const handleUPlotOverClick = (u: uPlot, event: MouseEvent): void => {
+		// Uses getPlot(controller) to avoid closing over u (plot), which
+		// would retain the plot and detached canvases across unmounts.
+		const handleUPlotOverClick = (event: MouseEvent): void => {
+			const plot = getPlot(controller);
 			if (
-				event.target === u.over &&
+				plot &&
+				event.target === plot.over &&
 				controller.hoverActive &&
 				!controller.pinned &&
 				controller.focusedSeriesIndex != null
 			) {
-				const xValue = u.posToVal(event.offsetX, 'x');
-				const yValue = u.posToVal(event.offsetY, 'y');
-				const focusedSeries = getFocusedSeriesAtPosition(event, u);
-
-				let clickedDataTimestamp = xValue;
-				if (focusedSeries) {
-					clickedDataTimestamp = u.data[0][u.posToIdx(event.offsetX)];
-				}
-
-				controller.clickData = {
-					xValue,
-					yValue,
-					focusedSeries,
-					clickedDataTimestamp,
-					mouseX: event.offsetX,
-					mouseY: event.offsetY,
-					absoluteMouseX: event.clientX,
-					absoluteMouseY: event.clientY,
-				};
-
 				setTimeout(() => {
 					controller.pinned = true;
 					scheduleRender(true);
@@ -283,10 +281,9 @@ export default function TooltipPlugin({
 		// on the controller and optionally attach the pinning handler.
 		const handleInit = (u: uPlot): void => {
 			controller.plot = u;
-			updateState({ plot: u });
+			updateState({ hasPlot: true });
 			if (canPinTooltip) {
-				overClickHandler = (event: MouseEvent): void =>
-					handleUPlotOverClick(u, event);
+				overClickHandler = handleUPlotOverClick;
 				u.over.addEventListener('click', overClickHandler);
 			}
 		};
@@ -322,7 +319,6 @@ export default function TooltipPlugin({
 		const handleSetCursor = createSetCursorHandler(ctx);
 
 		handleWindowResize();
-
 		const removeReadyHook = config.addHook('ready', (): void =>
 			updatePlotVisibility(controller),
 		);
@@ -348,16 +344,20 @@ export default function TooltipPlugin({
 			removeSetSeriesHook();
 			removeSetLegendHook();
 			removeSetCursorHook();
-			if (controller.plot && overClickHandler) {
-				controller.plot.over.removeEventListener('click', overClickHandler);
+			if (overClickHandler) {
+				const plot = getPlot(controller);
+				if (plot) {
+					plot.over.removeEventListener('click', overClickHandler);
+				}
 				overClickHandler = null;
 			}
+			clearPlotReferences();
 		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [config]);
 
 	useLayoutEffect((): void => {
-		if (!plot || !layoutRef.current) {
+		if (!hasPlot || !layoutRef.current) {
 			return;
 		}
 		const layout = layoutRef.current;
@@ -372,9 +372,9 @@ export default function TooltipPlugin({
 			layout.width = 0;
 			layout.height = 0;
 		}
-	}, [isHovering, plot]);
+	}, [isHovering, hasPlot]);
 
-	if (!plot) {
+	if (!hasPlot) {
 		return null;
 	}
 

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/tooltipController.ts

@@ -10,6 +10,11 @@ import {
 
 const WINDOW_OFFSET = 16;
 
+/** Get the plot instance from the controller; returns null if never set or cleared. */
+export function getPlot(controller: TooltipControllerState): uPlot | null {
+	return controller.plot ?? null;
+}
+
 export function createInitialControllerState(): TooltipControllerState {
 	return {
 		plot: null,
@@ -26,7 +31,6 @@ export function createInitialControllerState(): TooltipControllerState {
 		windowWidth: window.innerWidth - WINDOW_OFFSET,
 		windowHeight: window.innerHeight - WINDOW_OFFSET,
 		pendingPinnedUpdate: false,
-		clickData: null,
 	};
 }
 
@@ -47,12 +51,13 @@ export function updateWindowSize(controller: TooltipControllerState): void {
  * This is used to decide if a synced tooltip should be shown at all.
  */
 export function updatePlotVisibility(controller: TooltipControllerState): void {
-	if (!controller.plot) {
+	const plot = getPlot(controller);
+	if (!plot) {
 		controller.plotWithinViewport = false;
 		return;
 	}
 	controller.plotWithinViewport = isPlotInViewport(
-		controller.plot.rect,
+		plot.rect,
 		controller.windowWidth,
 		controller.windowHeight,
 	);
@@ -67,10 +72,11 @@ export function isScrollEventInPlot(
 	event: Event,
 	controller: TooltipControllerState,
 ): boolean {
+	const plot = getPlot(controller);
 	return (
 		event.target instanceof Node &&
-		controller.plot !== null &&
-		event.target.contains(controller.plot.root)
+		plot !== null &&
+		event.target.contains(plot.root)
 	);
 }
 
@@ -166,11 +172,12 @@ export function createSetLegendHandler(
 ): (u: uPlot) => void {
 	return (u: uPlot): void => {
 		const { controller } = ctx;
-		if (!controller.plot?.cursor?.idxs) {
+		const plot = getPlot(controller);
+		if (!plot?.cursor?.idxs) {
 			return;
 		}
 
-		const newSeriesIndexes = controller.plot.cursor.idxs.slice();
+		const newSeriesIndexes = plot.cursor.idxs.slice();
 		const isAnySeriesActive = newSeriesIndexes.some((v, i) => i > 0 && v != null);
 
 		const previousCursorDrivenBySync = controller.cursorDrivenBySync;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts

@@ -18,7 +18,8 @@ export enum DashboardCursorSync {
 }
 
 export interface TooltipViewState {
-	plot?: uPlot | null;
+	/** Whether a plot instance exists; plot reference is in controller, not state. */
+	hasPlot?: boolean;
 	style: Partial<CSSProperties>;
 	isHovering: boolean;
 	isPinned: boolean;
@@ -42,22 +43,6 @@ export interface TooltipPluginProps {
 	maxHeight?: number;
 }
 
-export interface TooltipClickData {
-	xValue: number;
-	yValue: number;
-	focusedSeries: {
-		seriesIndex: number;
-		seriesName: string;
-		value: number;
-		color: string;
-	} | null;
-	clickedDataTimestamp: number;
-	mouseX: number;
-	mouseY: number;
-	absoluteMouseX: number;
-	absoluteMouseY: number;
-}
-
 /**
  * Mutable, non-React state that drives tooltip behaviour:
  * - whether the tooltip is active / pinned
@@ -84,9 +69,6 @@ export interface TooltipControllerState {
 	windowWidth: number;
 	windowHeight: number;
 	pendingPinnedUpdate: boolean;
-
-	/** Data about the click that triggered the tooltip */
-	clickData: TooltipClickData | null;
 }
 
 /**

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/utils.ts

@@ -123,7 +123,7 @@ export function createInitialViewState(): TooltipViewState {
 		isHovering: false,
 		isPinned: false,
 		contents: null,
-		plot: null,
+		hasPlot: false,
 		dismiss: (): void => {},
 	};
 }

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

@@ -9,12 +9,6 @@ import { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
 import TooltipPlugin from '../TooltipPlugin/TooltipPlugin';
 import { DashboardCursorSync } from '../TooltipPlugin/types';
 
-// Avoid depending on the full uPlot + onClickPlugin behaviour in these tests.
-// We only care that pinning logic runs without throwing, not which series is focused.
-jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
-	getFocusedSeriesAtPosition: jest.fn(() => null),
-}));
-
 // ---------------------------------------------------------------------------
 // Mock helpers
 // ---------------------------------------------------------------------------
@@ -61,21 +55,11 @@ function createFakePlot(): {
 	over: HTMLDivElement;
 	setCursor: jest.Mock<void, [uPlot.Cursor]>;
 	cursor: { event: Record<string, unknown> };
-	posToVal: jest.Mock<number, [value: number]>;
-	posToIdx: jest.Mock<number, []>;
-	data: [number[], number[]];
 } {
-	const over = document.createElement('div');
-
-	// Provide the minimal uPlot surface used by TooltipPlugin's pin logic.
 	return {
-		over,
+		over: document.createElement('div'),
 		setCursor: jest.fn(),
 		cursor: { event: {} },
-		// In real uPlot these map overlay coordinates to data-space values.
-		posToVal: jest.fn((value: number) => value),
-		posToIdx: jest.fn(() => 0),
-		data: [[0], [0]],
 	};
 }