refactor: switch group by instead of triggering aggregation

Using FINAL in clickhouse query will trigger the aggregation
merge of data while using group by will be more efficient.
It's recommended id docs as well - https://clickhouse.com/
docs/engines/table-engines/mergetree-family/
aggregatingmergetree#select-and-insert

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

@@ -1,91 +0,0 @@
-import { useCallback, useRef } from 'react';
-import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
-import Legend from 'lib/uPlotV2/components/Legend/Legend';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import UPlotChart from 'lib/uPlotV2/components/UPlotChart';
-import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
-import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
-import noop from 'lodash-es/noop';
-import uPlot from 'uplot';
-
-import { ChartProps } from '../types';
-
-const TOOLTIP_WIDTH_PADDING = 60;
-const TOOLTIP_MIN_WIDTH = 200;
-
-export default function ChartWrapper({
-	legendConfig = { position: LegendPosition.BOTTOM },
-	config,
-	data,
-	width: containerWidth,
-	height: containerHeight,
-	showTooltip = true,
-	canPinTooltip = false,
-	syncMode,
-	syncKey,
-	onDestroy = noop,
-	children,
-	layoutChildren,
-	renderTooltip,
-	'data-testid': testId,
-}: ChartProps): JSX.Element {
-	const plotInstanceRef = useRef<uPlot | null>(null);
-
-	const legendComponent = useCallback(
-		(averageLegendWidth: number): React.ReactNode => {
-			return (
-				<Legend
-					config={config}
-					position={legendConfig.position}
-					averageLegendWidth={averageLegendWidth}
-				/>
-			);
-		},
-		[config, legendConfig.position],
-	);
-
-	return (
-		<PlotContextProvider>
-			<ChartLayout
-				config={config}
-				containerWidth={containerWidth}
-				containerHeight={containerHeight}
-				legendConfig={legendConfig}
-				legendComponent={legendComponent}
-				layoutChildren={layoutChildren}
-			>
-				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
-					<UPlotChart
-						config={config}
-						data={data}
-						width={chartWidth}
-						height={chartHeight}
-						plotRef={(plot): void => {
-							plotInstanceRef.current = plot;
-						}}
-						onDestroy={(plot: uPlot): void => {
-							plotInstanceRef.current = null;
-							onDestroy(plot);
-						}}
-						data-testid={testId}
-					>
-						{children}
-						{showTooltip && (
-							<TooltipPlugin
-								config={config}
-								canPinTooltip={canPinTooltip}
-								syncMode={syncMode}
-								maxWidth={Math.max(
-									TOOLTIP_MIN_WIDTH,
-									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
-								)}
-								syncKey={syncKey}
-								render={renderTooltip}
-							/>
-						)}
-					</UPlotChart>
-				)}
-			</ChartLayout>
-		</PlotContextProvider>
-	);
-}

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

@@ -1,32 +1,104 @@
-import { useCallback } from 'react';
-import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
-import TimeSeriesTooltip from 'lib/uPlotV2/components/Tooltip/TimeSeriesTooltip';
+import { useCallback, useRef } from 'react';
+import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
+import Legend from 'lib/uPlotV2/components/Legend/Legend';
+import Tooltip from 'lib/uPlotV2/components/Tooltip/Tooltip';
 import {
-	TimeSeriesTooltipProps,
+	LegendPosition,
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
+import UPlotChart from 'lib/uPlotV2/components/UPlotChart';
+import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
+import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
+import _noop from 'lodash-es/noop';
+import uPlot from 'uplot';
 
-import { TimeSeriesChartProps } from '../types';
+import { ChartProps } from '../types';
 
-export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
-	const { children, ...rest } = props;
+const TOOLTIP_WIDTH_PADDING = 60;
+const TOOLTIP_MIN_WIDTH = 200;
 
-	const renderTooltip = useCallback(
-		(props: TooltipRenderArgs): React.ReactNode => {
-			const tooltipProps: TimeSeriesTooltipProps = {
-				...props,
-				timezone: rest.timezone,
-				yAxisUnit: rest.yAxisUnit,
-				decimalPrecision: rest.decimalPrecision,
-			};
-			return <TimeSeriesTooltip {...tooltipProps} />;
+export default function TimeSeries({
+	legendConfig = { position: LegendPosition.BOTTOM },
+	config,
+	data,
+	width: containerWidth,
+	height: containerHeight,
+	disableTooltip = false,
+	canPinTooltip = false,
+	timezone,
+	yAxisUnit,
+	decimalPrecision,
+	syncMode,
+	syncKey,
+	onDestroy = _noop,
+	children,
+	layoutChildren,
+	'data-testid': testId,
+}: ChartProps): JSX.Element {
+	const plotInstanceRef = useRef<uPlot | null>(null);
+
+	const legendComponent = useCallback(
+		(averageLegendWidth: number): React.ReactNode => {
+			return (
+				<Legend
+					config={config}
+					position={legendConfig.position}
+					averageLegendWidth={averageLegendWidth}
+				/>
+			);
 		},
-		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+		[config, legendConfig.position],
 	);
 
 	return (
-		<ChartWrapper {...rest} renderTooltip={renderTooltip}>
-			{children}
-		</ChartWrapper>
+		<PlotContextProvider>
+			<ChartLayout
+				config={config}
+				containerWidth={containerWidth}
+				containerHeight={containerHeight}
+				legendConfig={legendConfig}
+				legendComponent={legendComponent}
+				layoutChildren={layoutChildren}
+			>
+				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
+					<UPlotChart
+						config={config}
+						data={data}
+						width={chartWidth}
+						height={chartHeight}
+						plotRef={(plot): void => {
+							plotInstanceRef.current = plot;
+						}}
+						onDestroy={(plot: uPlot): void => {
+							plotInstanceRef.current = null;
+							onDestroy(plot);
+						}}
+						data-testid={testId}
+					>
+						{children}
+						{!disableTooltip && (
+							<TooltipPlugin
+								config={config}
+								canPinTooltip={canPinTooltip}
+								syncMode={syncMode}
+								maxWidth={Math.max(
+									TOOLTIP_MIN_WIDTH,
+									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
+								)}
+								syncKey={syncKey}
+								render={(props: TooltipRenderArgs): React.ReactNode => (
+									<Tooltip
+										{...props}
+										timezone={timezone}
+										yAxisUnit={yAxisUnit}
+										decimalPrecision={decimalPrecision}
+									/>
+								)}
+							/>
+						)}
+					</UPlotChart>
+				)}
+			</ChartLayout>
+		</PlotContextProvider>
 	);
 }

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

@@ -1,40 +1,29 @@
 import { PrecisionOption } from 'components/Graph/types';
-import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
+import { LegendConfig } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 
 interface BaseChartProps {
 	width: number;
 	height: number;
-	showTooltip?: boolean;
+	disableTooltip?: boolean;
 	timezone: string;
+	syncMode?: DashboardCursorSync;
+	syncKey?: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-	'data-testid'?: string;
 }
-interface UPlotBasedChartProps {
+
+interface TimeSeriesChartProps extends BaseChartProps {
 	config: UPlotConfigBuilder;
+	legendConfig: LegendConfig;
 	data: uPlot.AlignedData;
-	syncMode?: DashboardCursorSync;
-	syncKey?: string;
 	plotRef?: (plot: uPlot | null) => void;
 	onDestroy?: (plot: uPlot) => void;
 	children?: React.ReactNode;
 	layoutChildren?: React.ReactNode;
+	'data-testid'?: string;
 }
 
-export interface TimeSeriesChartProps
-	extends BaseChartProps,
-		UPlotBasedChartProps {
-	legendConfig: LegendConfig;
-}
-
-export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
-	legendConfig: LegendConfig;
-	isStackedBarChart?: boolean;
-}
-
-export type ChartProps = (TimeSeriesChartProps | BarChartProps) & {
-	renderTooltip: (props: TooltipRenderArgs) => React.ReactNode;
-};
+export type ChartProps = TimeSeriesChartProps;

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

@@ -6,6 +6,7 @@ import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { LineInterpolation } from 'lib/uPlotV2/config/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useTimezone } from 'providers/Timezone';
@@ -72,28 +73,55 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	}, [queryResponse?.data?.payload]);
 
 	const config = useMemo(() => {
+		const tzDate = (timestamp: number): Date =>
+			uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
+
 		return prepareUPlotConfig({
-			widget,
-			isDarkMode,
-			currentQuery: widget.query,
-			onClick: clickHandlerWithContextMenu,
-			onDragSelect,
+			widgetId: widget.id || '',
 			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			timezone,
-			panelMode,
+			tzDate,
 			minTimeScale: minTimeScale,
 			maxTimeScale: maxTimeScale,
+			isLogScale: widget?.isLogScale ?? false,
+			thresholds: {
+				scaleKey: 'y',
+				thresholds: (widget.thresholds || []).map((threshold) => ({
+					thresholdValue: threshold.thresholdValue ?? 0,
+					thresholdColor: threshold.thresholdColor,
+					thresholdUnit: threshold.thresholdUnit,
+					thresholdLabel: threshold.thresholdLabel,
+				})),
+				yAxisUnit: widget.yAxisUnit,
+			},
+			yAxisUnit: widget.yAxisUnit || '',
+			softMin: widget.softMin === undefined ? null : widget.softMin,
+			softMax: widget.softMax === undefined ? null : widget.softMax,
+			spanGaps: false,
+			colorMapping: widget.customLegendColors ?? {},
+			lineInterpolation: LineInterpolation.Spline,
+			isDarkMode,
+			onClick: clickHandlerWithContextMenu,
+			onDragSelect,
+			currentQuery: widget.query,
+			panelMode,
 		});
 	}, [
-		widget,
+		widget.id,
+		maxTimeScale,
+		minTimeScale,
+		timezone.value,
+		widget.customLegendColors,
+		widget.isLogScale,
+		widget.softMax,
+		widget.softMin,
 		isDarkMode,
+		queryResponse?.data?.payload,
+		widget.query,
+		widget.thresholds,
+		widget.yAxisUnit,
+		panelMode,
 		clickHandlerWithContextMenu,
 		onDragSelect,
-		queryResponse?.data?.payload,
-		panelMode,
-		minTimeScale,
-		maxTimeScale,
-		timezone,
 	]);
 
 	const layoutChildren = useMemo(() => {

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

@@ -1,4 +1,3 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	fillMissingXAxisTimestamps,
@@ -6,20 +5,23 @@ import {
 } from 'container/DashboardContainer/visualization/panels/utils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
+import onClickPlugin, {
+	OnClickPluginOpts,
+} from 'lib/uPlotLib/plugins/onClickPlugin';
 import {
+	DistributionType,
 	DrawStyle,
 	LineInterpolation,
 	LineStyle,
+	SelectionPreferencesSource,
 	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { Widgets } from 'types/api/dashboard/getAll';
+import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { PanelMode } from '../types';
-import { buildBaseConfig } from '../utils/baseConfigBuilder';
 
 export const prepareChartData = (
 	apiResponse: MetricRangePayloadProps,
@@ -32,39 +34,112 @@ export const prepareChartData = (
 };
 
 export const prepareUPlotConfig = ({
-	widget,
-	isDarkMode,
-	currentQuery,
-	onClick,
-	onDragSelect,
+	widgetId,
 	apiResponse,
-	timezone,
-	panelMode,
+	tzDate,
 	minTimeScale,
 	maxTimeScale,
+	isLogScale,
+	thresholds,
+	softMin,
+	softMax,
+	spanGaps,
+	colorMapping,
+	lineInterpolation,
+	isDarkMode,
+	currentQuery,
+	onDragSelect,
+	onClick,
+	yAxisUnit,
+	panelMode,
 }: {
-	widget: Widgets;
-	isDarkMode: boolean;
-	currentQuery: Query;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
+	widgetId: string;
 	apiResponse: MetricRangePayloadProps;
-	timezone: Timezone;
+	tzDate: uPlot.LocalDateFromUnix;
+	minTimeScale: number | undefined;
+	maxTimeScale: number | undefined;
+	isLogScale: boolean;
+	softMin: number | null;
+	softMax: number | null;
+	spanGaps: boolean;
+	colorMapping: Record<string, string>;
+	lineInterpolation: LineInterpolation;
+	isDarkMode: boolean;
+	thresholds: ThresholdsDrawHookOptions;
+	currentQuery: Query;
+	yAxisUnit: string;
+	onDragSelect: (startTime: number, endTime: number) => void;
+	onClick?: OnClickPluginOpts['onClick'];
 	panelMode: PanelMode;
-	minTimeScale?: number;
-	maxTimeScale?: number;
 }): UPlotConfigBuilder => {
-	const builder = buildBaseConfig({
-		widget,
-		isDarkMode,
-		onClick,
+	const builder = new UPlotConfigBuilder({
 		onDragSelect,
-		apiResponse,
-		timezone,
-		panelMode,
+		widgetId,
+		tzDate,
+		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
+		selectionPreferencesSource: [
+			PanelMode.DASHBOARD_VIEW,
+			PanelMode.STANDALONE_VIEW,
+		].includes(panelMode)
+			? SelectionPreferencesSource.LOCAL_STORAGE
+			: SelectionPreferencesSource.IN_MEMORY,
+	});
+
+	// X scale – time axis
+	builder.addScale({
+		scaleKey: 'x',
+		time: true,
+		min: minTimeScale,
+		max: maxTimeScale,
+		logBase: isLogScale ? 10 : undefined,
+		distribution: isLogScale
+			? DistributionType.Logarithmic
+			: DistributionType.Linear,
+	});
+
+	// Y scale – value axis, driven primarily by softMin/softMax and data
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+		min: undefined,
+		max: undefined,
+		softMin: softMin ?? undefined,
+		softMax: softMax ?? undefined,
+		thresholds,
+		logBase: isLogScale ? 10 : undefined,
+		distribution: isLogScale
+			? DistributionType.Logarithmic
+			: DistributionType.Linear,
+	});
+
+	builder.addThresholds(thresholds);
+
+	if (typeof onClick === 'function') {
+		builder.addPlugin(
+			onClickPlugin({
+				onClick,
+				apiResponse,
+			}),
+		);
+	}
+
+	builder.addAxis({
+		scaleKey: 'x',
+		show: true,
+		side: 2,
+		isDarkMode,
+		isLogScale: false,
+		panelType: PANEL_TYPES.TIME_SERIES,
+	});
+
+	builder.addAxis({
+		scaleKey: 'y',
+		show: true,
+		side: 3,
+		isDarkMode,
+		isLogScale: false,
+		yAxisUnit,
 		panelType: PANEL_TYPES.TIME_SERIES,
-		minTimeScale,
-		maxTimeScale,
 	});
 
 	apiResponse.data?.result?.forEach((series) => {
@@ -82,16 +157,14 @@ export const prepareUPlotConfig = ({
 			scaleKey: 'y',
 			drawStyle: DrawStyle.Line,
 			label: label,
-			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
+			colorMapping,
+			spanGaps,
 			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
+			lineInterpolation,
 			showPoints: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
-			panelType: PANEL_TYPES.TIME_SERIES,
 		});
 	});
-
 	return builder;
 };

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

@@ -1,127 +0,0 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import onClickPlugin, {
-	OnClickPluginOpts,
-} from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DistributionType,
-	SelectionPreferencesSource,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-
-import { PanelMode } from '../types';
-
-export interface BaseConfigBuilderProps {
-	widget: Widgets;
-	apiResponse: MetricRangePayloadProps;
-	isDarkMode: boolean;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	timezone: Timezone;
-	panelMode: PanelMode;
-	panelType: PANEL_TYPES;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}
-
-export function buildBaseConfig({
-	widget,
-	isDarkMode,
-	onClick,
-	onDragSelect,
-	apiResponse,
-	timezone,
-	panelMode,
-	panelType,
-	minTimeScale,
-	maxTimeScale,
-}: BaseConfigBuilderProps): UPlotConfigBuilder {
-	const tzDate = (timestamp: number): Date =>
-		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
-
-	const builder = new UPlotConfigBuilder({
-		onDragSelect,
-		widgetId: widget.id,
-		tzDate,
-		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
-		selectionPreferencesSource: [
-			PanelMode.DASHBOARD_VIEW,
-			PanelMode.STANDALONE_VIEW,
-		].includes(panelMode)
-			? SelectionPreferencesSource.LOCAL_STORAGE
-			: SelectionPreferencesSource.IN_MEMORY,
-	});
-
-	const thresholdOptions: ThresholdsDrawHookOptions = {
-		scaleKey: 'y',
-		thresholds: (widget.thresholds || []).map((threshold) => ({
-			thresholdValue: threshold.thresholdValue ?? 0,
-			thresholdColor: threshold.thresholdColor,
-			thresholdUnit: threshold.thresholdUnit,
-			thresholdLabel: threshold.thresholdLabel,
-		})),
-		yAxisUnit: widget.yAxisUnit,
-	};
-
-	builder.addThresholds(thresholdOptions);
-
-	builder.addScale({
-		scaleKey: 'x',
-		time: true,
-		min: minTimeScale,
-		max: maxTimeScale,
-		logBase: widget.isLogScale ? 10 : undefined,
-		distribution: widget.isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	// Y scale – value axis, driven primarily by softMin/softMax and data
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		min: undefined,
-		max: undefined,
-		softMin: widget.softMin ?? undefined,
-		softMax: widget.softMax ?? undefined,
-		// thresholds,
-		logBase: widget.isLogScale ? 10 : undefined,
-		distribution: widget.isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	if (typeof onClick === 'function') {
-		builder.addPlugin(
-			onClickPlugin({
-				onClick,
-				apiResponse,
-			}),
-		);
-	}
-
-	builder.addAxis({
-		scaleKey: 'x',
-		show: true,
-		side: 2,
-		isDarkMode,
-		isLogScale: widget.isLogScale,
-		panelType,
-	});
-
-	builder.addAxis({
-		scaleKey: 'y',
-		show: true,
-		side: 3,
-		isDarkMode,
-		isLogScale: widget.isLogScale,
-		yAxisUnit: widget.yAxisUnit,
-		panelType,
-	});
-
-	return builder;
-}

frontend/src/container/MeterExplorer/Breakdown/graphs.ts

@@ -103,7 +103,7 @@ export const getTotalLogSizeWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.SUM,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],
@@ -140,7 +140,7 @@ export const getTotalTraceSizeWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.SUM,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],
@@ -177,7 +177,7 @@ export const getTotalMetricDatapointCountWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.SUM,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],
@@ -214,7 +214,7 @@ export const getLogCountWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],
@@ -251,7 +251,7 @@ export const getLogSizeWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],
@@ -288,7 +288,7 @@ export const getSpanCountWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],
@@ -325,7 +325,7 @@ export const getSpanSizeWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],
@@ -362,7 +362,7 @@ export const getMetricCountWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: null,
+					stepInterval: 60,
 					timeAggregation: 'increase',
 				},
 			],

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

@@ -1,31 +0,0 @@
-import { useMemo } from 'react';
-
-import { TimeSeriesTooltipProps, TooltipContentItem } from '../types';
-import Tooltip from './Tooltip';
-import { buildTooltipContent } from './utils';
-
-export default function TimeSeriesTooltip(
-	props: TimeSeriesTooltipProps,
-): JSX.Element {
-	const content = useMemo(
-		(): TooltipContentItem[] =>
-			buildTooltipContent({
-				data: props.uPlotInstance.data,
-				series: props.uPlotInstance.series,
-				dataIndexes: props.dataIndexes,
-				activeSeriesIndex: props.seriesIndex,
-				uPlotInstance: props.uPlotInstance,
-				yAxisUnit: props.yAxisUnit ?? '',
-				decimalPrecision: props.decimalPrecision,
-			}),
-		[
-			props.uPlotInstance,
-			props.seriesIndex,
-			props.dataIndexes,
-			props.yAxisUnit,
-			props.decimalPrecision,
-		],
-	);
-
-	return <Tooltip {...props} content={content} />;
-}

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

@@ -3,25 +3,25 @@ import { Virtuoso } from 'react-virtuoso';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 
-import { TooltipProps } from '../types';
+import { TooltipContentItem, TooltipProps } from '../types';
+import { buildTooltipContent } from './utils';
 
 import './Tooltip.styles.scss';
 
 const TOOLTIP_LIST_MAX_HEIGHT = 330;
 const TOOLTIP_ITEM_HEIGHT = 38;
 
-dayjs.extend(customParseFormat);
-
 export default function Tooltip({
+	seriesIndex,
+	dataIndexes,
 	uPlotInstance,
 	timezone,
-	content,
+	yAxisUnit = '',
+	decimalPrecision,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-
 	const headerTitle = useMemo(() => {
 		const data = uPlotInstance.data;
 		const cursorIdx = uPlotInstance.cursor.idx;
@@ -33,6 +33,20 @@ export default function Tooltip({
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [timezone, uPlotInstance.data, uPlotInstance.cursor.idx]);
 
+	const content = useMemo(
+		(): TooltipContentItem[] =>
+			buildTooltipContent({
+				data: uPlotInstance.data,
+				series: uPlotInstance.series,
+				dataIndexes,
+				activeSeriesIndex: seriesIndex,
+				uPlotInstance,
+				yAxisUnit,
+				decimalPrecision,
+			}),
+		[uPlotInstance, seriesIndex, dataIndexes, yAxisUnit, decimalPrecision],
+	);
+
 	return (
 		<div
 			className={cx(

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

@@ -20,27 +20,6 @@ export function resolveSeriesColor(
 	return FALLBACK_SERIES_COLOR;
 }
 
-export function getTooltipBaseValue({
-	data,
-	index,
-	dataIndex,
-	isStackedBarChart,
-}: {
-	data: AlignedData;
-	index: number;
-	dataIndex: number;
-	isStackedBarChart?: boolean;
-}): number | null {
-	let baseValue = data[index][dataIndex] ?? null;
-	if (isStackedBarChart && index + 1 < data.length && baseValue !== null) {
-		const nextValue = data[index + 1][dataIndex] ?? null;
-		if (nextValue !== null) {
-			baseValue = baseValue - nextValue;
-		}
-	}
-	return baseValue;
-}
-
 export function buildTooltipContent({
 	data,
 	series,
@@ -49,7 +28,6 @@ export function buildTooltipContent({
 	uPlotInstance,
 	yAxisUnit,
 	decimalPrecision,
-	isStackedBarChart,
 }: {
 	data: AlignedData;
 	series: Series[];
@@ -58,7 +36,6 @@ export function buildTooltipContent({
 	uPlotInstance: uPlot;
 	yAxisUnit: string;
 	decimalPrecision?: PrecisionOption;
-	isStackedBarChart?: boolean;
 }): TooltipContentItem[] {
 	const active: TooltipContentItem[] = [];
 	const rest: TooltipContentItem[] = [];
@@ -75,29 +52,23 @@ export function buildTooltipContent({
 			continue;
 		}
 
-		const baseValue = getTooltipBaseValue({
-			data,
-			index,
-			dataIndex,
-			isStackedBarChart,
-		});
-
+		const raw = data[index]?.[dataIndex];
+		const value = Number(raw);
+		const displayValue = Number.isNaN(value) ? 0 : value;
 		const isActive = index === activeSeriesIndex;
 
-		if (Number.isFinite(baseValue) && baseValue !== null) {
-			const item: TooltipContentItem = {
-				label: String(s.label ?? ''),
-				value: baseValue,
-				tooltipValue: getToolTipValue(baseValue, yAxisUnit, decimalPrecision),
-				color: resolveSeriesColor(s.stroke, uPlotInstance, index),
-				isActive,
-			};
+		const item: TooltipContentItem = {
+			label: String(s.label ?? ''),
+			value: displayValue,
+			tooltipValue: getToolTipValue(displayValue, yAxisUnit, decimalPrecision),
+			color: resolveSeriesColor(s.stroke, uPlotInstance, index),
+			isActive,
+		};
 
-			if (isActive) {
-				active.push(item);
-			} else {
-				rest.push(item);
-			}
+		if (isActive) {
+			active.push(item);
+		} else {
+			rest.push(item);
 		}
 	}
 

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

@@ -59,22 +59,10 @@ export interface TooltipRenderArgs {
 	viaSync: boolean;
 }
 
-export interface BaseTooltipProps {
+export type TooltipProps = TooltipRenderArgs & {
 	timezone: string;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-}
-
-export interface TimeSeriesTooltipProps
-	extends BaseTooltipProps,
-		TooltipRenderArgs {}
-
-export interface BarTooltipProps extends BaseTooltipProps, TooltipRenderArgs {
-	isStackedBarChart?: boolean;
-}
-
-export type TooltipProps = (TimeSeriesTooltipProps | BarTooltipProps) & {
-	content: TooltipContentItem[];
 };
 
 export enum LegendPosition {

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

@@ -110,7 +110,6 @@ export enum LineStyle {
 export enum DrawStyle {
 	Line = 'line',
 	Points = 'points',
-	Bar = 'bar',
 }
 
 export enum LineInterpolation {
@@ -129,7 +128,7 @@ export enum VisibilityMode {
 export interface SeriesProps {
 	scaleKey: string;
 	label?: string;
-	panelType: PANEL_TYPES;
+
 	colorMapping: Record<string, string>;
 	drawStyle: DrawStyle;
 	pathBuilder?: Series.PathBuilder;

pkg/querier/querier.go

@@ -208,16 +208,7 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 				event.GroupByApplied = len(spec.GroupBy) > 0
 
 				if spec.Source == telemetrytypes.SourceMeter {
-					if spec.StepInterval.Seconds() == 0 {
-						spec.StepInterval = qbtypes.Step{Duration: time.Second * time.Duration(querybuilder.RecommendedStepIntervalForMeter(req.Start, req.End))}
-					}
-
-					if spec.StepInterval.Seconds() < float64(querybuilder.MinAllowedStepIntervalForMeter(req.Start, req.End)) {
-						newStep := qbtypes.Step{
-							Duration: time.Second * time.Duration(querybuilder.MinAllowedStepIntervalForMeter(req.Start, req.End)),
-						}
-						spec.StepInterval = newStep
-					}
+					spec.StepInterval = qbtypes.Step{Duration: time.Second * time.Duration(querybuilder.RecommendedStepIntervalForMeter(req.Start, req.End))}
 				} else {
 					if spec.StepInterval.Seconds() == 0 {
 						spec.StepInterval = qbtypes.Step{

pkg/query-service/app/clickhouseReader/reader.go

@@ -830,7 +830,7 @@ func (r *ClickHouseReader) GetUsage(ctx context.Context, queryParams *model.GetU
 
 func (r *ClickHouseReader) GetSpansForTrace(ctx context.Context, traceID string, traceDetailsQuery string) ([]model.SpanItemV2, *model.ApiError) {
 	var traceSummary model.TraceSummary
-	summaryQuery := fmt.Sprintf("SELECT * from %s.%s FINAL WHERE trace_id=$1", r.TraceDB, r.traceSummaryTable)
+	summaryQuery := fmt.Sprintf("SELECT trace_id, min(start) AS start, max(end) AS end, sum(num_spans) AS num_spans FROM %s.%s WHERE trace_id=$1 GROUP BY trace_id", r.TraceDB, r.traceSummaryTable)
 	err := r.db.QueryRow(ctx, summaryQuery, traceID).Scan(&traceSummary.TraceID, &traceSummary.Start, &traceSummary.End, &traceSummary.NumSpans)
 	if err != nil {
 		if err == sql.ErrNoRows {
@@ -6458,7 +6458,7 @@ func (r *ClickHouseReader) SearchTraces(ctx context.Context, params *model.Searc
 	}
 
 	var traceSummary model.TraceSummary
-	summaryQuery := fmt.Sprintf("SELECT * from %s.%s FINAL WHERE trace_id=$1", r.TraceDB, r.traceSummaryTable)
+	summaryQuery := fmt.Sprintf("SELECT trace_id, min(start) AS start, max(end) AS end, sum(num_spans) AS num_spans FROM %s.%s WHERE trace_id=$1 GROUP BY trace_id", r.TraceDB, r.traceSummaryTable)
 	err := r.db.QueryRow(ctx, summaryQuery, params.TraceID).Scan(&traceSummary.TraceID, &traceSummary.Start, &traceSummary.End, &traceSummary.NumSpans)
 	if err != nil {
 		if err == sql.ErrNoRows {

pkg/querybuilder/time.go

@@ -89,23 +89,6 @@ func RecommendedStepIntervalForMeter(start, end uint64) uint64 {
 	return recommended
 }
 
-func MinAllowedStepIntervalForMeter(start, end uint64) uint64 {
-	start = ToNanoSecs(start)
-	end = ToNanoSecs(end)
-
-	step := (end - start) / RecommendedNumberOfPoints / 1e9
-
-	// for meter queries the minimum step interval allowed is 1 hour as this is our granularity
-	if step < 3600 {
-		return 3600
-	}
-
-	// return the nearest lower multiple of 3600 ( 1 hour )
-	minAllowed := step - step%3600
-
-	return minAllowed
-}
-
 func RecommendedStepIntervalForMetric(start, end uint64) uint64 {
 	start = ToNanoSecs(start)
 	end = ToNanoSecs(end)