feat: zoom out func ladder added

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

@@ -1,4 +1,3 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
@@ -9,7 +8,7 @@ interface BaseChartProps {
 	height: number;
 	showTooltip?: boolean;
 	showLegend?: boolean;
-	timezone?: Timezone;
+	timezone: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/container/QueryBuilder/components/ToolbarActions/RightToolbarActions.tsx

@@ -1,7 +1,9 @@
 import { MutableRefObject, useEffect } from 'react';
 import { useQueryClient } from 'react-query';
+import { Button, Tooltip } from 'antd';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
+import { ZoomOut } from 'lucide-react';
 
 import RunQueryBtn from '../RunQueryBtn/RunQueryBtn';
 
@@ -13,6 +15,7 @@ interface RightToolbarActionsProps {
 	listQueryKeyRef?: MutableRefObject<any>;
 	chartQueryKeyRef?: MutableRefObject<any>;
 	showLiveLogs?: boolean;
+	onZoomOut?: () => void;
 }
 
 export default function RightToolbarActions({
@@ -21,6 +24,7 @@ export default function RightToolbarActions({
 	listQueryKeyRef,
 	chartQueryKeyRef,
 	showLiveLogs,
+	onZoomOut,
 }: RightToolbarActionsProps): JSX.Element {
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
@@ -58,6 +62,14 @@ export default function RightToolbarActions({
 
 	return (
 		<div className="right-toolbar-actions-container">
+			<Tooltip title="Zoom out">
+				<Button
+					type="text"
+					icon={<ZoomOut size={16} />}
+					className="zoom-out-btn"
+					onClick={(): void => onZoomOut?.()}
+				/>
+			</Tooltip>
 			<RunQueryBtn
 				isLoadingQueries={isLoadingQueries}
 				handleCancelQuery={handleCancelQuery}

frontend/src/container/Toolbar/Toolbar.styles.scss

@@ -19,6 +19,20 @@
 			display: flex;
 			align-items: center;
 			gap: 8px;
+
+			.zoom-out-btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				color: var(--bg-vanilla-100);
+				border: none;
+				box-shadow: none;
+
+				&:hover {
+					color: var(--bg-vanilla-100);
+					background: rgba(255, 255, 255, 0.1);
+				}
+			}
 		}
 	}
 
@@ -49,5 +63,16 @@
 	.toolbar {
 		border-top: 1px solid var(--bg-vanilla-300);
 		border-bottom: 1px solid var(--bg-vanilla-300);
+
+		.right-toolbar-actions-container {
+			.zoom-out-btn {
+				color: var(--bg-ink-200);
+
+				&:hover {
+					color: var(--bg-ink-300);
+					background: rgba(0, 0, 0, 0.06);
+				}
+			}
+		}
 	}
 }

frontend/src/lib/logsZoomOutUtils.ts

@@ -0,0 +1,111 @@
+/**
+ * Logs Explorer zoom-out ladder:
+ * - 3x until 1 day: 15m → 45m → 2h15m → 6h45m → 20h15m
+ * - Then fixed: 1d → 2d → 3d → 1w → 2w → 1m
+ * - After 1 month: wrap to 15m
+ */
+
+import type { Time } from 'container/TopNav/DateTimeSelectionV2/types';
+
+const MS_PER_MIN = 60 * 1000;
+const MS_PER_HOUR = 60 * MS_PER_MIN;
+const MS_PER_DAY = 24 * MS_PER_HOUR;
+const MS_PER_WEEK = 7 * MS_PER_DAY;
+
+/** Ladder steps in milliseconds (ordered from smallest to largest) */
+const ZOOM_OUT_LADDER_MS: number[] = [
+	15 * MS_PER_MIN, // 15m
+	45 * MS_PER_MIN, // 45m
+	2 * MS_PER_HOUR + 15 * MS_PER_MIN, // 2h15m
+	6 * MS_PER_HOUR + 45 * MS_PER_MIN, // 6h45m
+	20 * MS_PER_HOUR + 15 * MS_PER_MIN, // 20h15m
+	1 * MS_PER_DAY, // 1d
+	2 * MS_PER_DAY, // 2d
+	3 * MS_PER_DAY, // 3d
+	1 * MS_PER_WEEK, // 1w
+	2 * MS_PER_WEEK, // 2w
+	30 * MS_PER_DAY, // 1m (approx)
+];
+
+const LADDER_LAST_INDEX = ZOOM_OUT_LADDER_MS.length - 1;
+const MIN_DURATION = ZOOM_OUT_LADDER_MS[0];
+const MAX_DURATION = ZOOM_OUT_LADDER_MS[LADDER_LAST_INDEX];
+
+/** Preset labels for ladder steps supported by GetMinMax (shows "Last 15 minutes" etc. instead of "Custom") */
+const PRESET_FOR_DURATION_MS: Record<number, Time> = {
+	[15 * MS_PER_MIN]: '15m',
+	[45 * MS_PER_MIN]: '45m',
+	[1 * MS_PER_DAY]: '1d',
+	[3 * MS_PER_DAY]: '3d',
+	[1 * MS_PER_WEEK]: '1w',
+	[2 * MS_PER_WEEK]: '2w',
+	[30 * MS_PER_DAY]: '1month',
+};
+
+/**
+ * Returns the next duration in the zoom-out ladder for the given current duration.
+ * If at or past 1 month, returns 15m (wrap).
+ */
+export function getNextDurationInLadder(durationMs: number): number {
+	if (durationMs >= MAX_DURATION) {
+		return MIN_DURATION; // Wrap: 1m → 15m
+	}
+
+	// Find the smallest ladder step that is strictly greater than current duration
+	for (let i = 0; i < ZOOM_OUT_LADDER_MS.length; i++) {
+		if (ZOOM_OUT_LADDER_MS[i] > durationMs) {
+			return ZOOM_OUT_LADDER_MS[i];
+		}
+	}
+
+	return MIN_DURATION;
+}
+
+export interface ZoomOutResult {
+	range: [number, number];
+	/** Preset key (e.g. '15m') when range matches a preset - use for display instead of "Custom Date Range" */
+	preset: Time | null;
+}
+
+/**
+ * Computes the next zoomed-out time range.
+ * Phase 1 (center-anchored): While new end <= now, expand from center.
+ * Phase 2 (end-anchored at now): When new end would exceed now, anchor end at now and move start backward.
+ *
+ * @returns ZoomOutResult with range and preset (or null if no change)
+ */
+export function getNextZoomOutRange(
+	startMs: number,
+	endMs: number,
+): ZoomOutResult | null {
+	const nowMs = Date.now();
+	const durationMs = endMs - startMs;
+
+	if (durationMs <= 0) {
+		return null;
+	}
+
+	const newDurationMs = getNextDurationInLadder(durationMs);
+	const centerMs = startMs + durationMs / 2;
+	const computedEndMs = centerMs + newDurationMs / 2;
+
+	let newStartMs: number;
+	let newEndMs: number;
+
+	if (computedEndMs <= nowMs) {
+		// Phase 1: center-anchored
+		newStartMs = centerMs - newDurationMs / 2;
+		newEndMs = computedEndMs;
+	} else {
+		// Phase 2: end-anchored at now
+		newStartMs = nowMs - newDurationMs;
+		newEndMs = nowMs;
+	}
+
+	const preset = PRESET_FOR_DURATION_MS[newDurationMs] ?? null;
+
+	return {
+		range: [Math.round(newStartMs), Math.round(newEndMs)],
+		preset,
+	};
+}

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

@@ -4,7 +4,6 @@ import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useTimezone } from 'providers/Timezone';
 
 import { TooltipProps } from '../types';
 
@@ -23,14 +22,6 @@ export default function Tooltip({
 	const isDarkMode = useIsDarkMode();
 	const [listHeight, setListHeight] = useState(0);
 	const tooltipContent = content ?? [];
-	const { timezone: userTimezone } = useTimezone();
-
-	const resolvedTimezone = useMemo(() => {
-		if (!timezone) {
-			return userTimezone.value;
-		}
-		return timezone.value;
-	}, [timezone, userTimezone]);
 
 	const headerTitle = useMemo(() => {
 		if (!showTooltipHeader) {
@@ -42,10 +33,10 @@ export default function Tooltip({
 			return null;
 		}
 		return dayjs(data[0][cursorIdx] * 1000)
-			.tz(resolvedTimezone)
+			.tz(timezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [
-		resolvedTimezone,
+		timezone,
 		uPlotInstance.data,
 		uPlotInstance.cursor.idx,
 		showTooltipHeader,

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

@@ -83,7 +83,7 @@ function createUPlotInstance(cursorIdx: number | null): uPlot {
 function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
 	const defaultProps: TooltipTestProps = {
 		uPlotInstance: createUPlotInstance(null),
-		timezone: { value: 'UTC', name: 'UTC', offset: '0', searchIndex: '0' },
+		timezone: 'UTC',
 		content: [],
 		showTooltipHeader: true,
 		// TooltipRenderArgs (not used directly in component but required by type)

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

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import uPlot from 'uplot';
 
@@ -62,7 +61,7 @@ export interface TooltipRenderArgs {
 
 export interface BaseTooltipProps {
 	showTooltipHeader?: boolean;
-	timezone?: Timezone;
+	timezone: string;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	content?: TooltipContentItem[];

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

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

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

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

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

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

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

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

frontend/src/pages/LogsExplorer/index.tsx

@@ -1,4 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 import * as Sentry from '@sentry/react';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
@@ -9,6 +12,7 @@ import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import LogExplorerQuerySection from 'container/LogExplorerQuerySection';
 import LogsExplorerViewsContainer from 'container/LogsExplorerViews';
@@ -27,13 +31,19 @@ import {
 	ICurrentQueryData,
 	useHandleExplorerTabChange,
 } from 'hooks/useHandleExplorerTabChange';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
 import useUrlQueryData from 'hooks/useUrlQueryData';
+import { getNextZoomOutRange } from 'lib/logsZoomOutUtils';
 import { defaultTo, isEmpty, isEqual, isNull } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { EventSourceProvider } from 'providers/EventSource';
 import { usePreferenceContext } from 'providers/preferences/context/PreferenceContextProvider';
+import { UpdateTimeInterval } from 'store/actions';
+import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import { DataSource } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
 import {
 	explorerViewToPanelType,
 	panelTypeToExplorerView,
@@ -263,6 +273,50 @@ function LogsExplorer(): JSX.Element {
 		setShowLiveLogs(false);
 	}, []);
 
+	const dispatch = useDispatch();
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+	const urlQuery = useUrlQuery();
+	const location = useLocation();
+	const { safeNavigate } = useSafeNavigate();
+
+	const handleZoomOut = useCallback((): void => {
+		if (showLiveLogs) {
+			return;
+		}
+		const minMs = Math.floor((minTime ?? 0) / 1e6);
+		const maxMs = Math.floor((maxTime ?? 0) / 1e6);
+		const result = getNextZoomOutRange(minMs, maxMs);
+		if (!result) {
+			return;
+		}
+		const [newStartMs, newEndMs] = result.range;
+		const { preset } = result;
+
+		if (preset) {
+			dispatch(UpdateTimeInterval(preset));
+			urlQuery.delete(QueryParams.startTime);
+			urlQuery.delete(QueryParams.endTime);
+			urlQuery.set(QueryParams.relativeTime, preset);
+		} else {
+			dispatch(UpdateTimeInterval('custom', [newStartMs, newEndMs]));
+			urlQuery.set(QueryParams.startTime, String(newStartMs));
+			urlQuery.set(QueryParams.endTime, String(newEndMs));
+			urlQuery.delete(QueryParams.relativeTime);
+		}
+		urlQuery.delete(QueryParams.activeLogId);
+		safeNavigate(`${location.pathname}?${urlQuery.toString()}`);
+	}, [
+		dispatch,
+		location.pathname,
+		maxTime,
+		minTime,
+		safeNavigate,
+		showLiveLogs,
+		urlQuery,
+	]);
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<EventSourceProvider>
@@ -301,6 +355,7 @@ function LogsExplorer(): JSX.Element {
 									chartQueryKeyRef={chartQueryKeyRef}
 									isLoadingQueries={isLoadingQueries}
 									showLiveLogs={showLiveLogs}
+									onZoomOut={handleZoomOut}
 								/>
 							}
 							showLiveLogs={showLiveLogs}