chore: add last seen info in err message

* chore: remove toScrollWidgetId from dashboard provider

* chore: remove dead files

* chore: fix tests

.devenv/docker/clickhouse/compose.yaml

@@ -1,4 +1,22 @@
 services:
+  init-clickhouse:
+    image: clickhouse/clickhouse-server:25.5.6
+    container_name: init-clickhouse
+    command:
+      - bash
+      - -c
+      - |
+        version="v0.0.1"
+        node_os=$$(uname -s | tr '[:upper:]' '[:lower:]')
+        node_arch=$$(uname -m | sed s/aarch64/arm64/ | sed s/x86_64/amd64/)
+        echo "Fetching histogram-binary for $${node_os}/$${node_arch}"
+        cd /tmp
+        wget -O histogram-quantile.tar.gz "https://github.com/SigNoz/signoz/releases/download/histogram-quantile%2F$${version}/histogram-quantile_$${node_os}_$${node_arch}.tar.gz"
+        tar -xvzf histogram-quantile.tar.gz
+        mv histogram-quantile /var/lib/clickhouse/user_scripts/histogramQuantile
+    restart: on-failure
+    volumes:
+      - ${PWD}/fs/tmp/var/lib/clickhouse/user_scripts/:/var/lib/clickhouse/user_scripts/
   clickhouse:
     image: clickhouse/clickhouse-server:25.5.6
     container_name: clickhouse
@@ -7,6 +25,7 @@ services:
       - ${PWD}/fs/etc/clickhouse-server/users.d/users.xml:/etc/clickhouse-server/users.d/users.xml
       - ${PWD}/fs/tmp/var/lib/clickhouse/:/var/lib/clickhouse/
       - ${PWD}/fs/tmp/var/lib/clickhouse/user_scripts/:/var/lib/clickhouse/user_scripts/
+      - ${PWD}/../../../deploy/common/clickhouse/custom-function.xml:/etc/clickhouse-server/custom-function.xml
     ports:
       - '127.0.0.1:8123:8123'
       - '127.0.0.1:9000:9000'
@@ -22,7 +41,10 @@ services:
       timeout: 5s
       retries: 3
     depends_on:
-      - zookeeper
+      init-clickhouse:
+        condition: service_completed_successfully
+      zookeeper:
+        condition: service_healthy
     environment:
       - CLICKHOUSE_SKIP_USER_SETUP=1
   zookeeper:

.devenv/docker/clickhouse/fs/etc/clickhouse-server/config.d/config.xml

@@ -44,4 +44,6 @@
         <shard>01</shard>
         <replica>01</replica>
     </macros>
+    <user_defined_executable_functions_config>*function.xml</user_defined_executable_functions_config>
+    <user_scripts_path>/var/lib/clickhouse/user_scripts/</user_scripts_path>
 </clickhouse>

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.114.1
+    image: signoz/signoz:v0.115.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.114.1
+    image: signoz/signoz:v0.115.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.114.1}
+    image: signoz/signoz:${VERSION:-v0.115.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.114.1}
+    image: signoz/signoz:${VERSION:-v0.115.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

ee/query-service/rules/manager_test.go

@@ -80,6 +80,21 @@ func TestManager_TestNotification_SendUnmatched_ThresholdRule(t *testing.T) {
 					alertDataRows := cmock.NewRows(cols, tc.Values)
 
 					mock := telemetryStore.Mock()
+					// Mock metadata queries for FetchTemporalityAndTypeMulti
+					// First query: fetchMetricsTemporalityAndType (from signoz_metrics time series table)
+					metadataCols := []cmock.ColumnType{
+						{Name: "metric_name", Type: "String"},
+						{Name: "temporality", Type: "String"},
+						{Name: "type", Type: "String"},
+						{Name: "is_monotonic", Type: "Bool"},
+					}
+					metadataRows := cmock.NewRows(metadataCols, [][]any{
+						{"probe_success", metrictypes.Unspecified, metrictypes.GaugeType, false},
+					})
+					mock.ExpectQuery("*distributed_time_series_v4*").WithArgs(nil, nil, nil).WillReturnRows(metadataRows)
+					// Second query: fetchMeterSourceMetricsTemporalityAndType (from signoz_meter table)
+					emptyMetadataRows := cmock.NewRows(metadataCols, [][]any{})
+					mock.ExpectQuery("*meter*").WithArgs(nil).WillReturnRows(emptyMetadataRows)
 
 					// Generate query arguments for the metric query
 					evalTime := time.Now().UTC()

frontend/src/AppRoutes/Private.tsx

@@ -1,6 +1,6 @@
 import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { matchPath, useLocation } from 'react-router-dom';
+import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import getAll from 'api/v1/user/get';
@@ -236,13 +236,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	useEffect(() => {
 		// if it is an old route navigate to the new route
 		if (isOldRoute) {
-			const redirectUrl = oldNewRoutesMapping[pathname];
-
-			const newLocation = {
-				...location,
-				pathname: redirectUrl,
-			};
-			history.replace(newLocation);
+			// this will be handled by the redirect component below
 			return;
 		}
 
@@ -296,6 +290,19 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		}
 	}, [isLoggedInState, pathname, user, isOldRoute, currentRoute, location]);
 
+	if (isOldRoute) {
+		const redirectUrl = oldNewRoutesMapping[pathname];
+		return (
+			<Redirect
+				to={{
+					pathname: redirectUrl,
+					search: location.search,
+					hash: location.hash,
+				}}
+			/>
+		);
+	}
+
 	// NOTE: disabling this rule as there is no need to have div
 	return <>{children}</>;
 }

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

@@ -1,6 +1,31 @@
 .custom-time-picker {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+	align-items: center;
+	gap: 4px;
+
+	.zoom-out-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		color: var(--foreground);
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		box-shadow: none;
+		padding: 10px;
+		height: 33px;
+
+		&:hover:not(:disabled) {
+			color: var(--bg-vanilla-100);
+			background: var(--primary);
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
 
 	.timeSelection-input {
 		&:hover {

frontend/src/components/CustomTimePicker/CustomTimePicker.test.tsx

@@ -16,6 +16,15 @@ jest.mock('react-router-dom', () => {
 	};
 });
 
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useDispatch: jest.fn(() => jest.fn()),
+	useSelector: jest.fn(() => ({
+		minTime: 0,
+		maxTime: Date.now(),
+	})),
+}));
+
 jest.mock('providers/Timezone', () => {
 	const actual = jest.requireActual('providers/Timezone');
 

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,9 +7,11 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
+import { Button } from '@signozhq/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { QueryParams } from 'constants/query';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
 	FixedDurationSuggestionOptions,
@@ -17,9 +19,11 @@ import {
 	RelativeDurationSuggestionOptions,
 } from 'container/TopNav/DateTimeSelectionV2/constants';
 import dayjs from 'dayjs';
+import { useZoomOut } from 'hooks/useZoomOut';
 import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
+import { isZoomOutDisabled } from 'lib/zoomOutUtils';
 import { defaultTo, isFunction, noop } from 'lodash-es';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ChevronDown, ChevronUp, ZoomOut } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import { getTimeDifference, validateEpochRange } from 'utils/epochUtils';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -66,6 +70,8 @@ interface CustomTimePickerProps {
 	showRecentlyUsed?: boolean;
 	minTime: number;
 	maxTime: number;
+	/** When true, zoom-out button is hidden (e.g. in drawer/modal time selection) */
+	isModalTimeSelection?: boolean;
 }
 
 function CustomTimePicker({
@@ -88,6 +94,7 @@ function CustomTimePicker({
 	showRecentlyUsed = true,
 	minTime,
 	maxTime,
+	isModalTimeSelection = false,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
@@ -116,6 +123,14 @@ function CustomTimePicker({
 
 	const [isOpenedFromFooter, setIsOpenedFromFooter] = useState(false);
 
+	const durationMs = (maxTime - minTime) / 1e6;
+	const zoomOutDisabled = showLiveLogs || isZoomOutDisabled(durationMs);
+
+	const handleZoomOut = useZoomOut({
+		isDisabled: zoomOutDisabled,
+		urlParamsToDelete: [QueryParams.activeLogId],
+	});
+
 	// function to get selected time in Last 1m, Last 2h, Last 3d, Last 4w format
 	// 1m, 2h, 3d, 4w -> Last 1 minute, Last 2 hours, Last 3 days, Last 4 weeks
 	const getSelectedTimeRangeLabelInRelativeFormat = (
@@ -631,6 +646,23 @@ function CustomTimePicker({
 					/>
 				</Popover>
 			</Tooltip>
+			{!showLiveLogs && !isModalTimeSelection && (
+				<Tooltip
+					title={
+						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
+					}
+				>
+					<span>
+						<Button
+							className="zoom-out-btn"
+							onClick={handleZoomOut}
+							disabled={zoomOutDisabled}
+							data-testid="zoom-out-btn"
+							prefixIcon={<ZoomOut size={14} />}
+						/>
+					</span>
+				</Tooltip>
+			)}
 		</div>
 	);
 }

frontend/src/components/CustomTimePicker/__tests__/customTimePickerZoomOut.test.tsx

@@ -0,0 +1,169 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryParams } from 'constants/query';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import CustomTimePicker from '../CustomTimePicker';
+
+const MS_PER_MIN = 60 * 1000;
+const NOW_MS = 1705312800000;
+
+const mockDispatch = jest.fn();
+const mockSafeNavigate = jest.fn();
+const mockUrlQueryDelete = jest.fn();
+const mockUrlQuerySet = jest.fn();
+
+interface MockAppState {
+	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
+}
+
+jest.mock('react-redux', () => ({
+	useDispatch: (): jest.Mock => mockDispatch,
+	useSelector: (selector: (state: MockAppState) => unknown): unknown => {
+		const mockState: MockAppState = {
+			globalTime: {
+				minTime: (NOW_MS - 15 * MS_PER_MIN) * 1e6,
+				maxTime: NOW_MS * 1e6,
+			},
+		};
+		return selector(mockState);
+	},
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+interface MockUrlQuery {
+	delete: typeof mockUrlQueryDelete;
+	set: typeof mockUrlQuerySet;
+	get: () => null;
+	toString: () => string;
+}
+
+jest.mock('hooks/useUrlQuery', () => ({
+	__esModule: true,
+	default: (): MockUrlQuery => ({
+		delete: mockUrlQueryDelete,
+		set: mockUrlQuerySet,
+		get: (): null => null,
+		toString: (): string => 'relativeTime=45m',
+	}),
+}));
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): { timezone: { value: string; offset: string } } => ({
+		timezone: { value: 'UTC', offset: 'UTC' },
+	}),
+}));
+
+jest.mock('react-router-dom', () => ({
+	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
+}));
+
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+const now = Date.now();
+const defaultProps = {
+	onSelect: jest.fn(),
+	onError: jest.fn(),
+	selectedValue: '15m',
+	selectedTime: '15m',
+	onValidCustomDateChange: jest.fn(),
+	open: false,
+	setOpen: jest.fn(),
+	items: [
+		{ value: '15m', label: 'Last 15 minutes' },
+		{ value: '1h', label: 'Last 1 hour' },
+	],
+	minTime: (now - 15 * 60 * 1000) * 1e6,
+	maxTime: now * 1e6,
+};
+
+describe('CustomTimePicker - zoom out button', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	it('should render zoom out button when showLiveLogs is false', () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		expect(screen.getByTestId('zoom-out-btn')).toBeInTheDocument();
+	});
+
+	it('should not render zoom out button when showLiveLogs is true', () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={true} />);
+
+		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
+	});
+
+	it('should not render zoom out button when isModalTimeSelection is true', () => {
+		render(
+			<CustomTimePicker
+				{...defaultProps}
+				showLiveLogs={false}
+				isModalTimeSelection={true}
+			/>,
+		);
+
+		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
+	});
+
+	it('should call handleZoomOut when zoom out button is clicked', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockDispatch).toHaveBeenCalled();
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
+		);
+	});
+
+	it('should use real ladder logic: 15m range zooms to 45m preset and updates URL', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
+		);
+		expect(mockDispatch).toHaveBeenCalled();
+	});
+
+	it('should delete activeLogId when zoom out is clicked', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
+	});
+
+	it('should disable zoom button when time range is >= 1 month', () => {
+		const now = Date.now();
+		render(
+			<CustomTimePicker
+				{...defaultProps}
+				minTime={(now - 31 * MS_PER_DAY) * 1e6}
+				maxTime={now * 1e6}
+				showLiveLogs={false}
+			/>,
+		);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		expect(zoomOutBtn).toBeDisabled();
+	});
+});

frontend/src/container/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -199,8 +199,6 @@ describe('Dashboard landing page actions header tests', () => {
 			setLayouts: jest.fn(),
 			setSelectedDashboard: jest.fn(),
 			updatedTimeRef: { current: null },
-			toScrollWidgetId: '',
-			setToScrollWidgetId: jest.fn(),
 			updateLocalStorageDashboardVariables: jest.fn(),
 			dashboardQueryRangeCalled: false,
 			setDashboardQueryRangeCalled: jest.fn(),

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useScrollWidgetIntoView.test.ts

@@ -1,9 +1,9 @@
 import { renderHook } from '@testing-library/react';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { useScrollToWidgetIdStore } from 'providers/Dashboard/helpers/scrollToWidgetIdHelper';
 
 import { useScrollWidgetIntoView } from '../useScrollWidgetIntoView';
 
-jest.mock('providers/Dashboard/Dashboard');
+jest.mock('providers/Dashboard/helpers/scrollToWidgetIdHelper');
 
 type MockHTMLElement = {
 	scrollIntoView: jest.Mock;
@@ -18,25 +18,35 @@ function createMockElement(): MockHTMLElement {
 }
 
 describe('useScrollWidgetIntoView', () => {
-	const mockedUseDashboard = useDashboard as jest.MockedFunction<
-		typeof useDashboard
+	const mockedUseScrollToWidgetIdStore = useScrollToWidgetIdStore as jest.MockedFunction<
+		typeof useScrollToWidgetIdStore
 	>;
 
+	let mockElement: MockHTMLElement;
+	let ref: React.RefObject<HTMLDivElement>;
+	let setToScrollWidgetId: jest.Mock;
+
+	function mockStore(toScrollWidgetId: string): void {
+		const storeState = { toScrollWidgetId, setToScrollWidgetId };
+		mockedUseScrollToWidgetIdStore.mockImplementation(
+			(selector) =>
+				selector(
+					(storeState as unknown) as Parameters<typeof selector>[0],
+				) as ReturnType<typeof useScrollToWidgetIdStore>,
+		);
+	}
+
 	beforeEach(() => {
 		jest.clearAllMocks();
+		mockElement = createMockElement();
+		ref = ({
+			current: mockElement,
+		} as unknown) as React.RefObject<HTMLDivElement>;
+		setToScrollWidgetId = jest.fn();
 	});
 
 	it('scrolls into view and focuses when toScrollWidgetId matches widget id', () => {
-		const setToScrollWidgetId = jest.fn();
-		const mockElement = createMockElement();
-		const ref = ({
-			current: mockElement,
-		} as unknown) as React.RefObject<HTMLDivElement>;
-
-		mockedUseDashboard.mockReturnValue(({
-			toScrollWidgetId: 'widget-id',
-			setToScrollWidgetId,
-		} as unknown) as ReturnType<typeof useDashboard>);
+		mockStore('widget-id');
 
 		renderHook(() => useScrollWidgetIntoView('widget-id', ref));
 
@@ -49,16 +59,7 @@ describe('useScrollWidgetIntoView', () => {
 	});
 
 	it('does nothing when toScrollWidgetId does not match widget id', () => {
-		const setToScrollWidgetId = jest.fn();
-		const mockElement = createMockElement();
-		const ref = ({
-			current: mockElement,
-		} as unknown) as React.RefObject<HTMLDivElement>;
-
-		mockedUseDashboard.mockReturnValue(({
-			toScrollWidgetId: 'other-widget',
-			setToScrollWidgetId,
-		} as unknown) as ReturnType<typeof useDashboard>);
+		mockStore('other-widget');
 
 		renderHook(() => useScrollWidgetIntoView('widget-id', ref));
 

frontend/src/container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView.ts

@@ -1,5 +1,5 @@
 import { RefObject, useEffect } from 'react';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { useScrollToWidgetIdStore } from 'providers/Dashboard/helpers/scrollToWidgetIdHelper';
 
 /**
  * Scrolls the given widget container into view when the dashboard
@@ -11,7 +11,10 @@ export function useScrollWidgetIntoView<T extends HTMLElement>(
 	widgetId: string,
 	widgetContainerRef: RefObject<T>,
 ): void {
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
+	const toScrollWidgetId = useScrollToWidgetIdStore((s) => s.toScrollWidgetId);
+	const setToScrollWidgetId = useScrollToWidgetIdStore(
+		(s) => s.setToScrollWidgetId,
+	);
 
 	useEffect(() => {
 		if (toScrollWidgetId === widgetId) {

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

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
 import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -34,8 +33,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
-	useScrollWidgetIntoView(widget.id, graphRef);
-
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);
 

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

@@ -1,5 +1,4 @@
 import { useMemo, useRef } from 'react';
-import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
 import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -32,8 +31,6 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
-	useScrollWidgetIntoView(widget.id, graphRef);
-
 	const config = useMemo(() => {
 		return prepareHistogramPanelConfig({
 			widget,

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

@@ -2,7 +2,6 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
 import ChartManager from 'container/DashboardContainer/visualization/components/ChartManager/ChartManager';
 import { usePanelContextMenu } from 'container/DashboardContainer/visualization/hooks/usePanelContextMenu';
-import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
 import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -33,8 +32,6 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
-	useScrollWidgetIntoView(widget.id, graphRef);
-
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);
 

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -5,6 +5,7 @@ import logEvent from 'api/common/logEvent';
 import { DEFAULT_ENTITY_VERSION, ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
 import { useIsPanelWaitingOnVariable } from 'hooks/dashboard/useVariableFetchState';
@@ -67,11 +68,7 @@ function GridCardGraph({
 	const [isInternalServerError, setIsInternalServerError] = useState<boolean>(
 		false,
 	);
-	const {
-		toScrollWidgetId,
-		setToScrollWidgetId,
-		setDashboardQueryRangeCalled,
-	} = useDashboard();
+	const { setDashboardQueryRangeCalled } = useDashboard();
 
 	const {
 		minTime,
@@ -109,20 +106,11 @@ function GridCardGraph({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const graphRef = useRef<HTMLDivElement>(null);
+	const widgetContainerRef = useRef<HTMLDivElement>(null);
 
-	const isVisible = useIntersectionObserver(graphRef, undefined, true);
+	const isVisible = useIntersectionObserver(widgetContainerRef, undefined, true);
 
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
+	useScrollWidgetIntoView(widget?.id || '', widgetContainerRef);
 
 	const updatedQuery = widget?.query;
 
@@ -306,7 +294,7 @@ function GridCardGraph({
 			: headerMenuList;
 
 	return (
-		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
+		<div style={{ height: '100%', width: '100%' }} ref={widgetContainerRef}>
 			{isEmptyLayout ? (
 				<EmptyWidget />
 			) : (

frontend/src/container/LogsExplorerChart/__tests__/frequencyGraphColor.test.ts

@@ -4,8 +4,8 @@ import { getColorsForSeverityLabels, isRedLike } from '../utils';
 
 describe('getColorsForSeverityLabels', () => {
 	it('should return slate for blank labels', () => {
-		expect(getColorsForSeverityLabels('', 0)).toBe(Color.BG_SLATE_300);
-		expect(getColorsForSeverityLabels('   ', 0)).toBe(Color.BG_SLATE_300);
+		expect(getColorsForSeverityLabels('', 0)).toBe(Color.BG_VANILLA_400);
+		expect(getColorsForSeverityLabels('   ', 0)).toBe(Color.BG_VANILLA_400);
 	});
 
 	it('should return correct colors for known severity variants', () => {

frontend/src/container/LogsExplorerChart/utils.ts

@@ -79,7 +79,7 @@ export function getColorsForSeverityLabels(
 	const trimmed = label.trim();
 
 	if (!trimmed) {
-		return Color.BG_SLATE_300;
+		return Color.BG_VANILLA_400; // Default color for empty labels
 	}
 
 	const variantColor = SEVERITY_VARIANT_COLORS[trimmed];
@@ -119,6 +119,6 @@ export function getColorsForSeverityLabels(
 
 	return (
 		SAFE_FALLBACK_COLORS[index % SAFE_FALLBACK_COLORS.length] ||
-		Color.BG_SLATE_400
+		Color.BG_VANILLA_400
 	);
 }

frontend/src/container/NewWidget/index.tsx

@@ -34,6 +34,7 @@ import { cloneDeep, defaultTo, isEmpty, isUndefined } from 'lodash-es';
 import { Check, X } from 'lucide-react';
 import { DashboardWidgetPageParams } from 'pages/DashboardWidget';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { useScrollToWidgetIdStore } from 'providers/Dashboard/helpers/scrollToWidgetIdHelper';
 import {
 	clearSelectedRowWidgetId,
 	getSelectedRowWidgetId,
@@ -86,10 +87,12 @@ function NewWidget({
 	enableDrillDown = false,
 }: NewWidgetProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
+	const setToScrollWidgetId = useScrollToWidgetIdStore(
+		(s) => s.setToScrollWidgetId,
+	);
 	const {
 		selectedDashboard,
 		setSelectedDashboard,
-		setToScrollWidgetId,
 		columnWidths,
 	} = useDashboard();
 

frontend/src/container/PanelWrapper/HistogramPanelWrapper.tsx

@@ -1,180 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { ToggleGraphProps } from 'components/Graph/types';
-import Uplot from 'components/Uplot';
-import GraphManager from 'container/GridCardLayout/GridCard/FullView/GraphManager';
-import { getLocalStorageGraphVisibilityState } from 'container/GridCardLayout/GridCard/utils';
-import { getUplotClickData } from 'container/QueryTable/Drilldown/drilldownUtils';
-import useGraphContextMenu from 'container/QueryTable/Drilldown/useGraphContextMenu';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { getUplotHistogramChartOptions } from 'lib/uPlotLib/getUplotHistogramChartOptions';
-import _noop from 'lodash-es/noop';
-import { ContextMenu, useCoordinates } from 'periscope/components/ContextMenu';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-
-import { buildHistogramData } from './histogram';
-import { PanelWrapperProps } from './panelWrapper.types';
-
-function HistogramPanelWrapper({
-	queryResponse,
-	widget,
-	setGraphVisibility,
-	graphVisibility,
-	isFullViewMode,
-	onToggleModelHandler,
-	onClickHandler,
-	enableDrillDown = false,
-}: PanelWrapperProps): JSX.Element {
-	const graphRef = useRef<HTMLDivElement>(null);
-	const legendScrollPositionRef = useRef<number>(0);
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
-	const isDarkMode = useIsDarkMode();
-	const containerDimensions = useResizeObserver(graphRef);
-	const {
-		coordinates,
-		popoverPosition,
-		clickedData,
-		onClose,
-		onClick,
-		subMenu,
-		setSubMenu,
-	} = useCoordinates();
-	const { menuItemsConfig } = useGraphContextMenu({
-		widgetId: widget.id || '',
-		query: widget.query,
-		graphData: clickedData,
-		onClose,
-		coordinates,
-		subMenu,
-		setSubMenu,
-		contextLinks: widget.contextLinks,
-		panelType: widget.panelTypes,
-		queryRange: queryResponse,
-	});
-
-	const clickHandlerWithContextMenu = useCallback(
-		(...args: any[]) => {
-			const [
-				,
-				,
-				,
-				,
-				metric,
-				queryData,
-				absoluteMouseX,
-				absoluteMouseY,
-				,
-				focusedSeries,
-			] = args;
-			const data = getUplotClickData({
-				metric,
-				queryData,
-				absoluteMouseX,
-				absoluteMouseY,
-				focusedSeries,
-			});
-			if (data && data?.record?.queryName) {
-				onClick(data.coord, { ...data.record, label: data.label });
-			}
-		},
-		[onClick],
-	);
-
-	const histogramData = buildHistogramData(
-		queryResponse.data?.payload.data.result,
-		widget?.bucketWidth,
-		widget?.bucketCount,
-		widget?.mergeAllActiveQueries,
-	);
-
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
-	const lineChartRef = useRef<ToggleGraphProps>();
-
-	useEffect(() => {
-		const {
-			graphVisibilityStates: localStoredVisibilityState,
-		} = getLocalStorageGraphVisibilityState({
-			apiResponse: queryResponse.data?.payload.data.result || [],
-			name: widget.id,
-		});
-		if (setGraphVisibility) {
-			setGraphVisibility(localStoredVisibilityState);
-		}
-	}, [
-		queryResponse?.data?.payload?.data?.result,
-		setGraphVisibility,
-		widget.id,
-	]);
-
-	const histogramOptions = useMemo(
-		() =>
-			getUplotHistogramChartOptions({
-				id: widget.id,
-				dimensions: containerDimensions,
-				isDarkMode,
-				apiResponse: queryResponse.data?.payload,
-				histogramData,
-				panelType: widget.panelTypes,
-				setGraphsVisibilityStates: setGraphVisibility,
-				graphsVisibilityStates: graphVisibility,
-				mergeAllQueries: widget.mergeAllActiveQueries,
-				onClickHandler: enableDrillDown
-					? clickHandlerWithContextMenu
-					: onClickHandler ?? _noop,
-				legendScrollPosition: legendScrollPositionRef.current,
-				setLegendScrollPosition: (position: number) => {
-					legendScrollPositionRef.current = position;
-				},
-			}),
-		[
-			containerDimensions,
-			graphVisibility,
-			histogramData,
-			isDarkMode,
-			queryResponse.data?.payload,
-			setGraphVisibility,
-			widget.id,
-			widget.mergeAllActiveQueries,
-			widget.panelTypes,
-			clickHandlerWithContextMenu,
-			enableDrillDown,
-			onClickHandler,
-		],
-	);
-
-	return (
-		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
-			<Uplot options={histogramOptions} data={histogramData} ref={lineChartRef} />
-			<ContextMenu
-				coordinates={coordinates}
-				popoverPosition={popoverPosition}
-				title={menuItemsConfig.header as string}
-				items={menuItemsConfig.items}
-				onClose={onClose}
-			/>
-			{isFullViewMode && setGraphVisibility && !widget.mergeAllActiveQueries && (
-				<GraphManager
-					data={histogramData}
-					name={widget.id}
-					options={histogramOptions}
-					yAxisUnit={widget.yAxisUnit}
-					onToggleModelHandler={onToggleModelHandler}
-					setGraphsVisibilityStates={setGraphVisibility}
-					graphsVisibilityStates={graphVisibility}
-					lineChartRef={lineChartRef}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default HistogramPanelWrapper;

frontend/src/container/PanelWrapper/UplotPanelWrapper.styles.scss

@@ -1,4 +0,0 @@
-.info-text {
-	margin-top: 8px;
-	padding: 8px;
-}

frontend/src/container/PanelWrapper/UplotPanelWrapper.tsx

@@ -1,318 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Alert } from 'antd';
-import { ToggleGraphProps } from 'components/Graph/types';
-import Uplot from 'components/Uplot';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import GraphManager from 'container/GridCardLayout/GridCard/FullView/GraphManager';
-import { getLocalStorageGraphVisibilityState } from 'container/GridCardLayout/GridCard/utils';
-import { getUplotClickData } from 'container/QueryTable/Drilldown/drilldownUtils';
-import useGraphContextMenu from 'container/QueryTable/Drilldown/useGraphContextMenu';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { cloneDeep, isEqual, isUndefined } from 'lodash-es';
-import _noop from 'lodash-es/noop';
-import { ContextMenu, useCoordinates } from 'periscope/components/ContextMenu';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useTimezone } from 'providers/Timezone';
-import { DataSource } from 'types/common/queryBuilder';
-import uPlot from 'uplot';
-import { getSortedSeriesData } from 'utils/getSortedSeriesData';
-import { getTimeRange } from 'utils/getTimeRange';
-
-import { PanelWrapperProps } from './panelWrapper.types';
-import { getTimeRangeFromStepInterval, isApmMetric } from './utils';
-
-import './UplotPanelWrapper.styles.scss';
-
-function UplotPanelWrapper({
-	queryResponse,
-	widget,
-	isFullViewMode,
-	setGraphVisibility,
-	graphVisibility,
-	onToggleModelHandler,
-	onClickHandler,
-	onDragSelect,
-	selectedGraph,
-	customTooltipElement,
-	customSeries,
-	enableDrillDown = false,
-}: PanelWrapperProps): JSX.Element {
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
-	const isDarkMode = useIsDarkMode();
-	const lineChartRef = useRef<ToggleGraphProps>();
-	const graphRef = useRef<HTMLDivElement>(null);
-	const legendScrollPositionRef = useRef<{
-		scrollTop: number;
-		scrollLeft: number;
-	}>({
-		scrollTop: 0,
-		scrollLeft: 0,
-	});
-	const [minTimeScale, setMinTimeScale] = useState<number>();
-	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-	const { currentQuery } = useQueryBuilder();
-
-	const [hiddenGraph, setHiddenGraph] = useState<{ [key: string]: boolean }>();
-
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
-
-	useEffect((): void => {
-		const { startTime, endTime } = getTimeRange(queryResponse);
-
-		setMinTimeScale(startTime);
-		setMaxTimeScale(endTime);
-	}, [queryResponse]);
-
-	const containerDimensions = useResizeObserver(graphRef);
-
-	const {
-		coordinates,
-		popoverPosition,
-		clickedData,
-		onClose,
-		onClick,
-		subMenu,
-		setSubMenu,
-	} = useCoordinates();
-	const { menuItemsConfig } = useGraphContextMenu({
-		widgetId: widget.id || '',
-		query: widget.query,
-		graphData: clickedData,
-		onClose,
-		coordinates,
-		subMenu,
-		setSubMenu,
-		contextLinks: widget.contextLinks,
-		panelType: widget.panelTypes,
-		queryRange: queryResponse,
-	});
-
-	useEffect(() => {
-		const {
-			graphVisibilityStates: localStoredVisibilityState,
-		} = getLocalStorageGraphVisibilityState({
-			apiResponse: queryResponse.data?.payload.data.result || [],
-			name: widget.id,
-		});
-		if (setGraphVisibility) {
-			setGraphVisibility(localStoredVisibilityState);
-		}
-	}, [
-		queryResponse?.data?.payload?.data?.result,
-		setGraphVisibility,
-		widget.id,
-	]);
-
-	if (queryResponse.data && widget.panelTypes === PANEL_TYPES.BAR) {
-		const sortedSeriesData = getSortedSeriesData(
-			queryResponse.data?.payload.data.result,
-		);
-		queryResponse.data.payload.data.result = sortedSeriesData;
-	}
-
-	const stackedBarChart = useMemo(
-		() =>
-			(selectedGraph
-				? selectedGraph === PANEL_TYPES.BAR
-				: widget?.panelTypes === PANEL_TYPES.BAR) && widget?.stackedBarChart,
-		[selectedGraph, widget?.panelTypes, widget?.stackedBarChart],
-	);
-
-	const chartData = useMemo(
-		() =>
-			getUPlotChartData(
-				queryResponse?.data?.payload,
-				widget.fillSpans,
-				stackedBarChart,
-				hiddenGraph,
-			),
-		[
-			queryResponse?.data?.payload,
-			widget.fillSpans,
-			stackedBarChart,
-			hiddenGraph,
-		],
-	);
-
-	useEffect(() => {
-		if (widget.panelTypes === PANEL_TYPES.BAR && stackedBarChart) {
-			const graphV = cloneDeep(graphVisibility)?.slice(1);
-			const isSomeSelectedLegend = graphV?.some((v) => v === false);
-			if (isSomeSelectedLegend) {
-				const hiddenIndex = graphV?.findIndex((v) => v === true);
-				if (!isUndefined(hiddenIndex) && hiddenIndex !== -1) {
-					const updatedHiddenGraph = { [hiddenIndex]: true };
-					if (!isEqual(hiddenGraph, updatedHiddenGraph)) {
-						setHiddenGraph(updatedHiddenGraph);
-					}
-				}
-			}
-		}
-	}, [graphVisibility, hiddenGraph, widget.panelTypes, stackedBarChart]);
-
-	const { timezone } = useTimezone();
-
-	const clickHandlerWithContextMenu = useCallback(
-		(...args: any[]) => {
-			const [
-				xValue,
-				,
-				,
-				,
-				metric,
-				queryData,
-				absoluteMouseX,
-				absoluteMouseY,
-				axesData,
-				focusedSeries,
-			] = args;
-			const data = getUplotClickData({
-				metric,
-				queryData,
-				absoluteMouseX,
-				absoluteMouseY,
-				focusedSeries,
-			});
-			// Compute time range if needed and if axes data is available
-			let timeRange;
-			if (axesData && queryData?.queryName) {
-				// Get the compositeQuery from the response params
-				const compositeQuery = (queryResponse?.data?.params as any)?.compositeQuery;
-
-				if (compositeQuery?.queries) {
-					// Find the specific query by name from the queries array
-					const specificQuery = compositeQuery.queries.find(
-						(query: any) => query.spec?.name === queryData.queryName,
-					);
-
-					// Use the stepInterval from the specific query, fallback to default
-					const stepInterval = specificQuery?.spec?.stepInterval || 60;
-					timeRange = getTimeRangeFromStepInterval(
-						stepInterval,
-						metric?.clickedTimestamp || xValue, // Use the clicked timestamp if available, otherwise use the click position timestamp
-						specificQuery?.spec?.signal === DataSource.METRICS &&
-							isApmMetric(specificQuery?.spec?.aggregations[0]?.metricName),
-					);
-				}
-			}
-
-			if (data && data?.record?.queryName) {
-				onClick(data.coord, { ...data.record, label: data.label, timeRange });
-			}
-		},
-		[onClick, queryResponse],
-	);
-
-	const options = useMemo(
-		() =>
-			getUPlotChartOptions({
-				id: widget?.id,
-				apiResponse: queryResponse.data?.payload,
-				dimensions: containerDimensions,
-				isDarkMode,
-				onDragSelect,
-				yAxisUnit: widget?.yAxisUnit,
-				onClickHandler: enableDrillDown
-					? clickHandlerWithContextMenu
-					: onClickHandler ?? _noop,
-				thresholds: widget.thresholds,
-				minTimeScale,
-				maxTimeScale,
-				softMax: widget.softMax === undefined ? null : widget.softMax,
-				softMin: widget.softMin === undefined ? null : widget.softMin,
-				graphsVisibilityStates: graphVisibility,
-				setGraphsVisibilityStates: setGraphVisibility,
-				panelType: selectedGraph || widget.panelTypes,
-				currentQuery,
-				stackBarChart: stackedBarChart,
-				hiddenGraph,
-				setHiddenGraph,
-				customTooltipElement,
-				tzDate: (timestamp: number) =>
-					uPlot.tzDate(new Date(timestamp * 1e3), timezone.value),
-				timezone: timezone.value,
-				customSeries,
-				isLogScale: widget?.isLogScale,
-				colorMapping: widget?.customLegendColors,
-				enhancedLegend: true, // Enable enhanced legend
-				legendPosition: widget?.legendPosition,
-				query: widget?.query || currentQuery,
-				legendScrollPosition: legendScrollPositionRef.current,
-				setLegendScrollPosition: (position: {
-					scrollTop: number;
-					scrollLeft: number;
-				}) => {
-					legendScrollPositionRef.current = position;
-				},
-				decimalPrecision: widget.decimalPrecision,
-			}),
-		[
-			queryResponse.data?.payload,
-			containerDimensions,
-			isDarkMode,
-			onDragSelect,
-			clickHandlerWithContextMenu,
-			minTimeScale,
-			maxTimeScale,
-			graphVisibility,
-			setGraphVisibility,
-			selectedGraph,
-			currentQuery,
-			hiddenGraph,
-			customTooltipElement,
-			timezone.value,
-			customSeries,
-			enableDrillDown,
-			onClickHandler,
-			widget,
-			stackedBarChart,
-		],
-	);
-
-	return (
-		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
-			<Uplot options={options} data={chartData} ref={lineChartRef} />
-			<ContextMenu
-				coordinates={coordinates}
-				popoverPosition={popoverPosition}
-				title={menuItemsConfig.header as string}
-				items={menuItemsConfig.items}
-				onClose={onClose}
-			/>
-			{stackedBarChart && isFullViewMode && (
-				<Alert
-					message="Selecting multiple legends is currently not supported in case of stacked bar charts"
-					type="info"
-					className="info-text"
-				/>
-			)}
-			{isFullViewMode && setGraphVisibility && !stackedBarChart && (
-				<GraphManager
-					data={chartData}
-					name={widget.id}
-					options={options}
-					yAxisUnit={widget.yAxisUnit}
-					onToggleModelHandler={onToggleModelHandler}
-					setGraphsVisibilityStates={setGraphVisibility}
-					graphsVisibilityStates={graphVisibility}
-					lineChartRef={lineChartRef}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default UplotPanelWrapper;

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -30,6 +30,7 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { addCustomTimeRange } from 'utils/customTimeRangeUtils';
+import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
 import { normalizeTimeToMs } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
@@ -234,20 +235,7 @@ function DateTimeSelection({
 
 	const updateLocalStorageForRoutes = useCallback(
 		(value: Time | string): void => {
-			const preRoutes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
-			if (preRoutes !== null) {
-				const preRoutesObject = JSON.parse(preRoutes);
-
-				const preRoute = {
-					...preRoutesObject,
-				};
-				preRoute[location.pathname] = value;
-
-				setLocalStorageKey(
-					LOCALSTORAGE.METRICS_TIME_IN_DURATION,
-					JSON.stringify(preRoute),
-				);
-			}
+			persistTimeDurationForRoute(location.pathname, String(value));
 		},
 		[location.pathname],
 	);
@@ -738,6 +726,7 @@ function DateTimeSelection({
 						showRecentlyUsed={showRecentlyUsed}
 						minTime={minTimeForDateTimePicker}
 						maxTime={maxTimeForDateTimePicker}
+						isModalTimeSelection={isModalTimeSelection}
 					/>
 
 					{showAutoRefresh && selectedTime !== 'custom' && (

frontend/src/hooks/__tests__/useZoomOut.test.ts

@@ -0,0 +1,160 @@
+import { act, renderHook } from '@testing-library/react';
+import { QueryParams } from 'constants/query';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import { useZoomOut } from '../useZoomOut';
+
+const mockDispatch = jest.fn();
+const mockSafeNavigate = jest.fn();
+const mockUrlQueryDelete = jest.fn();
+const mockUrlQuerySet = jest.fn();
+const mockUrlQueryToString = jest.fn(() => '');
+
+interface MockAppState {
+	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
+}
+
+jest.mock('react-redux', () => ({
+	useDispatch: (): jest.Mock => mockDispatch,
+	useSelector: <T>(selector: (state: MockAppState) => T): T => {
+		const mockState: MockAppState = {
+			globalTime: {
+				minTime: 15 * 60 * 1000 * 1e6, // 15 min in nanoseconds
+				maxTime: 30 * 60 * 1000 * 1e6, // 30 min in nanoseconds (mock for getNextZoomOutRange)
+			},
+		};
+		return selector(mockState);
+	},
+}));
+
+jest.mock('react-router-dom', () => ({
+	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+interface MockUrlQuery {
+	delete: typeof mockUrlQueryDelete;
+	set: typeof mockUrlQuerySet;
+	get: () => null;
+	toString: typeof mockUrlQueryToString;
+}
+
+jest.mock('hooks/useUrlQuery', () => ({
+	__esModule: true,
+	default: (): MockUrlQuery => ({
+		delete: mockUrlQueryDelete,
+		set: mockUrlQuerySet,
+		get: (): null => null,
+		toString: mockUrlQueryToString,
+	}),
+}));
+
+const mockGetNextZoomOutRange = jest.fn();
+jest.mock('lib/zoomOutUtils', () => ({
+	getNextZoomOutRange: (
+		...args: unknown[]
+	): ReturnType<typeof mockGetNextZoomOutRange> =>
+		mockGetNextZoomOutRange(...args),
+}));
+
+describe('useZoomOut', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUrlQueryToString.mockReturnValue('relativeTime=45m');
+	});
+
+	it('should do nothing when isDisabled is true', () => {
+		const { result } = renderHook(() => useZoomOut({ isDisabled: true }));
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockGetNextZoomOutRange).not.toHaveBeenCalled();
+		expect(mockDispatch).not.toHaveBeenCalled();
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('should do nothing when getNextZoomOutRange returns null', () => {
+		mockGetNextZoomOutRange.mockReturnValue(null);
+
+		const { result } = renderHook(() => useZoomOut());
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockGetNextZoomOutRange).toHaveBeenCalled();
+		expect(mockDispatch).not.toHaveBeenCalled();
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('should dispatch preset and update URL when result has preset', () => {
+		mockGetNextZoomOutRange.mockReturnValue({
+			range: [1000, 2000],
+			preset: '45m',
+		});
+
+		const { result } = renderHook(() => useZoomOut());
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockDispatch).toHaveBeenCalledWith(expect.any(Function));
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringContaining('/logs-explorer'),
+		);
+	});
+
+	it('should dispatch custom range and update URL when result has no preset', () => {
+		mockGetNextZoomOutRange.mockReturnValue({
+			range: [1000000, 2000000],
+			preset: null,
+		});
+
+		const { result } = renderHook(() => useZoomOut());
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockDispatch).toHaveBeenCalledWith(expect.any(Function));
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(
+			QueryParams.startTime,
+			'1000000',
+		);
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.endTime, '2000000');
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.relativeTime);
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringContaining('/logs-explorer'),
+		);
+	});
+
+	it('should delete urlParamsToDelete when provided', () => {
+		mockGetNextZoomOutRange.mockReturnValue({
+			range: [1000, 2000],
+			preset: '45m',
+		});
+
+		const { result } = renderHook(() =>
+			useZoomOut({
+				urlParamsToDelete: [QueryParams.activeLogId],
+			}),
+		);
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
+	});
+});

frontend/src/hooks/useZoomOut.ts

@@ -0,0 +1,79 @@
+import { useCallback, useRef } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { QueryParams } from 'constants/query';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { getNextZoomOutRange } from 'lib/zoomOutUtils';
+import { UpdateTimeInterval } from 'store/actions';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
+
+export interface UseZoomOutOptions {
+	/** When true, the zoom out handler does nothing (e.g. when live logs are enabled) */
+	isDisabled?: boolean;
+	/** URL params to delete when zooming out (e.g. [QueryParams.activeLogId] for logs) */
+	urlParamsToDelete?: string[];
+}
+
+/**
+ * Reusable hook for zoom-out functionality in explorers (logs, traces, etc.).
+ * Computes the next time range using the zoom-out ladder, updates Redux global time,
+ * and navigates with the new URL params.
+ */
+const EMPTY_PARAMS: string[] = [];
+
+export function useZoomOut(options: UseZoomOutOptions = {}): () => void {
+	const { isDisabled = false, urlParamsToDelete = EMPTY_PARAMS } = options;
+	const urlParamsToDeleteRef = useRef(urlParamsToDelete);
+	urlParamsToDeleteRef.current = urlParamsToDelete;
+
+	const dispatch = useDispatch();
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+	const urlQuery = useUrlQuery();
+	const location = useLocation();
+	const { safeNavigate } = useSafeNavigate();
+
+	return useCallback((): void => {
+		if (isDisabled) {
+			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);
+			persistTimeDurationForRoute(location.pathname, preset);
+		} else {
+			dispatch(UpdateTimeInterval('custom', [newStartMs, newEndMs]));
+			urlQuery.set(QueryParams.startTime, String(newStartMs));
+			urlQuery.set(QueryParams.endTime, String(newEndMs));
+			urlQuery.delete(QueryParams.relativeTime);
+		}
+		for (const param of urlParamsToDeleteRef.current) {
+			urlQuery.delete(param);
+		}
+		safeNavigate(`${location.pathname}?${urlQuery.toString()}`);
+	}, [
+		dispatch,
+		isDisabled,
+		location.pathname,
+		maxTime,
+		minTime,
+		safeNavigate,
+		urlQuery,
+	]);
+}

frontend/src/lib/__tests__/zoomOutUtils.test.ts

@@ -0,0 +1,147 @@
+import {
+	getNextDurationInLadder,
+	getNextZoomOutRange,
+	isZoomOutDisabled,
+	ZoomOutResult,
+} from '../zoomOutUtils';
+
+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;
+
+// Fixed "now" for deterministic tests: 2024-01-15 12:00:00 UTC
+const NOW_MS = 1705312800000;
+
+describe('zoomOutUtils', () => {
+	beforeEach(() => {
+		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	describe('getNextDurationInLadder', () => {
+		it('should use 3x zoom out below 15m until reaching 15m', () => {
+			expect(getNextDurationInLadder(1 * MS_PER_MIN)).toBe(3 * MS_PER_MIN);
+			expect(getNextDurationInLadder(2 * MS_PER_MIN)).toBe(6 * MS_PER_MIN);
+			expect(getNextDurationInLadder(3 * MS_PER_MIN)).toBe(9 * MS_PER_MIN);
+			expect(getNextDurationInLadder(4 * MS_PER_MIN)).toBe(12 * MS_PER_MIN);
+			expect(getNextDurationInLadder(5 * MS_PER_MIN)).toBe(15 * MS_PER_MIN); // cap at 15m
+			expect(getNextDurationInLadder(6 * MS_PER_MIN)).toBe(15 * MS_PER_MIN); // 18m capped
+		});
+
+		it('should return next step for each ladder rung from 15m onward', () => {
+			expect(getNextDurationInLadder(10 * MS_PER_MIN)).toBe(15 * MS_PER_MIN);
+			expect(getNextDurationInLadder(15 * MS_PER_MIN)).toBe(45 * MS_PER_MIN);
+			expect(getNextDurationInLadder(45 * MS_PER_MIN)).toBe(2 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(2 * MS_PER_HOUR)).toBe(7 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(7 * MS_PER_HOUR)).toBe(21 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(21 * MS_PER_HOUR)).toBe(1 * MS_PER_DAY);
+			expect(getNextDurationInLadder(1 * MS_PER_DAY)).toBe(2 * MS_PER_DAY);
+			expect(getNextDurationInLadder(2 * MS_PER_DAY)).toBe(3 * MS_PER_DAY);
+			expect(getNextDurationInLadder(3 * MS_PER_DAY)).toBe(1 * MS_PER_WEEK);
+			expect(getNextDurationInLadder(1 * MS_PER_WEEK)).toBe(2 * MS_PER_WEEK);
+			expect(getNextDurationInLadder(2 * MS_PER_WEEK)).toBe(30 * MS_PER_DAY);
+		});
+
+		it('should return MAX when at or past 1 month (no wrap)', () => {
+			expect(getNextDurationInLadder(30 * MS_PER_DAY)).toBe(30 * MS_PER_DAY);
+			expect(getNextDurationInLadder(31 * MS_PER_DAY)).toBe(30 * MS_PER_DAY);
+		});
+
+		it('should return next step for duration between ladder rungs', () => {
+			expect(getNextDurationInLadder(1 * MS_PER_HOUR)).toBe(2 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(5 * MS_PER_HOUR)).toBe(7 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(12 * MS_PER_HOUR)).toBe(21 * MS_PER_HOUR);
+		});
+	});
+
+	describe('getNextZoomOutRange', () => {
+		it('should return null when duration is zero or negative', () => {
+			expect(getNextZoomOutRange(NOW_MS, NOW_MS)).toBeNull();
+			expect(getNextZoomOutRange(NOW_MS, NOW_MS - 1000)).toBeNull();
+		});
+
+		it('should return center-anchored range and preset=null when new end does not exceed now (Phase 1)', () => {
+			// 15m range centered well before now so zoom to 45m keeps end <= now
+			// Center at now-30m: end = center + 22.5m = now - 7.5m <= now
+			const centerMs = NOW_MS - 30 * MS_PER_MIN;
+			const start15m = centerMs - 7.5 * MS_PER_MIN;
+			const end15m = centerMs + 7.5 * MS_PER_MIN;
+			const result = getNextZoomOutRange(start15m, end15m) as ZoomOutResult;
+
+			expect(result).not.toBeNull();
+			expect(result.preset).toBeNull(); // Phase 1: preserve center-anchored range, avoid GetMinMax "last X from now"
+			const [newStart, newEnd] = result.range;
+			expect(newEnd - newStart).toBe(45 * MS_PER_MIN);
+			const newCenter = (newStart + newEnd) / 2;
+			expect(Math.abs(newCenter - centerMs)).toBeLessThan(2000);
+			expect(newEnd).toBeLessThanOrEqual(NOW_MS + 1000);
+		});
+
+		it('should return end-anchored range when new end would exceed now (Phase 2)', () => {
+			// 22hr range ending at now - zoom to 1d (24hr) would push end past now
+			// Next ladder step from 22hr is 1d
+			const start22h = NOW_MS - 22 * MS_PER_HOUR;
+			const end22h = NOW_MS;
+			const result = getNextZoomOutRange(start22h, end22h) as ZoomOutResult;
+
+			expect(result).not.toBeNull();
+			expect(result.preset).toBe('1d');
+			const [newStart, newEnd] = result.range;
+			expect(newEnd).toBe(NOW_MS); // End anchored at now
+			expect(newStart).toBe(NOW_MS - 1 * MS_PER_DAY);
+		});
+
+		it('should return correct preset for each ladder step', () => {
+			const presets: [number, number, string][] = [
+				[15 * MS_PER_MIN, 0, '45m'],
+				[45 * MS_PER_MIN, 0, '2h'],
+				[2 * MS_PER_HOUR, 0, '7h'],
+				[7 * MS_PER_HOUR, 0, '21h'],
+				[21 * MS_PER_HOUR, 0, '1d'],
+				[1 * MS_PER_DAY, 0, '2d'],
+				[2 * MS_PER_DAY, 0, '3d'],
+				[3 * MS_PER_DAY, 0, '1w'],
+				[1 * MS_PER_WEEK, 0, '2w'],
+				[2 * MS_PER_WEEK, 0, '1month'],
+			];
+
+			presets.forEach(([durationMs, offset, expectedPreset]) => {
+				const end = NOW_MS - offset;
+				const start = end - durationMs;
+				const result = getNextZoomOutRange(start, end);
+				expect(result?.preset).toBe(expectedPreset);
+			});
+		});
+
+		it('isZoomOutDisabled returns true when duration >= 1 month', () => {
+			expect(isZoomOutDisabled(30 * MS_PER_DAY)).toBe(true);
+			expect(isZoomOutDisabled(31 * MS_PER_DAY)).toBe(true);
+			expect(isZoomOutDisabled(29 * MS_PER_DAY)).toBe(false);
+			expect(isZoomOutDisabled(15 * MS_PER_MIN)).toBe(false);
+		});
+
+		it('should return null when at 1 month (no zoom out beyond max)', () => {
+			const start1m = NOW_MS - 30 * MS_PER_DAY;
+			const end1m = NOW_MS;
+			const result = getNextZoomOutRange(start1m, end1m);
+
+			expect(result).toBeNull();
+		});
+
+		it('should zoom out 3x from 5m range to 15m then continue with ladder', () => {
+			// 5m range ending at now → 3x = 15m
+			const start5m = NOW_MS - 5 * MS_PER_MIN;
+			const end5m = NOW_MS;
+			const result = getNextZoomOutRange(start5m, end5m) as ZoomOutResult;
+
+			expect(result).not.toBeNull();
+			expect(result.preset).toBe('15m');
+			const [newStart, newEnd] = result.range;
+			expect(newEnd - newStart).toBe(15 * MS_PER_MIN);
+		});
+	});
+});

frontend/src/lib/zoomOutUtils.ts

@@ -0,0 +1,139 @@
+/**
+ * Custom Time Picker zoom-out ladder:
+ * - Until 1 day: 15m → 45m → 2hr → 7hr → 21hr
+ * - Then fixed: 1d → 2d → 3d → 1w → 2w → 1m
+ * - At 1 month: zoom out is disabled (max range)
+ */
+
+import type {
+	CustomTimeType,
+	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;
+
+const ZOOM_OUT_LADDER_MS: number[] = [
+	15 * MS_PER_MIN, // 15m
+	45 * MS_PER_MIN, // 45m
+	2 * MS_PER_HOUR, // 2hr
+	7 * MS_PER_HOUR, // 7hr
+	21 * MS_PER_HOUR, // 21hr
+	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
+];
+
+const LADDER_LAST_INDEX = ZOOM_OUT_LADDER_MS.length - 1;
+const MAX_DURATION = ZOOM_OUT_LADDER_MS[LADDER_LAST_INDEX];
+const MIN_LADDER_DURATION_MS = ZOOM_OUT_LADDER_MS[0]; // 15m - below this we use 3x
+
+export const MAX_ZOOM_OUT_DURATION_MS = MAX_DURATION;
+
+/** Returns true when zoom out should be disabled (range at or beyond 1 month) */
+export function isZoomOutDisabled(durationMs: number): boolean {
+	return durationMs >= MAX_ZOOM_OUT_DURATION_MS;
+}
+
+/** Preset labels for ladder steps supported by GetMinMax (shows "Last 15 minutes" etc. instead of "Custom") */
+const PRESET_FOR_DURATION_MS: Record<number, Time | CustomTimeType> = {
+	[15 * MS_PER_MIN]: '15m',
+	[45 * MS_PER_MIN]: '45m',
+	[2 * MS_PER_HOUR]: '2h',
+	[7 * MS_PER_HOUR]: '7h',
+	[21 * MS_PER_HOUR]: '21h',
+	[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]: '1month',
+};
+
+/**
+ * Returns the next duration in the zoom-out ladder for the given current duration.
+ * Below 15m: zoom out 3x until we reach 15m, then continue with the ladder.
+ * If at or past 1 month, returns MAX_DURATION (no zoom out - button is disabled).
+ */
+export function getNextDurationInLadder(durationMs: number): number {
+	if (durationMs >= MAX_DURATION) {
+		return MAX_DURATION; // No zoom out beyond 1 month
+	}
+
+	// Below 15m: zoom out 3x until we reach 15m
+	if (durationMs < MIN_LADDER_DURATION_MS) {
+		const next = durationMs * 3;
+		return Math.min(next, MIN_LADDER_DURATION_MS);
+	}
+
+	// At or above 15m: use the fixed ladder
+	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 MAX_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 | CustomTimeType | 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);
+
+	// No zoom out when already at max (1 month)
+	if (newDurationMs <= durationMs) {
+		return null;
+	}
+	const centerMs = startMs + durationMs / 2;
+	const computedEndMs = centerMs + newDurationMs / 2;
+
+	let newStartMs: number;
+	let newEndMs: number;
+
+	const isPhase1 = computedEndMs <= nowMs;
+	if (isPhase1) {
+		// Phase 1: center-anchored (historical range not ending at now)
+		newStartMs = centerMs - newDurationMs / 2;
+		newEndMs = computedEndMs;
+	} else {
+		// Phase 2: end-anchored at now
+		newStartMs = nowMs - newDurationMs;
+		newEndMs = nowMs;
+	}
+
+	// Phase 2 only: use preset so GetMinMax produces "last X from now".
+	// Phase 1: preset=null so the center-anchored range is preserved (GetMinMax would discard it).
+	const preset = isPhase1 ? null : PRESET_FOR_DURATION_MS[newDurationMs] ?? null;
+
+	return {
+		range: [Math.round(newStartMs), Math.round(newEndMs)],
+		preset,
+	};
+}

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -75,8 +75,6 @@ export const DashboardContext = createContext<IDashboardContext>({
 	setLayouts: () => {},
 	setSelectedDashboard: () => {},
 	updatedTimeRef: {} as React.MutableRefObject<Dayjs | null>,
-	toScrollWidgetId: '',
-	setToScrollWidgetId: () => {},
 	updateLocalStorageDashboardVariables: () => {},
 	dashboardQueryRangeCalled: false,
 	setDashboardQueryRangeCalled: () => {},
@@ -95,8 +93,6 @@ export function DashboardProvider({
 }: PropsWithChildren): JSX.Element {
 	const [isDashboardSliderOpen, setIsDashboardSlider] = useState<boolean>(false);
 
-	const [toScrollWidgetId, setToScrollWidgetId] = useState<string>('');
-
 	const [isDashboardLocked, setIsDashboardLocked] = useState<boolean>(false);
 
 	const [
@@ -443,7 +439,6 @@ export function DashboardProvider({
 
 	const value: IDashboardContext = useMemo(
 		() => ({
-			toScrollWidgetId,
 			isDashboardSliderOpen,
 			isDashboardLocked,
 			handleToggleDashboardSlider,
@@ -457,7 +452,6 @@ export function DashboardProvider({
 			setPanelMap,
 			setSelectedDashboard,
 			updatedTimeRef,
-			setToScrollWidgetId,
 			updateLocalStorageDashboardVariables,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
@@ -474,7 +468,6 @@ export function DashboardProvider({
 			dashboardId,
 			layouts,
 			panelMap,
-			toScrollWidgetId,
 			updateLocalStorageDashboardVariables,
 			currentDashboard,
 			dashboardQueryRangeCalled,

frontend/src/providers/Dashboard/helpers/scrollToWidgetIdHelper.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface ScrollToWidgetIdState {
+	toScrollWidgetId: string;
+	setToScrollWidgetId: (widgetId: string) => void;
+}
+
+export const useScrollToWidgetIdStore = create<ScrollToWidgetIdState>(
+	(set) => ({
+		toScrollWidgetId: '',
+		setToScrollWidgetId: (widgetId): void => set({ toScrollWidgetId: widgetId }),
+	}),
+);

frontend/src/providers/Dashboard/types.ts

@@ -23,8 +23,6 @@ export interface IDashboardContext {
 		React.SetStateAction<Dashboard | undefined>
 	>;
 	updatedTimeRef: React.MutableRefObject<dayjs.Dayjs | null>;
-	toScrollWidgetId: string;
-	setToScrollWidgetId: React.Dispatch<React.SetStateAction<string>>;
 	updateLocalStorageDashboardVariables: (
 		id: string,
 		selectedValue:

frontend/src/utils/metricsTimeStorageUtils.ts

@@ -0,0 +1,28 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+/**
+ * Updates the stored time duration for a route in localStorage.
+ * Used by both DateTimeSelectionV2 (manual time pick) and useZoomOut (zoom out button).
+ *
+ * @param pathname - The route path (e.g. /infrastructure-monitoring/hosts)
+ * @param value - The time value to store (preset string like '1w' or JSON string for custom range)
+ */
+export function persistTimeDurationForRoute(
+	pathname: string,
+	value: string,
+): void {
+	const preRoutes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
+	let preRoutesObject: Record<string, string> = {};
+	try {
+		preRoutesObject = preRoutes ? JSON.parse(preRoutes) : {};
+	} catch {
+		preRoutesObject = {};
+	}
+	const preRoute = { ...preRoutesObject, [pathname]: value };
+	setLocalStorageKey(
+		LOCALSTORAGE.METRICS_TIME_IN_DURATION,
+		JSON.stringify(preRoute),
+	);
+}

pkg/querier/querier.go

@@ -20,6 +20,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
 	"github.com/SigNoz/signoz/pkg/types/metrictypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/dustin/go-humanize"
 	"golang.org/x/exp/maps"
 
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
@@ -158,7 +159,8 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 	metricNames := make([]string, 0)
 	for idx, query := range req.CompositeQuery.Queries {
 		event.QueryType = query.Type.StringValue()
-		if query.Type == qbtypes.QueryTypeBuilder {
+		switch query.Type {
+		case qbtypes.QueryTypeBuilder:
 			if spec, ok := query.Spec.(qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]); ok {
 				for _, agg := range spec.Aggregations {
 					if agg.MetricName != "" {
@@ -236,7 +238,7 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 				}
 				req.CompositeQuery.Queries[idx].Spec = spec
 			}
-		} else if query.Type == qbtypes.QueryTypePromQL {
+		case qbtypes.QueryTypePromQL:
 			event.MetricsUsed = true
 			switch spec := query.Spec.(type) {
 			case qbtypes.PromQuery:
@@ -247,7 +249,7 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 				}
 				req.CompositeQuery.Queries[idx].Spec = spec
 			}
-		} else if query.Type == qbtypes.QueryTypeClickHouseSQL {
+		case qbtypes.QueryTypeClickHouseSQL:
 			switch spec := query.Spec.(type) {
 			case qbtypes.ClickHouseQuery:
 				if strings.TrimSpace(spec.Query) != "" {
@@ -256,7 +258,7 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 					event.TracesUsed = strings.Contains(spec.Query, "signoz_traces")
 				}
 			}
-		} else if query.Type == qbtypes.QueryTypeTraceOperator {
+		case qbtypes.QueryTypeTraceOperator:
 			if spec, ok := query.Spec.(qbtypes.QueryBuilderTraceOperator); ok {
 				if spec.StepInterval.Seconds() == 0 {
 					spec.StepInterval = qbtypes.Step{
@@ -276,23 +278,9 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 		}
 	}
 
-	// Fetch temporality for all metrics at once
-	var metricTemporality map[string]metrictypes.Temporality
-	var metricTypes map[string]metrictypes.Type
-	if len(metricNames) > 0 {
-		var err error
-		metricTemporality, metricTypes, err = q.metadataStore.FetchTemporalityAndTypeMulti(ctx, req.Start, req.End, metricNames...)
-		if err != nil {
-			q.logger.WarnContext(ctx, "failed to fetch metric temporality", "error", err, "metrics", metricNames)
-			// Continue without temporality - statement builder will handle unspecified
-			metricTemporality = make(map[string]metrictypes.Temporality)
-			metricTypes = make(map[string]metrictypes.Type)
-		}
-		q.logger.DebugContext(ctx, "fetched metric temporalities and types", "metric_temporality", metricTemporality, "metric_types", metricTypes)
-	}
-
 	queries := make(map[string]qbtypes.Query)
 	steps := make(map[string]qbtypes.Step)
+	missingMetrics := []string{}
 
 	for _, query := range req.CompositeQuery.Queries {
 		var queryName string
@@ -374,15 +362,26 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 				queries[spec.Name] = bq
 				steps[spec.Name] = spec.StepInterval
 			case qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]:
+				var metricTemporality map[string]metrictypes.Temporality
+				var metricTypes map[string]metrictypes.Type
+				if len(metricNames) > 0 {
+					var err error
+					metricTemporality, metricTypes, err = q.metadataStore.FetchTemporalityAndTypeMulti(ctx, req.Start, req.End, metricNames...)
+					if err != nil {
+						q.logger.WarnContext(ctx, "failed to fetch metric temporality", "error", err, "metrics", metricNames)
+						return nil, errors.NewInternalf(errors.CodeInternal, "failed to fetch metrics temporality")
+					}
+					q.logger.DebugContext(ctx, "fetched metric temporalities and types", "metric_temporality", metricTemporality, "metric_types", metricTypes)
+				}
 				for i := range spec.Aggregations {
 					if spec.Aggregations[i].MetricName != "" && spec.Aggregations[i].Temporality == metrictypes.Unknown {
 						if temp, ok := metricTemporality[spec.Aggregations[i].MetricName]; ok && temp != metrictypes.Unknown {
 							spec.Aggregations[i].Temporality = temp
 						}
 					}
-					// TODO(srikanthccv): warn when the metric is missing
 					if spec.Aggregations[i].Temporality == metrictypes.Unknown {
-						spec.Aggregations[i].Temporality = metrictypes.Unspecified
+						missingMetrics = append(missingMetrics, spec.Aggregations[i].MetricName)
+						continue
 					}
 
 					if spec.Aggregations[i].MetricName != "" && spec.Aggregations[i].Type == metrictypes.UnspecifiedType {
@@ -409,6 +408,24 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 			}
 		}
 	}
+	if len(missingMetrics) > 0 {
+		lastSeenInfo, _ := q.metadataStore.FetchLastSeenInfoMulti(ctx, missingMetrics...)
+		lastSeenStr := func(name string) string {
+			if ts, ok := lastSeenInfo[name]; ok && ts > 0 {
+				ago := humanize.RelTime(time.UnixMilli(ts), time.Now(), "ago", "from now")
+				return fmt.Sprintf("%s (last seen %s)", name, ago)
+			}
+			return name
+		}
+		if len(missingMetrics) == 1 {
+			return nil, errors.NewNotFoundf(errors.CodeNotFound, "no data found for the metric %s in the query time range", lastSeenStr(missingMetrics[0]))
+		}
+		parts := make([]string, len(missingMetrics))
+		for i, m := range missingMetrics {
+			parts[i] = lastSeenStr(m)
+		}
+		return nil, errors.NewNotFoundf(errors.CodeNotFound, "no data found for the following metrics in the query time range: %s", strings.Join(parts, ", "))
+	}
 	qbResp, qbErr := q.run(ctx, orgID, queries, req, steps, event)
 	if qbResp != nil {
 		qbResp.QBEvent = event
@@ -663,7 +680,7 @@ func (q *querier) run(
 }
 
 // executeWithCache executes a query using the bucket cache
-func (q *querier) executeWithCache(ctx context.Context, orgID valuer.UUID, query qbtypes.Query, step qbtypes.Step, noCache bool) (*qbtypes.Result, error) {
+func (q *querier) executeWithCache(ctx context.Context, orgID valuer.UUID, query qbtypes.Query, step qbtypes.Step, _ bool) (*qbtypes.Result, error) {
 	// Get cached data and missing ranges
 	cachedResult, missingRanges := q.bucketCache.GetMissRanges(ctx, orgID, query, step)
 

pkg/query-service/rules/manager_test.go

@@ -76,6 +76,21 @@ func TestManager_TestNotification_SendUnmatched_ThresholdRule(t *testing.T) {
 					alertDataRows := cmock.NewRows(cols, tc.Values)
 
 					mock := mockStore.Mock()
+					// Mock metadata queries for FetchTemporalityAndTypeMulti
+					// First query: fetchMetricsTemporalityAndType (from signoz_metrics time series table)
+					metadataCols := []cmock.ColumnType{
+						{Name: "metric_name", Type: "String"},
+						{Name: "temporality", Type: "String"},
+						{Name: "type", Type: "String"},
+						{Name: "is_monotonic", Type: "Bool"},
+					}
+					metadataRows := cmock.NewRows(metadataCols, [][]any{
+						{"probe_success", metrictypes.Unspecified, metrictypes.GaugeType, false},
+					})
+					mock.ExpectQuery("*distributed_time_series_v4*").WithArgs(nil, nil, nil).WillReturnRows(metadataRows)
+					// Second query: fetchMeterSourceMetricsTemporalityAndType (from signoz_meter table)
+					emptyMetadataRows := cmock.NewRows(metadataCols, [][]any{})
+					mock.ExpectQuery("*meter*").WithArgs(nil).WillReturnRows(emptyMetadataRows)
 
 					// Generate query arguments for the metric query
 					evalTime := time.Now().UTC()

pkg/telemetrymetadata/metadata.go

@@ -1928,3 +1928,37 @@ func (t *telemetryMetaStore) GetFirstSeenFromMetricMetadata(ctx context.Context,
 
 	return result, nil
 }
+
+func (t *telemetryMetaStore) FetchLastSeenInfoMulti(ctx context.Context, metricNames ...string) (map[string]int64, error) {
+	sb := sqlbuilder.Select(
+		"metric_name",
+		"max(unix_milli)",
+	).
+		From(t.metricsDBName + "." + telemetrymetrics.TimeseriesV4TableName)
+	sb.Where(sb.In("metric_name", metricNames))
+	sb.GroupBy("metric_name")
+
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+
+	t.logger.DebugContext(ctx, "fetching metric last seen timestamp", "query", query, "args", args)
+
+	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, args...)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to fetch metric last seen info")
+	}
+	defer rows.Close()
+
+	lastSeenInfo := make(map[string]int64)
+	for rows.Next() {
+		var metricName string
+		var unix_milli int64
+		if err := rows.Scan(&metricName, &unix_milli); err != nil {
+			return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to scan last seen info result")
+		}
+		lastSeenInfo[metricName] = unix_milli
+	}
+	if err := rows.Err(); err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "error iterating over metrics temporality rows")
+	}
+	return lastSeenInfo, nil
+}

pkg/types/telemetrytypes/store.go

@@ -45,6 +45,8 @@ type MetadataStore interface {
 
 	// GetFirstSeenFromMetricMetadata gets the first seen timestamp for a metric metadata lookup key.
 	GetFirstSeenFromMetricMetadata(ctx context.Context, lookupKeys []MetricMetadataLookupKey) (map[MetricMetadataLookupKey]int64, error)
+
+	FetchLastSeenInfoMulti(ctx context.Context, metricNames ...string) (map[string]int64, error)
 }
 
 type MetricMetadataLookupKey struct {

pkg/types/telemetrytypes/telemetrytypestest/metadata_store.go

@@ -342,3 +342,7 @@ func (m *MockMetadataStore) SetFirstSeenFromMetricMetadata(firstSeenMap map[tele
 		m.LookupKeysMap[key] = value
 	}
 }
+
+func (m *MockMetadataStore) FetchLastSeenInfoMulti(ctx context.Context, metricNames ...string) (map[string]int64, error) {
+	return make(map[string]int64), nil
+}

tests/integration/fixtures/clickhouse.py

@@ -75,6 +75,9 @@ def clickhouse(
                 </cluster>
             </remote_servers>
 
+            <user_defined_executable_functions_config>*function.xml</user_defined_executable_functions_config>
+            <user_scripts_path>/var/lib/clickhouse/user_scripts/</user_scripts_path>
+
             <distributed_ddl>
                 <path>/clickhouse/task_queue/ddl</path>
                 <profile>default</profile>
@@ -117,17 +120,73 @@ def clickhouse(
         </clickhouse>
         """
 
+        custom_function_config = """
+        <functions>
+            <function>
+                <type>executable</type>
+                <name>histogramQuantile</name>
+                <return_type>Float64</return_type>
+                <argument>
+                    <type>Array(Float64)</type>
+                    <name>buckets</name>
+                </argument>
+                <argument>
+                    <type>Array(Float64)</type>
+                    <name>counts</name>
+                </argument>
+                <argument>
+                    <type>Float64</type>
+                    <name>quantile</name>
+                </argument>
+                <format>CSV</format>
+                <command>./histogramQuantile</command>
+            </function>
+        </functions>
+        """
+
         tmp_dir = tmpfs("clickhouse")
         cluster_config_file_path = os.path.join(tmp_dir, "cluster.xml")
         with open(cluster_config_file_path, "w", encoding="utf-8") as f:
             f.write(cluster_config)
 
+        custom_function_file_path = os.path.join(tmp_dir, "custom-function.xml")
+        with open(custom_function_file_path, "w", encoding="utf-8") as f:
+            f.write(custom_function_config)
+
         container.with_volume_mapping(
             cluster_config_file_path, "/etc/clickhouse-server/config.d/cluster.xml"
         )
+        container.with_volume_mapping(
+            custom_function_file_path,
+            "/etc/clickhouse-server/custom-function.xml",
+        )
         container.with_network(network)
         container.start()
 
+        # Download and install the histogramQuantile binary
+        wrapped = container.get_wrapped_container()
+        exit_code, output = wrapped.exec_run(
+            [
+                "bash",
+                "-c",
+                (
+                    'version="v0.0.1" && '
+                    'node_os=$(uname -s | tr "[:upper:]" "[:lower:]") && '
+                    'node_arch=$(uname -m | sed s/aarch64/arm64/ | sed s/x86_64/amd64/) && '
+                    "cd /tmp && "
+                    'wget -O histogram-quantile.tar.gz "https://github.com/SigNoz/signoz/releases/download/histogram-quantile%2F${version}/histogram-quantile_${node_os}_${node_arch}.tar.gz" && '
+                    "tar -xzf histogram-quantile.tar.gz && "
+                    "mkdir -p /var/lib/clickhouse/user_scripts && "
+                    "mv histogram-quantile /var/lib/clickhouse/user_scripts/histogramQuantile && "
+                    "chmod +x /var/lib/clickhouse/user_scripts/histogramQuantile"
+                ),
+            ],
+        )
+        if exit_code != 0:
+            raise RuntimeError(
+                f"Failed to install histogramQuantile binary: {output.decode()}"
+            )
+
         connection = clickhouse_connect.get_client(
             user=container.username,
             password=container.password,

tests/integration/src/querier/08_metrics_histogram.py

@@ -372,3 +372,153 @@ def test_histogram_count_no_param(
             values[1]["value"] == first_values[le]
         )  ## to keep parallel to the cumulative test cases, first_value refers to the value at 10:02
         assert values[-1]["value"] == last_values[le]
+
+@pytest.mark.parametrize(
+    "space_agg, zeroth_value, first_value, last_value",
+    [
+        ("p50", 500, 818.182, 550.725),
+        ("p75", 750, 3000, 826.087),
+        ("p90", 900, 6400, 991.304),
+        ("p95", 950, 8000, 4200),
+        ("p99", 990, 8000, 8000),
+    ],
+)
+def test_histogram_percentile_for_all_services(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_metrics: Callable[[List[Metrics]], None],
+    space_agg: str,
+    zeroth_value: float,
+    first_value: float,
+    last_value: float,
+) -> None:
+    now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
+    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
+    end_ms = int(now.timestamp() * 1000)
+    metric_name = f"test_{space_agg}_bucket"
+
+    metrics = Metrics.load_from_file(
+        FILE,
+        base_time=now - timedelta(minutes=60),
+        metric_name_override=metric_name,
+    )
+    insert_metrics(metrics)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+    query = build_builder_query(
+        "A",
+        metric_name,
+        "doesnotreallymatter",
+        space_agg,
+    )
+
+    response = make_query_request(signoz, token, start_ms, end_ms, [query])
+    assert response.status_code == HTTPStatus.OK
+
+    data = response.json()
+    result_values = sorted(get_series_values(data, "A"), key=lambda x: x["timestamp"])
+    assert len(result_values) == 60
+    assert result_values[0]["value"] == zeroth_value
+    assert result_values[1]["value"] == first_value
+    assert result_values[-1]["value"] == last_value
+
+@pytest.mark.parametrize(
+    "space_agg, first_value, last_value",
+    [
+        ("p50", 818.182, 550.725),
+        ("p75", 3000, 826.087),
+        ("p90", 6400, 991.304),
+        ("p95", 8000, 4200),
+        ("p99", 8000, 8000),
+    ],
+)
+def test_histogram_percentile_for_cumulative_service(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_metrics: Callable[[List[Metrics]], None],
+    space_agg: str,
+    first_value: float,
+    last_value: float,
+) -> None:
+    now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
+    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
+    end_ms = int(now.timestamp() * 1000)
+    metric_name = f"test_{space_agg}_cumulative_bucket"
+
+    metrics = Metrics.load_from_file(
+        FILE,
+        base_time=now - timedelta(minutes=60),
+        metric_name_override=metric_name,
+    )
+    insert_metrics(metrics)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+    query = build_builder_query(
+        "A",
+        metric_name,
+        "doesnotreallymatter",
+        space_agg,
+        filter_expression='service = "api"',
+    )
+
+    response = make_query_request(signoz, token, start_ms, end_ms, [query])
+    assert response.status_code == HTTPStatus.OK
+
+    data = response.json()
+    result_values = sorted(get_series_values(data, "A"), key=lambda x: x["timestamp"])
+    assert len(result_values) == 59
+    assert result_values[0]["value"] == first_value
+    assert result_values[-1]["value"] == last_value
+
+@pytest.mark.parametrize(
+    "space_agg, zeroth_value, first_value, last_value",
+    [
+        ("p50", 500, 818.182, 550.725),
+        ("p75", 750, 3000, 826.087),
+        ("p90", 900, 6400, 991.304),
+        ("p95", 950, 8000, 4200),
+        ("p99", 990, 8000, 8000),
+    ],
+)
+def test_histogram_percentile_for_delta_service(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_metrics: Callable[[List[Metrics]], None],
+    space_agg: str,
+    zeroth_value: float,
+    first_value: float,
+    last_value: float,
+) -> None:
+    now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
+    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
+    end_ms = int(now.timestamp() * 1000)
+    metric_name = f"test_{space_agg}_bucket"
+
+    metrics = Metrics.load_from_file(
+        FILE,
+        base_time=now - timedelta(minutes=60),
+        metric_name_override=metric_name,
+    )
+    insert_metrics(metrics)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+    query = build_builder_query(
+        "A",
+        metric_name,
+        "doesnotreallymatter",
+        space_agg,
+        filter_expression='service = "web"',
+    )
+
+    response = make_query_request(signoz, token, start_ms, end_ms, [query])
+    assert response.status_code == HTTPStatus.OK
+
+    data = response.json()
+    result_values = sorted(get_series_values(data, "A"), key=lambda x: x["timestamp"])
+    assert len(result_values) == 60
+    assert result_values[0]["value"] == zeroth_value
+    assert result_values[1]["value"] == first_value
+    assert result_values[-1]["value"] == last_value