fix(apm): use dynamic stepInterval for API monitoring time range on endpoints page

Replace hardcoded stepInterval: 300 (5 min) with the computed step value in
all four onViewAPIMonitoringPopupClick calls in External.tsx. Also fix the
endTime formula in util.ts — endTime should be `timestamp` (bucket end), not
`timestamp + stepInterval`, so the destination time range covers exactly the
clicked bar bucket [bucket_start, bucket_end].

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs/api/openapi.yml

@@ -5686,6 +5686,12 @@ components:
           type: string
         rootServiceName:
           type: string
+        serviceNameToTotalDurationMap:
+          additionalProperties:
+            minimum: 0
+            type: integer
+          nullable: true
+          type: object
         spans:
           items:
             $ref: '#/components/schemas/SpantypesWaterfallSpan'

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -6743,6 +6743,15 @@ export interface SpantypesGettableSpanMapperGroupsDTO {
 	items: SpantypesSpanMapperGroupDTO[];
 }
 
+export type SpantypesGettableWaterfallTraceDTOServiceNameToTotalDurationMapAnyOf =
+	{ [key: string]: number };
+
+/**
+ * @nullable
+ */
+export type SpantypesGettableWaterfallTraceDTOServiceNameToTotalDurationMap =
+	SpantypesGettableWaterfallTraceDTOServiceNameToTotalDurationMapAnyOf | null;
+
 export enum SpantypesSpanAggregationTypeDTO {
 	span_count = 'span_count',
 	execution_time_percentage = 'execution_time_percentage',
@@ -6931,6 +6940,10 @@ export interface SpantypesGettableWaterfallTraceDTO {
 	 * @type string
 	 */
 	rootServiceName?: string;
+	/**
+	 * @type object,null
+	 */
+	serviceNameToTotalDurationMap?: SpantypesGettableWaterfallTraceDTOServiceNameToTotalDurationMap;
 	/**
 	 * @type array,null
 	 */

frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss

@@ -41,22 +41,14 @@ $item-spacing: 8px;
 		width: 100%;
 		background: transparent;
 		border: none;
-		border-radius: 0;
-		box-shadow: none;
 		outline: none;
-		height: auto;
 		color: var(--l1-foreground);
 		font-size: 14px;
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		padding: 0;
-
+		&.ant-input:focus {
-		&:focus,
-		&:focus-visible,
-		&:hover {
-			border: none;
 			box-shadow: none;
-			outline: none;
 		}
 
 		&::placeholder {

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -6,7 +6,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShortcuts';

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
+import { Card, Form, Input } from 'antd';
-import { Card, Form } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Button, Input } from 'antd';
-import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { X } from '@signozhq/icons';

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
-import { Button, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -259,14 +259,6 @@
 			border-left: transparent;
 			border-top-left-radius: 0px;
 			border-bottom-left-radius: 0px;
-
-			&:focus:not(:focus-visible),
-			&.ant-btn:focus:not(:focus-visible) {
-				border-color: var(--l2-border);
-				border-left-color: transparent;
-				outline: none;
-				box-shadow: none;
-			}
 		}
 	}
 }
@@ -292,21 +284,5 @@
 		.cm-placeholder {
 			font-size: 12px !important;
 		}
-
-		$add-on-row-height: 38px;
-
-		.periscope-input-with-label {
-			.input {
-				.ant-select {
-					height: $add-on-row-height;
-				}
-			}
-		}
-
-		.input-with-label {
-			.input {
-				height: $add-on-row-height;
-			}
-		}
 	}
 }

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss

@@ -4,23 +4,6 @@
 	padding: 12px;
 	gap: 12px;
 	border-bottom: 1px solid var(--l1-border);
-
-	.search {
-		input {
-			--input-background: var(--l2-background);
-			--input-hover-background: var(--l2-background);
-			--input-focus-background: var(--l2-background);
-			&::placeholder {
-				color: var(--l3-foreground);
-			}
-			--input-font-size: 14px;
-			--input-border-color: var(--l1-border);
-			--input-focus-border-color: var(--primary-background);
-			--input-focus-outline-width: 0;
-			--input-focus-outline-offset: 0;
-		}
-	}
-
 	.filter-header-checkbox {
 		display: flex;
 		align-items: center;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Button, Checkbox, Input, Skeleton } from 'antd';
-import { Button, Checkbox, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Button, Input } from 'antd';
-import { Button } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 

frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx

@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Button, Input, Select, Tooltip } from 'antd';
-import { Button, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleX, Trash } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
+import { Collapse, Input } from 'antd';
-import { Collapse } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Input, Select } from 'antd';
-import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';

frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
+
 import './TimeInput.scss';
 
 export interface TimeInputProps {

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
+import { Input, Select } from 'antd';
-import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx

@@ -91,6 +91,7 @@ function ChartPreview({
 	const renderQBChartPreview = (): JSX.Element => (
 		<ChartPreviewComponent
 			headline={headline}
+			name=""
 			query={stagedQuery}
 			selectedInterval={globalSelectedInterval}
 			alertDef={alertDef}
@@ -106,6 +107,7 @@ function ChartPreview({
 	const renderPromAndChQueryChartPreview = (): JSX.Element => (
 		<ChartPreviewComponent
 			headline={headline}
+			name="Chart Preview"
 			query={stagedQuery}
 			alertDef={alertDef}
 			selectedInterval={globalSelectedInterval}

frontend/src/container/CreateAlertV2/QuerySection/__tests__/ChartPreview.test.tsx

@@ -17,6 +17,7 @@ import { CreateAlertProvider } from '../../context';
 import ChartPreview from '../ChartPreview/ChartPreview';
 
 const REQUESTS_PER_SEC = 'requests/sec';
+const CHART_PREVIEW_NAME = 'Chart Preview';
 const QUERY_TYPE_TEST_ID = 'query-type';
 const GRAPH_TYPE_TEST_ID = 'graph-type';
 const CHART_PREVIEW_COMPONENT_TEST_ID = 'chart-preview-component';
@@ -33,6 +34,7 @@ jest.mock(
 			return (
 				<div data-testid={CHART_PREVIEW_COMPONENT_TEST_ID}>
 					<div data-testid="headline">{props.headline}</div>
+					<div data-testid="name">{props.name}</div>
 					<div data-testid={QUERY_TYPE_TEST_ID}>{props.query?.queryType}</div>
 					<div data-testid="selected-interval">
 						{props.selectedInterval?.startTime}
@@ -173,6 +175,12 @@ describe('ChartPreview', () => {
 		);
 	});
 
+	it('renders QueryBuilder chart preview with empty name when query type is QUERY_BUILDER', () => {
+		renderChartPreview();
+
+		expect(screen.getByTestId('name')).toHaveTextContent('');
+	});
+
 	it('renders QueryBuilder chart preview with correct props', () => {
 		renderChartPreview();
 
@@ -183,6 +191,7 @@ describe('ChartPreview', () => {
 		expect(screen.getByTestId(GRAPH_TYPE_TEST_ID)).toHaveTextContent(
 			PANEL_TYPES.TIME_SERIES,
 		);
+		expect(screen.getByTestId('name')).toHaveTextContent('');
 		expect(screen.getByTestId('headline')).toBeInTheDocument();
 		expect(screen.getByTestId('selected-interval')).toBeInTheDocument();
 	});
@@ -205,6 +214,7 @@ describe('ChartPreview', () => {
 		expect(
 			screen.getByTestId(CHART_PREVIEW_COMPONENT_TEST_ID),
 		).toBeInTheDocument();
+		expect(screen.getByTestId('name')).toHaveTextContent(CHART_PREVIEW_NAME);
 		expect(screen.getByTestId(QUERY_TYPE_TEST_ID)).toHaveTextContent(
 			EQueryType.PROM,
 		);
@@ -228,6 +238,7 @@ describe('ChartPreview', () => {
 		expect(
 			screen.getByTestId(CHART_PREVIEW_COMPONENT_TEST_ID),
 		).toBeInTheDocument();
+		expect(screen.getByTestId('name')).toHaveTextContent(CHART_PREVIEW_NAME);
 		expect(screen.getByTestId(QUERY_TYPE_TEST_ID)).toHaveTextContent(
 			EQueryType.CLICKHOUSE,
 		);

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -16,8 +16,7 @@ import {
 	Plus,
 	X,
 } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
+import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
-import { Button, Card, Modal, Popover, Tag, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Button, Input } from 'antd';
-import { Button } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
 import { useNotifications } from 'hooks/useNotifications';

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

@@ -17,11 +17,10 @@ import { getTimeRange } from 'utils/getTimeRange';
 import BarChart from '../../charts/BarChart/BarChart';
 import ChartManager from '../../components/ChartManager/ChartManager';
 import { usePanelContextMenu } from '../../hooks/usePanelContextMenu';
-import { prepareBarPanelConfig } from './utils';
+import { prepareBarPanelConfig, prepareBarPanelData } from './utils';
 
 import '../Panel.styles.scss';
 import TooltipFooter from '../components/TooltipFooter';
-import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 
 function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const {
@@ -100,7 +99,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		if (!queryResponse?.data?.payload) {
 			return [];
 		}
-		return prepareChartData(queryResponse?.data?.payload);
+		return prepareBarPanelData(queryResponse?.data?.payload);
 	}, [queryResponse?.data?.payload]);
 
 	const layoutChildren = useMemo(() => {

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

@@ -11,10 +11,21 @@ import { get } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { AlignedData } from 'uplot';
 
 import { PanelMode } from '../types';
+import { fillMissingXAxisTimestamps, getXAxisTimestamps } from '../utils';
 import { buildBaseConfig } from '../utils/baseConfigBuilder';
 
+export function prepareBarPanelData(
+	apiResponse: MetricRangePayloadProps,
+): AlignedData {
+	const seriesList = apiResponse?.data?.result || [];
+	const timestampArr = getXAxisTimestamps(seriesList);
+	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
+	return [timestampArr, ...yAxisValuesArr];
+}
+
 export function prepareBarPanelConfig({
 	widget,
 	isDarkMode,

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

@@ -17,11 +17,10 @@ import { useTimezone } from 'providers/Timezone';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
-import { prepareUPlotConfig } from '../TimeSeriesPanel/utils';
+import { prepareChartData, prepareUPlotConfig } from '../TimeSeriesPanel/utils';
 
 import '../Panel.styles.scss';
 import TooltipFooter from '../components/TooltipFooter';
-import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 
 function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	const {

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

@@ -6,8 +6,7 @@ import {
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { PanelMode } from '../../types';
-import { prepareUPlotConfig } from '../utils';
+import { prepareChartData, prepareUPlotConfig } from '../utils';
-import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 
 jest.mock(
 	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',

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

@@ -1,6 +1,10 @@
 import { ExecStats } from 'api/v5/v5';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	fillMissingXAxisTimestamps,
+	getXAxisTimestamps,
+} from 'container/DashboardContainer/visualization/panels/utils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -11,15 +15,42 @@ import {
 	LineStyle,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { hasSingleVisiblePoint } from 'lib/uPlotV2/utils/dataUtils';
+import { isInvalidPlotValue } from 'lib/uPlotV2/utils/dataUtils';
 import get from 'lodash-es/get';
 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';
 
+export const prepareChartData = (
+	apiResponse: MetricRangePayloadProps,
+): uPlot.AlignedData => {
+	const seriesList = apiResponse?.data?.result || [];
+	const timestampArr = getXAxisTimestamps(seriesList);
+	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
+
+	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,
@@ -76,7 +107,7 @@ export const prepareUPlotConfig = ({
 	}
 
 	apiResponse.data.result.forEach((series) => {
-		const hasSingleValidPoint = hasSingleVisiblePoint(series.values);
+		const hasSingleValidPoint = hasSingleVisiblePointForSeries(series);
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -19,11 +19,11 @@ import {
 	Info,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
 import {
 	Button,
 	ColorPicker,
 	Divider,
+	Input,
 	Modal,
 	RefSelectProps,
 	Select,

frontend/src/container/FormAlertChannels/Settings/Email.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
+import { Form, Input } from 'antd';
-import { Form } from 'antd';
+
 import { EmailChannel } from '../../CreateAlertChannels/config';
 
 function EmailForm({ setSelectedConfig }: EmailFormProps): JSX.Element {

frontend/src/container/FormAlertChannels/Settings/Webhook.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
+import { Form, Input } from 'antd';
-import { Form } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
 import { WebhookChannel } from '../../CreateAlertChannels/config';

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,8 +1,7 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
+import { Form, FormInstance, Input, Select } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
-import { Form, FormInstance, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';

frontend/src/container/FormAlertRules/ChartPreview/ChartContent.tsx

@@ -1,118 +0,0 @@
-import { useMemo } from 'react';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
-import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
-import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import uPlot from 'uplot';
-
-import {
-	AlertChartPanelType,
-	buildAlertChartConfig,
-	buildChartId,
-} from './utils';
-
-// Panel types that render through the UPlotConfigBuilder pipeline.
-// To support a new modern-chart panel type, add an entry here and extend
-// `AlertChartPanelType` / `buildAlertChartConfig` to handle its series setup.
-const SUPPORTED_CHARTS: Record<
-	AlertChartPanelType,
-	typeof TimeSeries | typeof BarChart
-> = {
-	[PANEL_TYPES.TIME_SERIES]: TimeSeries,
-	[PANEL_TYPES.BAR]: BarChart,
-};
-
-const isSupportedPanelType = (
-	panelType: PANEL_TYPES,
-): panelType is AlertChartPanelType => panelType in SUPPORTED_CHARTS;
-
-export interface ChartContentProps {
-	panelType: PANEL_TYPES;
-	alertId?: string;
-	query: Query;
-	apiResponse?: MetricRangePayloadProps;
-	data: uPlot.AlignedData;
-	thresholds: ThresholdProps[];
-	yAxisUnit: string;
-	legendPosition: LegendPosition;
-	isDarkMode: boolean;
-	timezone: Timezone;
-	width: number;
-	height: number;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-	onDragSelect: (start: number, end: number) => void;
-}
-
-export default function ChartContent({
-	panelType,
-	alertId,
-	query,
-	thresholds,
-	apiResponse,
-	data,
-	yAxisUnit,
-	isDarkMode,
-	timezone,
-	minTimeScale,
-	maxTimeScale,
-	onDragSelect,
-	width,
-	height,
-	legendPosition,
-}: ChartContentProps): JSX.Element | null {
-	const supported = isSupportedPanelType(panelType);
-
-	const config = useMemo(
-		() =>
-			buildAlertChartConfig({
-				id: buildChartId(alertId),
-				panelType: panelType as AlertChartPanelType,
-				query,
-				thresholds,
-				apiResponse,
-				yAxisUnit,
-				isDarkMode,
-				timezone,
-				minTimeScale,
-				maxTimeScale,
-				onDragSelect,
-			}),
-		[
-			alertId,
-			panelType,
-			query,
-			thresholds,
-			apiResponse,
-			yAxisUnit,
-			isDarkMode,
-			timezone,
-			minTimeScale,
-			maxTimeScale,
-			onDragSelect,
-		],
-	);
-
-	if (!supported) {
-		return null;
-	}
-
-	const Component = SUPPORTED_CHARTS[panelType];
-
-	return (
-		<Component
-			config={config}
-			data={data}
-			width={width}
-			height={height}
-			legendConfig={{ position: legendPosition }}
-			canPinTooltip
-			yAxisUnit={yAxisUnit}
-			timezone={timezone}
-		/>
-	);
-}

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -15,6 +15,8 @@ import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import AnomalyAlertEvaluationView from 'container/AnomalyAlertEvaluationView';
 import { INITIAL_CRITICAL_THRESHOLD } from 'container/CreateAlertV2/context/constants';
 import { Threshold } from 'container/CreateAlertV2/context/types';
+import { getLocalStorageGraphVisibilityState } from 'container/GridCardLayout/GridCard/utils';
+import GridPanelSwitch from 'container/GridPanelSwitch';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import { getFormatNameByOptionId } from 'container/NewWidget/RightContainer/alertFomatCategories';
 import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
@@ -30,7 +32,8 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
 import history from 'lib/history';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
@@ -38,27 +41,24 @@ import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import { AlertDef } from 'types/api/alerts/def';
+import { LegendPosition } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import uPlot from 'uplot';
 import { getGraphType } from 'utils/getGraphType';
 import { getSortedSeriesData } from 'utils/getSortedSeriesData';
 import { getTimeRange } from 'utils/getTimeRange';
 
 import { AlertDetectionTypes } from '..';
-import ChartContent from './ChartContent';
 import { ChartContainer } from './styles';
 import { getThresholds } from './utils';
 
 import './ChartPreview.styles.scss';
-import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
-
-// Height reserved for the `.chart-preview-header` strip rendered above the chart.
-const CHART_PREVIEW_HEADER_HEIGHT = 48;
-const CHART_PREVIEW_CONTAINER_PADDING = 16;
 
 export interface ChartPreviewProps {
+	name: string;
 	query: Query | null;
 	graphType?: PANEL_TYPES;
 	selectedTime?: timePreferenceType;
@@ -77,6 +77,7 @@ export interface ChartPreviewProps {
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function ChartPreview({
+	name,
 	query,
 	graphType = PANEL_TYPES.TIME_SERIES,
 	selectedTime = 'GLOBAL_TIME',
@@ -112,6 +113,14 @@ function ChartPreview({
 
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
+	const [graphVisibility, setGraphVisibility] = useState<boolean[]>([]);
+	const legendScrollPositionRef = useRef<{
+		scrollTop: number;
+		scrollLeft: number;
+	}>({
+		scrollTop: 0,
+		scrollLeft: 0,
+	});
 	const { currentQuery } = useQueryBuilder();
 
 	const {
@@ -210,6 +219,18 @@ function ChartPreview({
 		setMaxTimeScale(endTime);
 	}, [maxTime, minTime, globalSelectedInterval, queryResponse, setQueryStatus]);
 
+	// Initialize graph visibility from localStorage
+	useEffect(() => {
+		if (queryResponse?.data?.payload?.data?.result) {
+			const { graphVisibilityStates: localStoredVisibilityState } =
+				getLocalStorageGraphVisibilityState({
+					apiResponse: queryResponse.data.payload.data.result,
+					name: 'alert-chart-preview',
+				});
+			setGraphVisibility(localStoredVisibilityState);
+		}
+	}, [queryResponse?.data?.payload?.data?.result]);
+
 	if (queryResponse.data && graphType === PANEL_TYPES.BAR) {
 		const sortedSeriesData = getSortedSeriesData(
 			queryResponse.data?.payload.data.result,
@@ -267,17 +288,62 @@ function ChartPreview({
 		return LegendPosition.RIGHT;
 	}, [queryResponse?.data?.payload?.data?.result?.length, showSideLegend]);
 
-	const resolvedThresholds = useMemo(
+	const options = useMemo(
-		() => getThresholds(thresholds, t, optionName, yAxisUnit),
+		() =>
-		[thresholds, t, optionName, yAxisUnit],
+			getUPlotChartOptions({
+				id: 'alert_legend_widget',
+				yAxisUnit,
+				apiResponse: queryResponse?.data?.payload,
+				dimensions: {
+					height: containerDimensions?.height ? containerDimensions.height - 48 : 0,
+					width: containerDimensions?.width,
+				},
+				minTimeScale,
+				maxTimeScale,
+				isDarkMode,
+				onDragSelect,
+				thresholds: getThresholds(thresholds, t, optionName, yAxisUnit),
+				softMax: null,
+				softMin: null,
+				panelType: graphType,
+				tzDate: (timestamp: number) =>
+					uPlot.tzDate(new Date(timestamp * 1e3), timezone.value),
+				timezone: timezone.value,
+				currentQuery,
+				query: query || currentQuery,
+				graphsVisibilityStates: graphVisibility,
+				setGraphsVisibilityStates: setGraphVisibility,
+				enhancedLegend: true,
+				legendPosition,
+				legendScrollPosition: legendScrollPositionRef.current,
+				setLegendScrollPosition: (position: {
+					scrollTop: number;
+					scrollLeft: number;
+				}) => {
+					legendScrollPositionRef.current = position;
+				},
+			}),
+		[
+			yAxisUnit,
+			queryResponse?.data?.payload,
+			containerDimensions,
+			minTimeScale,
+			maxTimeScale,
+			isDarkMode,
+			onDragSelect,
+			thresholds,
+			t,
+			optionName,
+			graphType,
+			timezone.value,
+			currentQuery,
+			query,
+			graphVisibility,
+			legendPosition,
+		],
 	);
 
-	const chartData = useMemo(() => {
+	const chartData = getUPlotChartData(queryResponse?.data?.payload);
-		if (!queryResponse?.data?.payload) {
-			return [];
-		}
-		return prepareChartData(queryResponse?.data?.payload);
-	}, [queryResponse?.data?.payload]);
 
 	const hasResultData = !!queryResponse?.data?.payload?.data?.result?.length;
 
@@ -295,14 +361,6 @@ function ChartPreview({
 			?.active || false;
 
 	const isWarning = !isEmpty(queryResponse.data?.warning);
-
-	const chartWidth = containerDimensions?.width
-		? containerDimensions.width - CHART_PREVIEW_CONTAINER_PADDING
-		: 0;
-	const chartHeight = containerDimensions?.height
-		? containerDimensions.height - CHART_PREVIEW_HEADER_HEIGHT
-		: 0;
-
 	return (
 		<div className="alert-chart-container" ref={graphRef}>
 			<ChartContainer>
@@ -326,22 +384,16 @@ function ChartPreview({
 					)}
 
 					{chartDataAvailable && !isAnomalyDetectionAlert && (
-						<ChartContent
+						<GridPanelSwitch
+							options={options}
 							panelType={graphType}
-							alertId={alertDef?.id}
-							query={query || currentQuery}
-							apiResponse={queryResponse.data?.payload}
 							data={chartData}
-							thresholds={resolvedThresholds}
+							name={name || 'Chart Preview'}
+							panelData={
+								queryResponse.data?.payload?.data?.newResult?.data?.result || []
+							}
+							query={query || initialQueriesMap.metrics}
 							yAxisUnit={yAxisUnit}
-							legendPosition={legendPosition}
-							isDarkMode={isDarkMode}
-							timezone={timezone}
-							width={chartWidth}
-							height={chartHeight}
-							minTimeScale={minTimeScale}
-							maxTimeScale={maxTimeScale}
-							onDragSelect={onDragSelect}
 						/>
 					)}
 

frontend/src/container/FormAlertRules/ChartPreview/utils.ts

@@ -1,10 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
-import { ExecStats } from 'api/v5/v5';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { Threshold } from 'container/CreateAlertV2/context/types';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import {
 	BooleanFormats,
@@ -15,20 +11,6 @@ import {
 	TimeFormats,
 } from 'container/NewWidget/RightContainer/types';
 import { TFunction } from 'i18next';
-import { getLegend } from 'lib/dashboard/getQueryResults';
-import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DrawStyle,
-	FillMode,
-	LineInterpolation,
-	LineStyle,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { hasSingleVisiblePoint } from 'lib/uPlotV2/utils/dataUtils';
-import { get } from 'lodash-es';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import {
 	dataFormatConfig,
@@ -38,8 +20,6 @@ import {
 	timeUnitsConfig,
 } from './config';
 
-const CHART_ID_PREFIX = 'alert_legend_widget';
-
 export function covertIntoDataFormats({
 	value,
 	sourceUnit,
@@ -162,110 +142,3 @@ export const getThresholds = (
 	});
 	return thresholdsToReturn;
 };
-
-export type AlertChartPanelType = PANEL_TYPES.TIME_SERIES | PANEL_TYPES.BAR;
-
-export interface BuildAlertChartConfigParams {
-	id: string;
-	panelType: AlertChartPanelType;
-	query: Query;
-	thresholds: ThresholdProps[];
-	apiResponse?: MetricRangePayloadProps;
-	yAxisUnit?: string;
-	isDarkMode: boolean;
-	timezone: Timezone;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-	onDragSelect: (startTime: number, endTime: number) => void;
-	onClick?: OnClickPluginOpts['onClick'];
-}
-
-export const buildAlertChartConfig = ({
-	id,
-	panelType,
-	query,
-	thresholds,
-	apiResponse,
-	yAxisUnit,
-	isDarkMode,
-	timezone,
-	minTimeScale,
-	maxTimeScale,
-	onDragSelect,
-	onClick,
-}: BuildAlertChartConfigParams): UPlotConfigBuilder => {
-	const stepIntervals: ExecStats['stepIntervals'] = get(
-		apiResponse,
-		'data.newResult.meta.stepIntervals',
-		{},
-	);
-	const stepIntervalValues = Object.values(stepIntervals);
-	const minStepInterval = stepIntervalValues.length
-		? Math.min(...stepIntervalValues)
-		: undefined;
-
-	const builder = buildBaseConfig({
-		id,
-		panelType,
-		panelMode: PanelMode.DASHBOARD_VIEW,
-		thresholds,
-		apiResponse,
-		yAxisUnit,
-		isDarkMode,
-		timezone,
-		minTimeScale,
-		maxTimeScale,
-		stepInterval: minStepInterval,
-		onDragSelect,
-		onClick,
-	});
-
-	const seriesList = apiResponse?.data?.result;
-	if (!seriesList?.length) {
-		return builder;
-	}
-
-	const isBar = panelType === PANEL_TYPES.BAR;
-
-	seriesList.forEach((series) => {
-		const baseLabelName = getLabelName(
-			series.metric,
-			series.queryName || '',
-			series.legend || '',
-		);
-		const label = query ? getLegend(series, query, baseLabelName) : baseLabelName;
-
-		if (isBar) {
-			builder.addSeries({
-				scaleKey: 'y',
-				drawStyle: DrawStyle.Bar,
-				label,
-				colorMapping: {},
-				isDarkMode,
-				stepInterval: get(stepIntervals, series.queryName, undefined),
-			});
-			return;
-		}
-
-		const hasSingleValidPoint = hasSingleVisiblePoint(series.values);
-		builder.addSeries({
-			scaleKey: 'y',
-			drawStyle: hasSingleValidPoint ? DrawStyle.Points : DrawStyle.Line,
-			label,
-			colorMapping: {},
-			spanGaps: true,
-			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
-			showPoints: hasSingleValidPoint,
-			pointSize: 5,
-			fillMode: FillMode.None,
-			isDarkMode,
-			metric: series.metric,
-		});
-	});
-
-	return builder;
-};
-
-export const buildChartId = (id?: string): string =>
-	id ? `${CHART_ID_PREFIX}_${id}` : CHART_ID_PREFIX;

frontend/src/container/FormAlertRules/index.tsx

@@ -719,6 +719,7 @@ function FormAlertRules({
 					panelType={panelType || PANEL_TYPES.TIME_SERIES}
 				/>
 			}
+			name=""
 			query={stagedQuery}
 			selectedInterval={globalSelectedInterval}
 			alertDef={alertDef}
@@ -738,6 +739,7 @@ function FormAlertRules({
 					panelType={panelType || PANEL_TYPES.TIME_SERIES}
 				/>
 			}
+			name="Chart Preview"
 			query={stagedQuery}
 			alertDef={alertDef}
 			selectedInterval={globalSelectedInterval}

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -6,8 +6,7 @@ import { useIsFetching } from 'react-query';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
+import { Button, Form, Input, Modal } from 'antd';
-import { Button, Form, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -5,12 +5,12 @@ import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
 import {
 	Col,
 	Collapse,
 	DatePicker,
 	Form,
+	Input,
 	InputNumber,
 	Modal,
 	Row,

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
+import { Form, Input } from 'antd';
-import { Form } from 'antd';
 import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
 
 function RenderConnectionFields({

frontend/src/container/Licenses/ApplyLicenseForm.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
+import { Button, Form, Input } from 'antd';
-import { Button, Form } from 'antd';
 import apply from 'api/v3/licenses/post';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { ChangeEvent, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Button, Input, Modal } from 'antd';
-import { Button, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
 import DockerIcon from 'assets/CustomIcons/DockerIcon';

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -12,11 +12,11 @@ import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
 import {
 	Button,
 	Dropdown,
 	Flex,
+	Input,
 	MenuProps,
 	Modal,
 	Popover,

frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LoaderCircle, Check } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
+import { Button, Input, Space } from 'antd';
-import { Button, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/container/LogDetailedView/Overview.tsx

@@ -2,9 +2,8 @@ import { ReactNode, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Collapse, Divider, Tag } from 'antd';
+import { Collapse, Divider, Input, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';

frontend/src/container/LogsFilters/index.tsx

@@ -2,8 +2,7 @@ import { ChangeEvent, useCallback, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { CirclePlus, X } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
+import { Col, Input } from 'antd';
-import { Col } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import { AppState } from 'store/reducers';

frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx

@@ -2,8 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { SquareX, X } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
+import { Button, Input, Select } from 'antd';
-import { Button, Select } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import {
 	ConditionalOperators,

frontend/src/container/MetricsApplication/Tabs/External.tsx

@@ -263,7 +263,7 @@ function External(): JSX.Element {
 							timestamp: selectedTimeStamp,
 							domainName: selectedData?.address || '',
 							isError: true,
-							stepInterval: 300,
+							stepInterval,
 							safeNavigate,
 						})}
 					/>
@@ -306,7 +306,7 @@ function External(): JSX.Element {
 							timestamp: selectedTimeStamp,
 							domainName: selectedData?.address,
 							isError: false,
-							stepInterval: 300,
+							stepInterval,
 							safeNavigate,
 						})}
 					/>
@@ -352,7 +352,7 @@ function External(): JSX.Element {
 							timestamp: selectedTimeStamp,
 							domainName: selectedData?.address,
 							isError: false,
-							stepInterval: 300,
+							stepInterval,
 							safeNavigate,
 						})}
 					/>
@@ -395,7 +395,7 @@ function External(): JSX.Element {
 							timestamp: selectedTimeStamp,
 							domainName: selectedData?.address,
 							isError: false,
-							stepInterval: 300,
+							stepInterval,
 							safeNavigate,
 						})}
 					/>

frontend/src/container/MetricsApplication/Tabs/util.ts

@@ -151,7 +151,7 @@ export function onViewAPIMonitoringPopupClick({
 	safeNavigate,
 }: OnViewAPIMonitoringPopupClickProps): (e?: React.MouseEvent) => void {
 	return (e?: React.MouseEvent): void => {
-		const endTime = timestamp + (stepInterval || 60);
+		const endTime = timestamp;
 		const startTime = timestamp - (stepInterval || 60);
 		const filters = {
 			items: [

frontend/src/container/MetricsExplorer/Inspect/MetricTimeAggregation.tsx

@@ -1,7 +1,6 @@
+import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-// TODO(@signozhq/ui-input): migrate this <Input> once @signozhq/ui Input
+import { Select } from 'antd';
-// supports the `onWheel` handler (used to blur on scroll for number inputs).
-import { Input, Select } from 'antd';
 import classNames from 'classnames';
 
 import { TIME_AGGREGATION_OPTIONS } from './constants';

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import type { TableColumnsType as ColumnsType } from 'antd';
-import { Input } from '@signozhq/ui/input';
+import { Button, Collapse, Input, Select, Spin } from 'antd';
-import { Button, Collapse, Select, Spin } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import {

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx

@@ -7,8 +7,7 @@ import {
 	DropResult,
 } from 'react-beautiful-dnd';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
+import { Button, Divider, Dropdown, Input, MenuProps, Tooltip } from 'antd';
-import { Button, Divider, Dropdown, MenuProps, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { FieldDataType } from 'api/v5/v5';
 import { SOMETHING_WENT_WRONG } from 'constants/api';

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-// TODO(@signozhq/ui-input): migrate <Input> once @signozhq/ui Input
+import { Button, Col, Form, Input as AntInput, Input, Row } from 'antd';
-// supports the `spellCheck` prop on the URL input below.
-import { Button, Col, Form, Input, Input as AntInput, Row } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CONTEXT_LINK_FIELDS } from 'container/NewWidget/RightContainer/ContextLinks/constants';
 import {

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Blocks, Check, LoaderCircle } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
+import { Button, Card, Form, Input, Select, Space } from 'antd';
-import { Button, Card, Form, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, Server, LoaderCircle } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
+import { Button, Card, Form, Input, Space } from 'antd';
-import { Button, Card, Form, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx

@@ -1,7 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { Plus, Trash2 } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
+import { Button, Form, FormInstance, Input, Select, Space } from 'antd';
-import { Button, Form, FormInstance, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 

frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/NameInput.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
+import { Form, Input } from 'antd';
-import { Form } from 'antd';
+
 import { ProcessorFormField } from '../../AddNewProcessor/config';
 import { formValidationRules } from '../../config';
 

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/CSVInput.tsx

@@ -1,6 +1,4 @@
 import { ChangeEventHandler, useState } from 'react';
-// TODO(@signozhq/ui-input): migrate to @signozhq/ui Input once the antd
-// `InputProps` spread (`size`, etc.) is no longer needed on this wrapper.
 import { Input, InputProps } from 'antd';
 
 function CSVInput({ value, onChange, ...otherProps }: InputProps): JSX.Element {

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Info } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Flex, Form, Space, Tooltip } from 'antd';
+import { Flex, Form, Input, Space, Tooltip } from 'antd';
 import { ProcessorData } from 'types/api/pipeline/def';
 
 import { PREDEFINED_MAPPING } from '../config';

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx

@@ -1,7 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
+import { Form, Input, Select, Space } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
-import { Form, Select, Space } from 'antd';
 import { ModalFooterTitle } from 'container/PipelinePage/styles';
 import { ProcessorData } from 'types/api/pipeline/def';
 

frontend/src/container/PlannedDowntime/PlannedDowntime.tsx

@@ -2,8 +2,7 @@ import React, { ChangeEvent, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Plus, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
+import { Button, Flex, Form, Input, Tooltip } from 'antd';
-import { Button, Flex, Form, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useDeleteDowntimeScheduleByID,

frontend/src/container/QueryBuilder/components/Formula/Formula.styles.scss

@@ -8,16 +8,4 @@
 	grid-template-columns: 60% 35%;
 	justify-content: space-between;
 	gap: 16px;
-
-	.input-with-label {
-		.label {
-			box-sizing: border-box;
-			height: 36px;
-		}
-
-		.input {
-			box-sizing: border-box;
-			height: 36px;
-		}
-	}
 }

frontend/src/container/QueryTable/Drilldown/BreakoutOptions.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { Input } from '@signozhq/ui/input';
+import { Input, Skeleton } from 'antd';
-import { Skeleton } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';

frontend/src/container/RoutingPolicies/RoutingPolicies.tsx

@@ -1,8 +1,7 @@
 import { ChangeEvent, useMemo } from 'react';
 import { Plus, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
+import { Button, Flex, Input, Tooltip } from 'antd';
-import { Button, Flex, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';

frontend/src/container/SpanDetailsDrawer/Events/Events.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Collapse, Input, Modal } from 'antd';
-import { Collapse, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { Diamond } from '@signozhq/icons';

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx

@@ -9,10 +9,10 @@ import {
 	useState,
 } from 'react';
 import { useMutation, useQuery } from 'react-query';
-import { Input } from '@signozhq/ui/input';
 import {
 	Button,
 	Checkbox,
+	Input,
 	Modal,
 	Select,
 	Skeleton,

frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts

@@ -1,7 +1,5 @@
-// TODO(@signozhq/ui-input): migrate this styled(Input) once @signozhq/ui
-// Input supports `addonAfter` (the consumer renders `<InputComponent addonAfter="ms">`).
-import { Typography } from '@signozhq/ui/typography';
 import { Input } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import styled from 'styled-components';
 
 export const DurationText = styled.div`

frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx

@@ -8,8 +8,7 @@ import {
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { Input } from '@signozhq/ui/input';
+import { AutoComplete, Input } from 'antd';
-import { AutoComplete } from 'antd';
 import getTagFilters from 'api/trace/getTagFilter';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/container/Trace/TraceGraphFilter/index.tsx

@@ -2,8 +2,7 @@ import { useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { Input } from '@signozhq/ui/input';
+import { AutoComplete, Input, Space } from 'antd';
-import { AutoComplete, Space } from 'antd';
 import getTagFilters from 'api/trace/getTagFilter';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -1,7 +1,6 @@
 import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { ArrowLeft, Check, Loader, Plus, Search } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
+import { Button, Input, Spin } from 'antd';
-import { Button, Spin } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import SignozModal from 'components/SignozModal/SignozModal';

frontend/src/container/Version/styles.ts

@@ -1,4 +1,4 @@
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
 import styled from 'styled-components';
 
 export const InputComponent = styled(Input)`

frontend/src/lib/uPlotV2/utils/dataUtils.ts

@@ -1,9 +1,3 @@
-import {
-	fillMissingXAxisTimestamps,
-	getXAxisTimestamps,
-} from 'container/DashboardContainer/visualization/panels/utils';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
 /**
  * Checks if a value is invalid for plotting
  *
@@ -58,28 +52,6 @@ export function normalizePlotValue(
 	return value as number;
 }
 
-/**
- * Returns true if at most one entry in `values` is a valid plot value.
- *
- * Used to decide whether a series should render as a single point (drawStyle:
- * Points) vs a line — a continuous line with only one visible sample is
- * invisible to the user.
- */
-export function hasSingleVisiblePoint(
-	values: ReadonlyArray<readonly [unknown, unknown]> | undefined,
-): boolean {
-	let validPointCount = 0;
-	for (const [, rawValue] of values ?? []) {
-		if (!isInvalidPlotValue(rawValue)) {
-			validPointCount += 1;
-			if (validPointCount > 1) {
-				return false;
-			}
-		}
-	}
-	return true;
-}
-
 export interface SeriesSpanGapsOption {
 	spanGaps?: boolean | number;
 }
@@ -254,21 +226,3 @@ export function applySpanGapsToAlignedData(
 
 	return [newX, ...transformedSeries] as uPlot.AlignedData;
 }
-
-/** * Transforms raw API response into aligned data format expected by uPlot.
- *
- * The API response contains multiple series of time-value pairs, each with its
- * own set of timestamps. uPlot requires a single shared x-axis (timestamps)
- * and separate y-value arrays for each series, aligned by index. This function
- * extracts the unique sorted timestamps across all series and fills in missing
- * values with null to maintain alignment.
- */
-export const prepareChartData = (
-	apiResponse: MetricRangePayloadProps,
-): uPlot.AlignedData => {
-	const seriesList = apiResponse?.data?.result || [];
-	const timestampArr = getXAxisTimestamps(seriesList);
-	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
-
-	return [timestampArr, ...yAxisValuesArr];
-};

frontend/src/pages/MessagingQueues/MQDetails/DropRateView/EvaluationTimeSelector.tsx

@@ -1,6 +1,5 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Input, Select } from 'antd';
-import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import './DropRateView.styles.scss';

frontend/src/pages/SaveView/SaveView.styles.scss

@@ -28,10 +28,6 @@
 		.learn-more {
 			font-size: 14px;
 		}
-		.search-input-container {
-			margin-top: 16px;
-			margin-bottom: 8px;
-		}
 
 		.ant-input-affix-wrapper {
 			margin-top: 16px;

frontend/src/pages/SaveView/index.tsx

@@ -3,8 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
+import { ColorPicker, Input, Modal, Table, TableProps } from 'antd';
-import { ColorPicker, Modal, Table, TableProps } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import {
@@ -312,15 +311,12 @@ function SaveView(): JSX.Element {
 						Learn more
 					</Typography.Link>
 				</Typography.Text>
-				<div className="search-input-container">
+				<Input
-					<Input
+					placeholder="Search for views..."
-						placeholder="Search for views..."
+					prefix={<Search size={12} color={Color.BG_VANILLA_400} />}
-						prefix={<Search size={12} color={Color.BG_VANILLA_400} />}
+					value={searchValue}
-						value={searchValue}
+					onChange={handleSearch}
-						onChange={handleSearch}
+				/>
-						className="search-input"
-					/>
-				</div>
 
 				<Table
 					columns={columns}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentilePanel.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
+import { Checkbox, Input, Select, Skeleton } from 'antd';
-import { Checkbox, Select, Skeleton } from 'antd';
 import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -1,7 +1,6 @@
 import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
+import { Input, Spin } from 'antd';
-import { Spin } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import SignozModal from 'components/SignozModal/SignozModal';

frontend/src/pages/TracesFunnels/components/RenameFunnel/RenameFunnel.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
 import SignozModal from 'components/SignozModal/SignozModal';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useRenameFunnel } from 'hooks/TracesFunnels/useFunnels';

frontend/src/pages/TracesFunnels/components/SearchBar/SearchBar.styles.scss

@@ -9,10 +9,10 @@
 		.ant-input-prefix {
 			margin-inline-end: 6px;
 		}
-
 		&,
 		input {
 			font-family: Inter;
+			background: var(--l2-background);
 			font-size: 14px;
 			line-height: 18px;
 			font-style: normal;

frontend/src/pages/TracesFunnels/components/SearchBar/SearchBar.tsx

@@ -1,7 +1,6 @@
 import { ChangeEvent } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
+import { Button, Input, Popover, Tooltip } from 'antd';
-import { Button, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { ArrowDownWideNarrow, Check, Plus, Search } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';

frontend/src/periscope.scss

@@ -204,12 +204,5 @@
 		background: var(--l2-background);
 		height: 38px;
 		width: 38px;
-
-		&:focus:not(:focus-visible),
-		&.ant-btn:focus:not(:focus-visible) {
-			border-color: var(--l2-border);
-			outline: none;
-			box-shadow: none;
-		}
 	}
 }

pkg/modules/tracedetail/impltracedetail/waterfall_test.go

@@ -97,7 +97,7 @@ func makeChain(n int) (*spantypes.WaterfallSpan, map[string]*spantypes.Waterfall
 }
 
 func getWaterfallTrace(roots []*spantypes.WaterfallSpan, spanMap map[string]*spantypes.WaterfallSpan) *spantypes.WaterfallTrace {
-	return spantypes.NewWaterfallTrace(0, 0, uint64(len(spanMap)), 0, spanMap, roots, false)
+	return spantypes.NewWaterfallTrace(0, 0, uint64(len(spanMap)), 0, spanMap, nil, roots, false)
 }
 
 // ─────────────────────────────────────────────────────────────────────────────

pkg/types/spantypes/aggregation_test.go

@@ -33,7 +33,7 @@ func buildTraceFromSpans(spans ...*WaterfallSpan) *WaterfallTrace {
 			endTime = end
 		}
 	}
-	return NewWaterfallTrace(startTime, endTime, uint64(len(spanMap)), 0, spanMap, nil, false)
+	return NewWaterfallTrace(startTime, endTime, uint64(len(spanMap)), 0, spanMap, nil, nil, false)
 }
 
 var (

pkg/types/spantypes/waterfall_trace.go

@@ -20,45 +20,50 @@ type TraceSummary struct {
 
 // WaterfallTrace holds processed trace data with childern populated in spans.
 type WaterfallTrace struct {
-	StartTime           uint64                    `json:"startTime"`
+	StartTime                     uint64                    `json:"startTime"`
-	EndTime             uint64                    `json:"endTime"`
+	EndTime                       uint64                    `json:"endTime"`
-	TotalSpans          uint64                    `json:"totalSpans"`
+	TotalSpans                    uint64                    `json:"totalSpans"`
-	TotalErrorSpans     uint64                    `json:"totalErrorSpans"`
+	TotalErrorSpans               uint64                    `json:"totalErrorSpans"`
-	SpanIDToSpanNodeMap map[string]*WaterfallSpan `json:"spanIdToSpanNodeMap"`
+	ServiceNameToTotalDurationMap map[string]uint64         `json:"serviceNameToTotalDurationMap"`
-	TraceRoots          []*WaterfallSpan          `json:"traceRoots"`
+	SpanIDToSpanNodeMap           map[string]*WaterfallSpan `json:"spanIdToSpanNodeMap"`
-	HasMissingSpans     bool                      `json:"hasMissingSpans"`
+	TraceRoots                    []*WaterfallSpan          `json:"traceRoots"`
+	HasMissingSpans               bool                      `json:"hasMissingSpans"`
 }
 
 // GettableWaterfallTrace is the response for the v3 waterfall API.
 type GettableWaterfallTrace struct {
-	StartTimestampMillis  uint64                  `json:"startTimestampMillis"`
+	StartTimestampMillis  uint64 `json:"startTimestampMillis"`
-	EndTimestampMillis    uint64                  `json:"endTimestampMillis"`
+	EndTimestampMillis    uint64 `json:"endTimestampMillis"`
-	RootServiceName       string                  `json:"rootServiceName"`
+	RootServiceName       string `json:"rootServiceName"`
-	RootServiceEntryPoint string                  `json:"rootServiceEntryPoint"`
+	RootServiceEntryPoint string `json:"rootServiceEntryPoint"`
-	TotalSpansCount       uint64                  `json:"totalSpansCount"`
+	TotalSpansCount       uint64 `json:"totalSpansCount"`
-	TotalErrorSpansCount  uint64                  `json:"totalErrorSpansCount"`
+	TotalErrorSpansCount  uint64 `json:"totalErrorSpansCount"`
-	Spans                 []*WaterfallSpan        `json:"spans"`
+	// Deprecated: use Aggregations with SpanAggregationExecutionTimePercentage on the service.name field instead.
-	HasMissingSpans       bool                    `json:"hasMissingSpans"`
+	ServiceNameToTotalDurationMap map[string]uint64       `json:"serviceNameToTotalDurationMap"`
-	UncollapsedSpans      []string                `json:"uncollapsedSpans"`
+	Spans                         []*WaterfallSpan        `json:"spans"`
-	HasMore               bool                    `json:"hasMore"`
+	HasMissingSpans               bool                    `json:"hasMissingSpans"`
-	Aggregations          []SpanAggregationResult `json:"aggregations"`
+	UncollapsedSpans              []string                `json:"uncollapsedSpans"`
+	HasMore                       bool                    `json:"hasMore"`
+	Aggregations                  []SpanAggregationResult `json:"aggregations"`
 }
 
 // NewWaterfallTrace constructs a WaterfallTrace from processed span data.
 func NewWaterfallTrace(
 	startTime, endTime, totalSpans, totalErrorSpans uint64,
 	spanIDToSpanNodeMap map[string]*WaterfallSpan,
+	serviceNameToTotalDurationMap map[string]uint64,
 	traceRoots []*WaterfallSpan,
 	hasMissingSpans bool,
 ) *WaterfallTrace {
 	return &WaterfallTrace{
-		StartTime:           startTime,
+		StartTime:                     startTime,
-		EndTime:             endTime,
+		EndTime:                       endTime,
-		TotalSpans:          totalSpans,
+		TotalSpans:                    totalSpans,
-		TotalErrorSpans:     totalErrorSpans,
+		TotalErrorSpans:               totalErrorSpans,
-		SpanIDToSpanNodeMap: spanIDToSpanNodeMap,
+		SpanIDToSpanNodeMap:           spanIDToSpanNodeMap,
-		TraceRoots:          traceRoots,
+		ServiceNameToTotalDurationMap: serviceNameToTotalDurationMap,
-		HasMissingSpans:     hasMissingSpans,
+		TraceRoots:                    traceRoots,
+		HasMissingSpans:               hasMissingSpans,
 	}
 }
 
@@ -119,6 +124,7 @@ func NewWaterfallTraceFromSpans(spans []StorableSpan) *WaterfallTrace {
 		uint64(len(spans)),
 		totalErrorSpans,
 		spanIDToSpanNodeMap,
+		calculateServiceTime(spanIDToSpanNodeMap),
 		traceRoots,
 		hasMissingSpans,
 	)
@@ -200,19 +206,23 @@ func (wt *WaterfallTrace) CalculateUncollapsedSpanIDs(uncollapsedSpanIDs []strin
 }
 
 func (wt *WaterfallTrace) Clone() cachetypes.Cacheable {
+	copyOfServiceNameToTotalDurationMap := make(map[string]uint64)
+	maps.Copy(copyOfServiceNameToTotalDurationMap, wt.ServiceNameToTotalDurationMap)
+
 	copyOfSpanIDToSpanNodeMap := make(map[string]*WaterfallSpan)
 	maps.Copy(copyOfSpanIDToSpanNodeMap, wt.SpanIDToSpanNodeMap)
 
 	copyOfTraceRoots := make([]*WaterfallSpan, len(wt.TraceRoots))
 	copy(copyOfTraceRoots, wt.TraceRoots)
 	return &WaterfallTrace{
-		StartTime:           wt.StartTime,
+		StartTime:                     wt.StartTime,
-		EndTime:             wt.EndTime,
+		EndTime:                       wt.EndTime,
-		TotalSpans:          wt.TotalSpans,
+		TotalSpans:                    wt.TotalSpans,
-		TotalErrorSpans:     wt.TotalErrorSpans,
+		TotalErrorSpans:               wt.TotalErrorSpans,
-		SpanIDToSpanNodeMap: copyOfSpanIDToSpanNodeMap,
+		ServiceNameToTotalDurationMap: copyOfServiceNameToTotalDurationMap,
-		TraceRoots:          copyOfTraceRoots,
+		SpanIDToSpanNodeMap:           copyOfSpanIDToSpanNodeMap,
-		HasMissingSpans:     wt.HasMissingSpans,
+		TraceRoots:                    copyOfTraceRoots,
+		HasMissingSpans:               wt.HasMissingSpans,
 	}
 }
 
@@ -247,6 +257,11 @@ func NewGettableWaterfallTrace(
 		rootServiceEntryPoint = traceData.TraceRoots[0].Name
 	}
 
+	serviceDurationsMillis := make(map[string]uint64, len(traceData.ServiceNameToTotalDurationMap))
+	for svc, dur := range traceData.ServiceNameToTotalDurationMap {
+		serviceDurationsMillis[svc] = dur / 1_000_000
+	}
+
 	// convert start timestamp to millis because client is expecting it in millis
 	for _, span := range selectedSpans {
 		span.TimeUnix = span.TimeUnix / 1_000_000
@@ -262,17 +277,18 @@ func NewGettableWaterfallTrace(
 	}
 
 	return &GettableWaterfallTrace{
-		Spans:                 selectedSpans,
+		Spans:                         selectedSpans,
-		UncollapsedSpans:      uncollapsedSpans,
+		UncollapsedSpans:              uncollapsedSpans,
-		StartTimestampMillis:  traceData.StartTime / 1_000_000,
+		StartTimestampMillis:          traceData.StartTime / 1_000_000,
-		EndTimestampMillis:    traceData.EndTime / 1_000_000,
+		EndTimestampMillis:            traceData.EndTime / 1_000_000,
-		TotalSpansCount:       traceData.TotalSpans,
+		TotalSpansCount:               traceData.TotalSpans,
-		TotalErrorSpansCount:  traceData.TotalErrorSpans,
+		TotalErrorSpansCount:          traceData.TotalErrorSpans,
-		RootServiceName:       rootServiceName,
+		RootServiceName:               rootServiceName,
-		RootServiceEntryPoint: rootServiceEntryPoint,
+		RootServiceEntryPoint:         rootServiceEntryPoint,
-		HasMissingSpans:       traceData.HasMissingSpans,
+		ServiceNameToTotalDurationMap: serviceDurationsMillis,
-		HasMore:               !selectAllSpans,
+		HasMissingSpans:               traceData.HasMissingSpans,
-		Aggregations:          aggregations,
+		HasMore:                       !selectAllSpans,
+		Aggregations:                  aggregations,
 	}
 }
 
@@ -295,6 +311,21 @@ func windowAroundIndex(selectedIndex, total int, spanLimitPerRequest float64) (s
 	return
 }
 
+func calculateServiceTime(spanIDToSpanNodeMap map[string]*WaterfallSpan) map[string]uint64 {
+	serviceSpans := make(map[string][]*WaterfallSpan)
+	for _, span := range spanIDToSpanNodeMap {
+		if span.ServiceName != "" {
+			serviceSpans[span.ServiceName] = append(serviceSpans[span.ServiceName], span)
+		}
+	}
+
+	totalTimes := make(map[string]uint64)
+	for service, spans := range serviceSpans {
+		totalTimes[service] = mergeSpanIntervals(spans)
+	}
+	return totalTimes
+}
+
 // mergeSpanIntervals computes non-overlapping execution time for a set of spans.
 func mergeSpanIntervals(spans []*WaterfallSpan) uint64 {
 	if len(spans) == 0 {