Merge branch 'main' into feat/flamegraph-perf

frontend/src/api/billing/getUsage.ts

@@ -3,29 +3,13 @@ import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 
-export interface DayBreakdownEntry {
-	timestamp: number;
-	total: number;
-	quantity: number;
-	count: number;
-	size: number;
-}
-
-export interface BreakdownEntry {
-	type: string;
-	unit: string;
-	dayWiseBreakdown: {
-		breakdown: DayBreakdownEntry[];
-	};
-}
-
 export interface UsageResponsePayloadProps {
-	billingPeriodStart: number;
-	billingPeriodEnd: number;
+	billingPeriodStart: Date;
+	billingPeriodEnd: Date;
 	details: {
 		total: number;
 		baseFee: number;
-		breakdown: BreakdownEntry[];
+		breakdown: [];
 		billTotal: number;
 	};
 	discount: number;

frontend/src/container/BillingContainer/BillingUsageGraph/BillingBarChartTooltip.module.scss

@@ -1,9 +0,0 @@
-.headerRow {
-	padding: var(--spacing-8);
-}
-
-.itemList {
-	overflow-y: auto;
-	max-height: 300px;
-	padding: 12px;
-}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingBarChartTooltip.tsx

@@ -1,93 +0,0 @@
-import { useMemo } from 'react';
-import cx from 'classnames';
-import TooltipHeader from 'lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader';
-import TooltipItem from 'lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { getToolTipValue } from 'components/Graph/yAxisConfig';
-import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
-import {
-	TooltipContentItem,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-import TooltipStyles from 'lib/uPlotV2/components/Tooltip/Tooltip.module.scss';
-import Styles from './BillingBarChartTooltip.module.scss';
-
-interface BillingBarChartTooltipProps extends TooltipRenderArgs {
-	billingApiResponse: MetricRangePayloadProps;
-}
-
-export function BillingBarChartTooltip({
-	billingApiResponse,
-	uPlotInstance,
-	dataIndexes,
-	seriesIndex,
-	isPinned,
-}: BillingBarChartTooltipProps): JSX.Element {
-	const content = useMemo((): TooltipContentItem[] => {
-		const baseItems = buildTooltipContent({
-			data: uPlotInstance.data,
-			series: uPlotInstance.series,
-			dataIndexes,
-			activeSeriesIndex: seriesIndex,
-			uPlotInstance,
-			yAxisUnit: '',
-			isStackedBarChart: true,
-		});
-
-		return baseItems.map((item) => {
-			const match = billingApiResponse.data.result.find(
-				(r) => (r.legend || r.queryName) === item.label,
-			);
-
-			if (!match) {
-				return item;
-			}
-
-			const seriesIdx = uPlotInstance.series.findIndex(
-				(s) => s.label === item.label,
-			);
-			if (seriesIdx === -1) {
-				return item;
-			}
-
-			const dataIndex = dataIndexes[seriesIdx];
-			const quantity = dataIndex != null ? match.quantity?.[dataIndex] : null;
-			const unit = match.unit ?? '';
-			const quantityStr =
-				quantity != null ? ` - ${getToolTipValue(quantity)} ${unit}` : '';
-
-			return {
-				...item,
-				tooltipValue: `$${getToolTipValue(item.value, '')}${quantityStr}`,
-			};
-		});
-	}, [uPlotInstance, seriesIndex, dataIndexes, billingApiResponse]);
-
-	const activeItem = content.find((item) => item.isActive) ?? null;
-
-	return (
-		<div
-			className={cx(TooltipStyles.container, {
-				[TooltipStyles.pinned]: isPinned,
-			})}
-			data-testid="uplot-tooltip-container"
-		>
-			<TooltipHeader
-				uPlotInstance={uPlotInstance}
-				showTooltipHeader
-				isPinned={isPinned}
-				activeItem={null}
-				headerRowClassName={Styles.headerRow}
-				dateFormat={DATE_TIME_FORMATS.MONTH_DATE}
-			/>
-			{activeItem != null && <span className={TooltipStyles.divider} />}
-			<div className={Styles.itemList} data-testid="uplot-tooltip-list">
-				{content.map((item) => (
-					<TooltipItem key={item.label} item={item} isItemActive={item.isActive} />
-				))}
-			</div>
-		</div>
-	);
-}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.styles.scss

@@ -1,14 +1,4 @@
-.graph-container {
-	height: 100%;
-}
-
 .billing-graph-card {
-	.uplot-no-data {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
 	.ant-card-body {
 		height: 40vh;
 		.uplot-graph-container {
@@ -16,7 +6,7 @@
 		}
 	}
 	.total-spent {
-		font-family: 'SF Mono', monospace;
+		font-family: 'SF Mono' monospace;
 		font-size: 16px;
 		font-style: normal;
 		font-weight: 600;

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

@@ -1,121 +1,207 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
+import { Color } from '@signozhq/design-tokens';
 import { Card, Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
+import Uplot from 'components/Uplot';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
-import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
-import {
-	LegendPosition,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import tooltipPlugin from 'lib/uPlotLib/plugins/tooltipPlugin';
+import getAxes from 'lib/uPlotLib/utils/getAxes';
+import getRenderer from 'lib/uPlotLib/utils/getRenderer';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { getXAxisScale } from 'lib/uPlotLib/utils/getXAxisScale';
+import { getYAxisScale } from 'lib/uPlotLib/utils/getYAxisScale';
 import uPlot from 'uplot';
-import { UsageResponsePayloadProps } from 'api/billing/getUsage';
 
-import { BillingBarChartTooltip } from './BillingBarChartTooltip';
-import { prepareBillingBarConfig } from './prepareBillingBarConfig';
 import {
-	calculateStartEndTime,
 	convertDataToMetricRangePayload,
 	fillMissingValuesForQuantities,
 } from './utils';
 
 import './BillingUsageGraph.styles.scss';
+import '../../../lib/uPlotLib/uPlotLib.styles.scss';
 
 interface BillingUsageGraphProps {
-	data: Partial<UsageResponsePayloadProps>;
+	data: any;
 	billAmount: number;
 }
+const paths = (
+	u: any,
+	seriesIdx: number,
+	idx0: number,
+	idx1: number,
+	extendGap: boolean,
+	buildClip: boolean,
+): uPlot.Series.PathBuilder => {
+	const s = u.series[seriesIdx];
+	const style = s.drawStyle;
+	const interp = s.lineInterpolation;
 
-const numberFormatter = new Intl.NumberFormat('en-US');
+	const renderer = getRenderer(style, interp);
+
+	return renderer(u, seriesIdx, idx0, idx1, extendGap, buildClip);
+};
+
+const calculateStartEndTime = (
+	data: any,
+): { startTime: number; endTime: number } => {
+	const timestamps: number[] = [];
+	data?.details?.breakdown?.forEach((breakdown: any) => {
+		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry: any) => {
+			timestamps.push(entry?.timestamp);
+		});
+	});
+	const billingTime = [data?.billingPeriodStart, data?.billingPeriodEnd];
+	const startTime: number = Math.min(...timestamps, ...billingTime);
+	const endTime: number = Math.max(...timestamps, ...billingTime);
+	return { startTime, endTime };
+};
 
 export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 	const { data, billAmount } = props;
-
+	// Added this to fix the issue where breakdown with one day data are causing the bars to spread across multiple days
+	data?.details?.breakdown?.forEach((breakdown: any) => {
+		if (breakdown?.dayWiseBreakdown?.breakdown?.length === 1) {
+			const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
+			const nextDay = {
+				...currentDay,
+				timestamp: currentDay.timestamp + 86400,
+				count: 0,
+				size: 0,
+				quantity: 0,
+				total: 0,
+			};
+			breakdown.dayWiseBreakdown.breakdown.push(nextDay);
+		}
+	});
+	const graphCompatibleData = useMemo(
+		() => convertDataToMetricRangePayload(data),
+		[data],
+	);
+	const chartData = getUPlotChartData(graphCompatibleData);
 	const graphRef = useRef<HTMLDivElement>(null);
 	const isDarkMode = useIsDarkMode();
 	const containerDimensions = useResizeObserver(graphRef);
 
-	// Single-day data causes bars to span multiple days — add a synthetic
-	// zero-value next-day entry so uPlot renders a correctly-sized single-day bar.
-	const normalizedData = useMemo(() => {
-		if (!data?.details?.breakdown) {
-			return data;
-		}
-		return {
-			...data,
-			details: {
-				...data.details,
-				breakdown: data.details.breakdown.map((breakdown) => {
-					if (breakdown?.dayWiseBreakdown?.breakdown?.length !== 1) {
-						return breakdown;
-					}
-					const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
-					const nextDay = {
-						...currentDay,
-						timestamp: currentDay.timestamp + 86400,
-						count: 0,
-						size: 0,
-						quantity: 0,
-						total: 0,
-					};
-					return {
-						...breakdown,
-						dayWiseBreakdown: {
-							...breakdown.dayWiseBreakdown,
-							breakdown: [...breakdown.dayWiseBreakdown.breakdown, nextDay],
-						},
-					};
-				}),
-			},
-		};
-	}, [data]);
-
-	const graphCompatibleData = useMemo(
-		() => convertDataToMetricRangePayload(normalizedData),
-		[normalizedData],
-	);
-
-	const chartData = useMemo(
-		() => prepareChartData(graphCompatibleData) as uPlot.AlignedData,
-		[graphCompatibleData],
-	);
-
-	const filledApiResponse = useMemo(
-		(): MetricRangePayloadProps =>
-			fillMissingValuesForQuantities(
-				graphCompatibleData,
-				chartData[0] as number[],
-			),
-		[graphCompatibleData, chartData],
-	);
-
 	const { startTime, endTime } = useMemo(
-		() =>
-			calculateStartEndTime(normalizedData as Partial<UsageResponsePayloadProps>),
-		[normalizedData],
+		() => calculateStartEndTime(data),
+		[data],
 	);
 
-	const config = useMemo(
-		() =>
-			prepareBillingBarConfig({
-				isDarkMode,
-				// Subtract 86400s (one day) from startTime to add a buffer before first bar
-				minTimeScale: startTime !== undefined ? startTime - 86400 : undefined,
-				maxTimeScale: endTime,
-				apiResponse: graphCompatibleData,
-			}),
-		[isDarkMode, startTime, endTime, graphCompatibleData],
+	const getGraphSeries = (color: string, label: string): any => ({
+		drawStyle: 'bars',
+		paths,
+		lineInterpolation: 'spline',
+		show: true,
+		label,
+		fill: color,
+		stroke: color,
+		width: 2,
+		spanGaps: true,
+		points: {
+			size: 5,
+			show: false,
+			stroke: color,
+		},
+	});
+
+	const uPlotSeries: any = useMemo(
+		() => [
+			{ label: 'Timestamp', stroke: 'purple' },
+			getGraphSeries(
+				'#7CEDBE',
+				graphCompatibleData.data.result[0]?.legend as string,
+			),
+			getGraphSeries(
+				'#4E74F8',
+				graphCompatibleData.data.result[1]?.legend as string,
+			),
+			getGraphSeries(
+				'#F24769',
+				graphCompatibleData.data.result[2]?.legend as string,
+			),
+		],
+		[graphCompatibleData.data.result],
 	);
 
-	const renderBillingTooltip = useCallback(
-		(args: TooltipRenderArgs) => (
-			<BillingBarChartTooltip billingApiResponse={filledApiResponse} {...args} />
-		),
-		[filledApiResponse],
+	const axesOptions = getAxes({ isDarkMode, yAxisUnit: '' });
+
+	const optionsForChart: uPlot.Options = useMemo(
+		() => ({
+			id: 'billing-usage-breakdown',
+			series: uPlotSeries,
+			width: containerDimensions.width,
+			height: containerDimensions.height - 30,
+			axes: [
+				{
+					...axesOptions[0],
+					grid: {
+						...axesOptions.grid,
+						show: false,
+						stroke: isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400,
+					},
+				},
+				{
+					...axesOptions[1],
+					stroke: isDarkMode ? Color.BG_SLATE_200 : Color.BG_INK_400,
+				},
+			],
+			scales: {
+				x: {
+					...getXAxisScale(startTime - 86400, endTime), // Minus 86400 from startTime to decrease a day to have a buffer start
+				},
+				y: {
+					...getYAxisScale({
+						series: graphCompatibleData?.data?.newResult?.data?.result,
+						yAxisUnit: '',
+						softMax: null,
+						softMin: null,
+					}),
+				},
+			},
+			legend: {
+				show: true,
+				live: false,
+				isolate: true,
+			},
+			cursor: {
+				lock: false,
+				focus: {
+					prox: 1e6,
+					bias: 1,
+				},
+			},
+			focus: {
+				alpha: 0.3,
+			},
+			padding: [32, 32, 16, 16],
+			plugins: [
+				tooltipPlugin({
+					apiResponse: fillMissingValuesForQuantities(
+						graphCompatibleData,
+						chartData[0],
+					),
+					yAxisUnit: '',
+					isBillingUsageGraphs: true,
+					isDarkMode,
+				}),
+			],
+		}),
+		[
+			axesOptions,
+			chartData,
+			containerDimensions.height,
+			containerDimensions.width,
+			endTime,
+			graphCompatibleData,
+			isDarkMode,
+			startTime,
+			uPlotSeries,
+		],
 	);
 
+	const numberFormatter = new Intl.NumberFormat('en-US');
+
 	return (
 		<Card bordered={false} className="billing-graph-card">
 			<Flex justify="space-between">
@@ -128,19 +214,8 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 					</Typography.Text>
 				</Flex>
 			</Flex>
-			<div ref={graphRef} className="graph-container">
-				{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-					<BarChart
-						config={config}
-						data={chartData}
-						isStackedBarChart
-						legendConfig={{ position: LegendPosition.BOTTOM }}
-						customTooltip={renderBillingTooltip}
-						width={containerDimensions.width}
-						height={containerDimensions.height - 30}
-						canPinTooltip
-					/>
-				)}
+			<div ref={graphRef} style={{ height: '100%', paddingBottom: 48 }}>
+				<Uplot data={chartData} options={optionsForChart} />
 			</div>
 		</Card>
 	);

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/BillingBarChartTooltip.test.tsx

@@ -1,165 +0,0 @@
-import React from 'react';
-import { render, screen } from 'tests/test-utils';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-
-import { BillingBarChartTooltip } from '../BillingBarChartTooltip';
-
-// Mock buildTooltipContent so tests don't depend on uPlot stacking math
-jest.mock('lib/uPlotV2/components/Tooltip/utils', () => ({
-	buildTooltipContent: jest.fn().mockReturnValue([
-		{
-			label: 'Logs',
-			value: 100,
-			tooltipValue: '$100.00',
-			color: '#7CEDBE',
-			isActive: true,
-			isHighlighted: false,
-		},
-		{
-			label: 'Traces',
-			value: 50,
-			tooltipValue: '$50.00',
-			color: '#4E74F8',
-			isActive: false,
-			isHighlighted: false,
-		},
-	]),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: jest.fn().mockReturnValue(false),
-}));
-
-function makeUPlotInstance(seriesLabels: string[]): uPlot {
-	return {
-		data: [
-			[1000, 2000],
-			[100, 200],
-			[50, 80],
-		],
-		cursor: { idx: 0 },
-		series: [
-			{ label: 'Timestamp', show: true, stroke: '#000' },
-			...seriesLabels.map((label) => ({
-				label,
-				show: true,
-				stroke: '#aabbcc',
-			})),
-		],
-	} as unknown as uPlot;
-}
-
-function makeBillingApiResponse(
-	entries: { legend: string; quantity: (number | null)[]; unit: string }[],
-): MetricRangePayloadProps {
-	return {
-		data: {
-			result: entries.map((e) => ({
-				legend: e.legend,
-				queryName: e.legend,
-				metric: {},
-				values: [[1000, '10']] as [number, string][],
-				quantity: e.quantity as number[],
-				unit: e.unit,
-			})),
-			resultType: '',
-			newResult: { data: { result: [], resultType: '' } },
-		},
-	};
-}
-
-const baseTooltipArgs = {
-	isPinned: false,
-	dismiss: jest.fn(),
-	viaSync: false,
-	seriesIndex: 1,
-	dataIndexes: [null, 0, 0],
-};
-
-describe('BillingBarChartTooltip', () => {
-	it('augments tooltipValue with quantity and unit for each series', () => {
-		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
-		const billingApiResponse = makeBillingApiResponse([
-			{ legend: 'Logs', quantity: [1.5, 2.0], unit: 'GB' },
-			{ legend: 'Traces', quantity: [500, 800], unit: 'spans' },
-		]);
-
-		render(
-			<BillingBarChartTooltip
-				{...baseTooltipArgs}
-				uPlotInstance={uPlotInstance}
-				billingApiResponse={billingApiResponse}
-			/>,
-		);
-
-		expect(screen.getAllByText(/1\.5 GB/i).length).toBeGreaterThan(0);
-		expect(screen.getAllByText(/500 spans/i).length).toBeGreaterThan(0);
-	});
-
-	it('omits quantity line when quantity at dataIndex is null', () => {
-		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
-		const billingApiResponse = makeBillingApiResponse([
-			{ legend: 'Logs', quantity: [null, null], unit: 'GB' },
-			{ legend: 'Traces', quantity: [null, null], unit: 'spans' },
-		]);
-
-		render(
-			<BillingBarChartTooltip
-				{...baseTooltipArgs}
-				uPlotInstance={uPlotInstance}
-				billingApiResponse={billingApiResponse}
-			/>,
-		);
-
-		expect(screen.queryByText(/null GB/i)).not.toBeInTheDocument();
-		expect(screen.queryByText(/null spans/i)).not.toBeInTheDocument();
-		expect(screen.getByTestId('uplot-tooltip-container')).toBeInTheDocument();
-	});
-
-	it('formats dollar value via getToolTipValue — strips trailing zeros (0.3076 → $0.3)', () => {
-		const uPlotInstance = makeUPlotInstance(['Logs']);
-		const { buildTooltipContent } = jest.requireMock(
-			'lib/uPlotV2/components/Tooltip/utils',
-		) as { buildTooltipContent: jest.Mock };
-		buildTooltipContent.mockReturnValueOnce([
-			{
-				label: 'Logs',
-				value: 0.3076171875,
-				tooltipValue: '$0.31',
-				color: '#7CEDBE',
-				isActive: true,
-				isHighlighted: false,
-			},
-		]);
-		const billingApiResponse = makeBillingApiResponse([
-			{ legend: 'Logs', quantity: [1.23], unit: 'GB' },
-		]);
-
-		render(
-			<BillingBarChartTooltip
-				{...baseTooltipArgs}
-				uPlotInstance={uPlotInstance}
-				billingApiResponse={billingApiResponse}
-			/>,
-		);
-
-		expect(screen.getAllByText(/\$0\.3 -/i).length).toBeGreaterThan(0);
-	});
-
-	it('passes through base tooltipValue when series is not in billingApiResponse', () => {
-		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
-		const billingApiResponse = makeBillingApiResponse([]);
-
-		render(
-			<BillingBarChartTooltip
-				{...baseTooltipArgs}
-				uPlotInstance={uPlotInstance}
-				billingApiResponse={billingApiResponse}
-			/>,
-		);
-
-		expect(screen.getAllByText('$100.00').length).toBeGreaterThan(0);
-		expect(screen.getAllByText('$50.00').length).toBeGreaterThan(0);
-	});
-});

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/prepareBillingBarConfig.test.ts

@@ -1,101 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-import { prepareBillingBarConfig } from '../prepareBillingBarConfig';
-
-const makeApiResponse = (legends: string[]): MetricRangePayloadProps => ({
-	data: {
-		result: legends.map((legend) => ({
-			legend,
-			queryName: legend,
-			metric: {},
-			values: [[1000, '10']],
-		})),
-		resultType: '',
-		newResult: { data: { result: [], resultType: '' } },
-	},
-});
-
-describe('prepareBillingBarConfig', () => {
-	const baseProps = { isDarkMode: false };
-
-	it('returns a builder with no series when apiResponse is undefined', () => {
-		const builder = prepareBillingBarConfig(baseProps);
-		const config = builder.getConfig();
-		expect(config.series).toHaveLength(1);
-	});
-
-	it('returns a builder with no series when result is empty', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse([]),
-		});
-		const config = builder.getConfig();
-		expect(config.series).toHaveLength(1);
-	});
-
-	it('adds one series per result entry with correct labels and colors', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
-		});
-		const config = builder.getConfig();
-		expect(config.series).toHaveLength(4);
-		expect(config.series?.[1]?.label).toBe('Logs');
-		expect(config.series?.[1]?.stroke).toBe(Color.BG_FOREST_300);
-		expect(config.series?.[2]?.label).toBe('Traces');
-		expect(config.series?.[2]?.stroke).toBe(Color.BG_ROBIN_500);
-		expect(config.series?.[3]?.label).toBe('Metrics');
-		expect(config.series?.[3]?.stroke).toBe(Color.BG_SAKURA_500);
-	});
-
-	it('assigns fallback color (Amber500) for signals beyond the 3-color palette', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse(['A', 'B', 'C', 'D']),
-		});
-		const config = builder.getConfig();
-		expect(config.series?.[4]?.stroke).toBe(Color.BG_AMBER_500);
-	});
-
-	it('sets stacking bands, padding, and focus alpha for behavioral parity', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
-		});
-		const config = builder.getConfig();
-		expect(config.bands).toStrictEqual([{ series: [1, 2] }, { series: [2, 3] }]);
-		expect(config.padding).toStrictEqual([32, 32, 16, 16]);
-		expect(config.focus).toStrictEqual({ alpha: 0.3 });
-	});
-
-	it('sets no bands when result is empty', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse([]),
-		});
-		const config = builder.getConfig();
-		expect(config.bands).toBeUndefined();
-	});
-
-	it('uses queryName as label when legend is undefined', () => {
-		const apiResponse: MetricRangePayloadProps = {
-			data: {
-				result: [
-					{
-						legend: undefined as any,
-						queryName: 'Logs',
-						metric: {},
-						values: [[1000, '10']],
-					},
-				],
-				resultType: '',
-				newResult: { data: { result: [], resultType: '' } },
-			},
-		};
-		const builder = prepareBillingBarConfig({ isDarkMode: false, apiResponse });
-		const config = builder.getConfig();
-		expect(config.series?.[1]?.label).toBe('Logs');
-		expect(config.series?.[1]?.stroke).toBe(Color.BG_FOREST_300);
-	});
-});

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/utils.test.ts

@@ -1,80 +0,0 @@
-import { calculateStartEndTime } from '../utils';
-
-const makeData = (
-	timestamps: number[],
-	billingPeriodStart?: number,
-	billingPeriodEnd?: number,
-) => ({
-	billingPeriodStart,
-	billingPeriodEnd,
-	details: {
-		total: 0,
-		baseFee: 0,
-		billTotal: 0,
-		breakdown: [
-			{
-				type: 'Logs',
-				unit: 'GB',
-				dayWiseBreakdown: {
-					breakdown: timestamps.map((timestamp) => ({
-						timestamp,
-						total: 0,
-						quantity: 0,
-						count: 0,
-						size: 0,
-					})),
-				},
-			},
-		],
-	},
-});
-
-describe('calculateStartEndTime', () => {
-	it('returns min/max of all breakdown timestamps', () => {
-		const data = makeData([1000, 3000, 2000]);
-		expect(calculateStartEndTime(data)).toStrictEqual({
-			startTime: 1000,
-			endTime: 3000,
-		});
-	});
-
-	it('includes billingPeriodStart and billingPeriodEnd in the range', () => {
-		const data = makeData([2000, 3000], 500, 4000);
-		expect(calculateStartEndTime(data)).toStrictEqual({
-			startTime: 500,
-			endTime: 4000,
-		});
-	});
-
-	it('returns undefined when there are no timestamps and no billing period', () => {
-		expect(calculateStartEndTime({})).toStrictEqual({
-			startTime: undefined,
-			endTime: undefined,
-		});
-	});
-
-	it('returns undefined when breakdown is empty', () => {
-		const data = makeData([]);
-		expect(calculateStartEndTime(data)).toStrictEqual({
-			startTime: undefined,
-			endTime: undefined,
-		});
-	});
-
-	it('filters out non-finite billingPeriod values', () => {
-		const data = makeData([1000], NaN, Infinity);
-		expect(calculateStartEndTime(data)).toStrictEqual({
-			startTime: 1000,
-			endTime: 1000,
-		});
-	});
-
-	it('works when details is missing', () => {
-		expect(
-			calculateStartEndTime({ billingPeriodStart: 100, billingPeriodEnd: 200 }),
-		).toStrictEqual({
-			startTime: 100,
-			endTime: 200,
-		});
-	});
-});

frontend/src/container/BillingContainer/BillingUsageGraph/prepareBillingBarConfig.ts

@@ -1,71 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
-import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-const BILLING_SERIES_COLORS = [
-	Color.BG_FOREST_300,
-	Color.BG_ROBIN_500,
-	Color.BG_SAKURA_500,
-];
-
-export interface PrepareBillingBarConfigProps {
-	isDarkMode: boolean;
-	timezone?: Timezone;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-	apiResponse?: MetricRangePayloadProps;
-}
-
-export function prepareBillingBarConfig({
-	isDarkMode,
-	timezone,
-	minTimeScale,
-	maxTimeScale,
-	apiResponse,
-}: PrepareBillingBarConfigProps): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		id: 'billing-usage-breakdown',
-		isDarkMode,
-		timezone,
-		panelType: PANEL_TYPES.BAR,
-		minTimeScale,
-		maxTimeScale,
-	});
-
-	const results = apiResponse?.data?.result;
-	if (!results?.length) {
-		return builder;
-	}
-
-	const labels = results.map((s) => s.legend || s.queryName || '');
-
-	const colorMapping = labels.reduce<Record<string, string>>(
-		(acc, label, index) => {
-			acc[label] = BILLING_SERIES_COLORS[index] ?? Color.BG_AMBER_500;
-			return acc;
-		},
-		{},
-	);
-
-	labels.forEach((label) => {
-		builder.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			label,
-			colorMapping,
-			isDarkMode,
-			metric: {},
-		});
-	});
-
-	builder.setBands(getInitialStackedBands(results.length));
-	builder.setPadding([32, 32, 16, 16]);
-	builder.setFocus({ alpha: 0.3 });
-
-	return builder;
-}

frontend/src/container/BillingContainer/BillingUsageGraph/utils.ts

@@ -1,7 +1,7 @@
 import { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
-import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { isEmpty, isNull } from 'lodash-es';
 import { unparse } from 'papaparse';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -120,40 +120,11 @@ export function prepareCsvData(data: Partial<UsageResponsePayloadProps>): {
 	fileName: string;
 } {
 	const graphCompatibleData = convertDataToMetricRangePayload(data);
-	const chartData = prepareChartData(graphCompatibleData);
-	const quantityMapArr = quantityDataArr(
-		graphCompatibleData,
-		chartData[0] as number[],
-	);
+	const chartData = getUPlotChartData(graphCompatibleData);
+	const quantityMapArr = quantityDataArr(graphCompatibleData, chartData[0]);
 
 	return {
 		csvData: unparse(generateCsvData(quantityMapArr)),
 		fileName: csvFileName(quantityMapArr),
 	};
 }
-
-export function calculateStartEndTime(
-	data: Partial<UsageResponsePayloadProps>,
-): { startTime: number | undefined; endTime: number | undefined } {
-	const timestamps: number[] = [];
-	data?.details?.breakdown?.forEach((breakdown) => {
-		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry) => {
-			timestamps.push(entry.timestamp);
-		});
-	});
-
-	const billingTime: number[] = [
-		data?.billingPeriodStart,
-		data?.billingPeriodEnd,
-	].filter((t): t is number => typeof t === 'number' && Number.isFinite(t));
-
-	const allTimes = [...timestamps, ...billingTime];
-	if (allTimes.length === 0) {
-		return { startTime: undefined, endTime: undefined };
-	}
-
-	return {
-		startTime: Math.min(...allTimes),
-		endTime: Math.max(...allTimes),
-	};
-}

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

@@ -18,8 +18,6 @@ interface TooltipHeaderProps {
 	showTooltipHeader: boolean;
 	isPinned: boolean;
 	activeItem: TooltipContentItem | null;
-	headerRowClassName?: string;
-	dateFormat?: string;
 }
 
 export default function TooltipHeader({
@@ -28,8 +26,6 @@ export default function TooltipHeader({
 	showTooltipHeader,
 	isPinned,
 	activeItem,
-	headerRowClassName,
-	dateFormat = DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS,
 }: TooltipHeaderProps): JSX.Element {
 	const { timezone: userTimezone } = useTimezone();
 	const resolvedTimezone = timezone?.value ?? userTimezone.value;
@@ -48,13 +44,12 @@ export default function TooltipHeader({
 		}
 		return dayjs(timestamp * 1000)
 			.tz(resolvedTimezone)
-			.format(dateFormat);
+			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [
 		resolvedTimezone,
 		uPlotInstance.data,
 		uPlotInstance.cursor.idx,
 		showTooltipHeader,
-		dateFormat,
 	]);
 
 	return (
@@ -63,7 +58,7 @@ export default function TooltipHeader({
 			data-testid="uplot-tooltip-header-container"
 		>
 			{showTooltipHeader && headerTitle && (
-				<div className={cx(Styles.headerRow, headerRowClassName)}>
+				<div className={Styles.headerRow}>
 					<span>{headerTitle}</span>
 					{isPinned && (
 						<div className={cx(Styles.status)} data-testid="uplot-tooltip-status">

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/computeVisualLayout.test.ts

@@ -472,4 +472,98 @@ describe('computeVisualLayout', () => {
 		expect(aRow).toBeGreaterThan(1); // must NOT be at row 1
 		expect(aRow).toBe(3); // next free row after B at row 2 (A overlaps B)
 	});
+
+	// --- Wide-group fast path (> WIDE_GROUP_THRESHOLD siblings) ---
+	// Past the threshold the layout switches to exact overlap-only packing to
+	// avoid the O(N^2) connector-avoidance spiral. These lock in correctness and
+	// the no-overlap invariant at scale.
+
+	function noRowHasOverlap(
+		layout: ReturnType<typeof computeVisualLayout>,
+	): void {
+		for (const row of layout.visualRows) {
+			const sorted = [...row].sort((a, b) => a.timestamp - b.timestamp);
+			for (let i = 1; i < sorted.length; i++) {
+				const prevEnd = sorted[i - 1].timestamp + sorted[i - 1].durationNano / 1e6;
+				expect(sorted[i].timestamp).toBeGreaterThanOrEqual(prevEnd);
+			}
+		}
+	}
+
+	it('should pack thousands of sequential leaf siblings into 1 row (wide path)', () => {
+		const root = makeSpan({ spanId: 'root', timestamp: 0, durationNano: 1e12 });
+		const kids: FlamegraphSpan[] = [];
+		// 2000 strictly sequential (non-overlapping) children
+		for (let i = 0; i < 2000; i++) {
+			kids.push(
+				makeSpan({
+					spanId: `k${i}`,
+					parentSpanId: 'root',
+					timestamp: i * 10,
+					durationNano: 5e6, // 5ms, ends before next starts
+				}),
+			);
+		}
+
+		const layout = computeVisualLayout([[root], kids]);
+
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		expect(layout.totalVisualRows).toBe(2); // all siblings share row 1
+		for (const k of kids) {
+			expect(layout.spanToVisualRow[k.spanId]).toBe(1);
+		}
+		noRowHasOverlap(layout);
+	});
+
+	it('should pack thousands of fully-overlapping leaf siblings without violations (wide path)', () => {
+		const root = makeSpan({ spanId: 'root', timestamp: 0, durationNano: 1e12 });
+		const kids: FlamegraphSpan[] = [];
+		// 1000 children all spanning the same window → each needs its own row
+		for (let i = 0; i < 1000; i++) {
+			kids.push(
+				makeSpan({
+					spanId: `k${i}`,
+					parentSpanId: 'root',
+					timestamp: 0,
+					durationNano: 100e6,
+				}),
+			);
+		}
+
+		const layout = computeVisualLayout([[root], kids]);
+
+		expect(layout.totalVisualRows).toBe(1001); // root + 1000 stacked rows
+		expect(Object.keys(layout.spanToVisualRow)).toHaveLength(1001);
+		noRowHasOverlap(layout);
+	});
+
+	it('should keep non-leaf subtrees adjacent within a wide mixed group (wide path)', () => {
+		const root = makeSpan({ spanId: 'root', timestamp: 0, durationNano: 1e12 });
+		const kids: FlamegraphSpan[] = [];
+		for (let i = 0; i < 1000; i++) {
+			kids.push(
+				makeSpan({
+					spanId: `k${i}`,
+					parentSpanId: 'root',
+					timestamp: i * 10,
+					durationNano: 5e6,
+				}),
+			);
+		}
+		// One of the wide siblings has a child of its own
+		const grandchild = makeSpan({
+			spanId: 'gc',
+			parentSpanId: 'k500',
+			timestamp: 5000,
+			durationNano: 2e6,
+		});
+
+		const layout = computeVisualLayout([[root], kids, [grandchild]]);
+
+		const parentRow = layout.spanToVisualRow['k500'];
+		const gcRow = layout.spanToVisualRow['gc'];
+		expect(gcRow - parentRow).toBe(1); // subtree adjacency preserved
+		expect(Object.keys(layout.spanToVisualRow)).toHaveLength(1002);
+		noRowHasOverlap(layout);
+	});
 });

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/computeVisualLayout.ts

@@ -18,6 +18,81 @@ export interface VisualLayout {
 	totalVisualRows: number;
 }
 
+// Above this many siblings under one parent, the connector-avoidance refinement
+// (Checks 2 & 3) is both visually meaningless — the row is already a dense wall —
+// and quadratic: every child deposits a connector point on each intermediate row,
+// which pushes later children even higher, which deposits more points. That
+// feedback loop inflates a layout needing ~50 rows to thousands and never
+// finishes on wide traces. Past the threshold we pack by overlap only.
+const WIDE_GROUP_THRESHOLD = 512;
+
+/**
+ * Segment tree over rows that answers "lowest row index >= `from` whose smallest
+ * span start-time is >= `end`" in O(log rows). Used to place a large group of
+ * leaf siblings by overlap only: because siblings are processed in descending
+ * start order, every already-placed span on a row starts at or after the current
+ * one, so [start, end] overlaps a row iff some span there starts before `end` —
+ * i.e. the row is free iff its minimum start >= end. Each node stores the max of
+ * its subtree's per-row minimum starts so a free row can be found by descent.
+ */
+class LowestFreeRow {
+	private readonly size: number;
+
+	private readonly tree: Float64Array;
+
+	constructor(rows: number) {
+		let size = 1;
+		while (size < rows) {
+			size *= 2;
+		}
+		this.size = size;
+		this.tree = new Float64Array(size * 2).fill(Infinity);
+	}
+
+	place(row: number, start: number): void {
+		let i = row + this.size;
+		// A row's key is the minimum start among its spans. Children are processed
+		// in descending start order so a leaf's start is the new minimum, but a
+		// non-leaf subtree's descendant can land on a row out of order — take min.
+		if (start >= this.tree[i]) {
+			return;
+		}
+		this.tree[i] = start;
+		for (i >>= 1; i >= 1; i >>= 1) {
+			const next = Math.max(this.tree[2 * i], this.tree[2 * i + 1]);
+			if (this.tree[i] === next) {
+				break;
+			}
+			this.tree[i] = next;
+		}
+	}
+
+	lowestFrom(from: number, end: number): number {
+		return this.descend(1, 0, this.size - 1, from, end);
+	}
+
+	private descend(
+		node: number,
+		lo: number,
+		hi: number,
+		from: number,
+		end: number,
+	): number {
+		if (hi < from || this.tree[node] < end) {
+			return -1;
+		}
+		if (lo === hi) {
+			return lo;
+		}
+		const mid = (lo + hi) >> 1;
+		const left = this.descend(2 * node, lo, mid, from, end);
+		if (left !== -1) {
+			return left;
+		}
+		return this.descend(2 * node + 1, mid + 1, hi, from, end);
+	}
+}
+
 /**
  * Computes an overlap-safe visual layout for flamegraph spans using DFS ordering.
  *
@@ -214,7 +289,53 @@ export function computeVisualLayout(spans: FlamegraphSpan[][]): VisualLayout {
 		arr.push(point);
 	}
 
+	// Fast path for a parent with a very large group of children: pack by overlap
+	// only (descending greedy), skipping the quadratic connector-avoidance that
+	// spirals at this scale. Leaf children — the bulk of a wide trace — are placed
+	// in O(log rows) via the segment tree; the rare non-leaf subtree falls back to
+	// findPlacement against the shared interval map. Both structures are kept in
+	// sync so each placement sees all prior occupancy. Same ShapeEntry[] contract.
+	function computeWideShape(
+		rootSpan: FlamegraphSpan,
+		children: FlamegraphSpan[],
+	): ShapeEntry[] {
+		const shape: ShapeEntry[] = [{ span: rootSpan, relativeRow: 0 }];
+		const localIntervals = new Map<number, Array<[number, number]>>();
+		// Children occupy relative rows 1..children.length in the worst case.
+		const finder = new LowestFreeRow(children.length + 2);
+
+		const occupy = (row: number, span: FlamegraphSpan): void => {
+			const s = span.timestamp;
+			const e = span.timestamp + span.durationNano / 1e6;
+			shape.push({ span, relativeRow: row });
+			addIntervalTo(localIntervals, row, s, e);
+			finder.place(row, s);
+		};
+
+		for (const child of children) {
+			if (childrenMap.has(child.spanId)) {
+				// Non-leaf: place its whole subtree shape as a unit via findPlacement.
+				const childShape = computeSubtreeShape(child);
+				const offset = findPlacement(childShape, 1, localIntervals);
+				for (const entry of childShape) {
+					occupy(entry.relativeRow + offset, entry.span);
+				}
+			} else {
+				const end = child.timestamp + child.durationNano / 1e6;
+				occupy(finder.lowestFrom(1, end), child);
+			}
+		}
+
+		return shape;
+	}
+
 	function computeSubtreeShape(rootSpan: FlamegraphSpan): ShapeEntry[] {
+		const children = childrenMap.get(rootSpan.spanId);
+
+		if (children && children.length > WIDE_GROUP_THRESHOLD) {
+			return computeWideShape(rootSpan, children);
+		}
+
 		const localIntervals = new Map<number, Array<[number, number]>>();
 		const localConnectorPoints = new Map<number, number[]>();
 		const shape: ShapeEntry[] = [];
@@ -225,7 +346,6 @@ export function computeVisualLayout(spans: FlamegraphSpan[][]): VisualLayout {
 		shape.push({ span: rootSpan, relativeRow: 0 });
 		addIntervalTo(localIntervals, 0, rootStart, rootEnd);
 
-		const children = childrenMap.get(rootSpan.spanId);
 		if (children) {
 			for (const child of children) {
 				const childShape = computeSubtreeShape(child);

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useVisualLayoutWorker.ts

@@ -94,7 +94,7 @@ export function useVisualLayoutWorker(spans: FlamegraphSpan[][]): {
 			cleanup();
 		};
 
-		// Timeout: if worker doesn't respond in 30s, terminate and error
+		// Timeout: if worker doesn't respond in 15s, terminate and error
 		const WORKER_TIMEOUT_MS = 15000;
 		const timeoutId = setTimeout(() => {
 			if (requestIdRef.current === currentId && isComputingRef.current) {