chore: broke down drilldown navigate into a saperate hook

fix: handle cancel functionality for Run Query Button (#10958 )
* fix: add ERR_CANCELED retry skip and new query key constants * refactor: add disabled prop and handleCancelQuery to shared query components (#10959) * refactor: add disabled prop and handleCancelQuery to shared query components * feat: add cancel query support to alert rule editing (#10960) * feat: add cancel query support to alert rule editing * feat: add cancel query support to CreateAlertV2 (#10961) * feat: add cancel query support to CreateAlertV2 * feat: add cancel query and AbortSignal support to MetricsExplorer Explorer (#10962) * feat: add cancel query and AbortSignal support to MetricsExplorer Explorer * feat: add cancel query support to MetricsExplorer Inspect (#10963) * feat: add cancel query support to MetricsExplorer Inspect * feat: add cancel query support to MetricsExplorer Summary (#10964) * feat: add cancel query support to MetricsExplorer Summary * feat: add cancel query support to MeterExplorer and dashboard widgets (#10965) * feat: add cancel query support to MeterExplorer and dashboard widgets * feat: add cancel query support to Logs, Traces, Exceptions and API Monitoring (#10972) * feat: add cancel query support to Logs, Traces, Errors, and API Monitoring * refactor: remove deprecated props and enforce strict query cancel interfaces (#10974) * refactor: remove deprecated props and enforce strict query cancel interfaces * fix: metrics explorer inspect cancel and run query bugs (#10975) * fix: metrics explorer inspect cancel and run query bugs * fix: api monitoring cancel and run query bugs (#10984) * feat: add cancelled query placeholder UI to alerts, explorers, exceptions, and api monitoring (#10988) * feat: add cancel query support to MeterExplorer and dashboard widgets * fix: api monitoring cancel and run query bugs * feat: add cancelled query placeholder UI to alerts, explorers, exceptions, and api monitoring * fix: cancelled placeholder for alert v2 and metrics inspect, use css modules * fix: cancelled placeholder race condition in metrics inspect auto-reset * fix: prioritize cancelled state over loading in metrics inspect content * fix: keep query builder rendered and match graph view height in inspect fallback * feat: add cancelled query placeholder to logs, traces, and dashboard widgets (#11007) * feat: add cancelled query placeholder to logs, traces, and dashboard widgets * fix: reset cancel on run and swap only chart body in widget graph * fix: use constants for max retry count (#11049) * fix: use semantic tokens
2026-04-23 12:20:31 +01:00 · 2026-04-23 13:46:19 +05:30 · 2026-04-23 06:58:50 +00:00
84 changed files with 1422 additions and 970 deletions
--- a/frontend/.oxlintrc.json
+++ b/frontend/.oxlintrc.json
@@ -286,8 +286,6 @@
    // Prevents useStore.getState() - export standalone actions instead
    "signoz/no-navigator-clipboard": "error",
    // Prevents navigator.clipboard - use useCopyToClipboard hook instead (disabled in tests via override)
-    "signoz/no-raw-absolute-path": "warn",
-    // Prevents window.open(path), window.location.origin + path, window.location.href = path
    "no-restricted-imports": [
      "error",
      {
@@ -599,9 +597,8 @@
      "rules": {
        "import/first": "off",
        // Should ignore due to mocks
-        "signoz/no-navigator-clipboard": "off",
-        // Tests can use navigator.clipboard directly,
-        "signoz/no-raw-absolute-path":"off"
+        "signoz/no-navigator-clipboard": "off"
+        // Tests can use navigator.clipboard directly
      }
    },
    {
--- a/frontend/.stylelintrc.cjs
+++ b/frontend/.stylelintrc.cjs
@@ -1,4 +1,3 @@
-// oxlint-disable-next-line typescript/no-require-imports
 const path = require('path');

 module.exports = {
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="[[.BaseHref]]" />
 		<meta
 			http-equiv="Cache-Control"
 			content="no-cache, no-store, must-revalidate, max-age: 0"
@@ -60,7 +59,7 @@
 		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
 		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
 		<meta name="robots" content="noindex" />
-		<link data-react-helmet="true" rel="shortcut icon" href="favicon.ico" />
+		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
 	</head>
 	<body data-theme="default">
 		<script>
@@ -137,7 +136,7 @@
 				})(document, 'script');
 			}
 		</script>
-		<link rel="stylesheet" href="css/uPlot.min.css" />
+		<link rel="stylesheet" href="/css/uPlot.min.css" />
 		<script type="module" src="./src/index.tsx"></script>
 	</body>
 </html>
--- a/frontend/plugins/rules/no-raw-absolute-path.mjs
+++ b/frontend/plugins/rules/no-raw-absolute-path.mjs
@@ -1,152 +0,0 @@
-/**
- * Rule: no-raw-absolute-path
- *
- * Catches patterns that break at runtime when the app is served from a
- * sub-path (e.g. /signoz/):
- *
- *   1. window.open(path, '_blank')
- *      → use openInNewTab(path) which calls withBasePath internally
- *
- *   2. window.location.origin + path  /  `${window.location.origin}${path}`
- *      → use getAbsoluteUrl(path)
- *
- *   3. frontendBaseUrl: window.location.origin  (bare origin usage)
- *      → use getBaseUrl() to include the base path
- *
- *   4. window.location.href = path
- *      → use withBasePath(path) or navigate() for internal navigation
- *
- * External URLs (first arg starts with "http") are explicitly allowed.
- */
-
-function isOriginAccess(node) {
-	return (
-		node.type === 'MemberExpression' &&
-		!node.computed &&
-		node.property.name === 'origin' &&
-		node.object.type === 'MemberExpression' &&
-		!node.object.computed &&
-		node.object.property.name === 'location' &&
-		node.object.object.type === 'Identifier' &&
-		node.object.object.name === 'window'
-	);
-}
-
-function isHrefAccess(node) {
-	return (
-		node.type === 'MemberExpression' &&
-		!node.computed &&
-		node.property.name === 'href' &&
-		node.object.type === 'MemberExpression' &&
-		!node.object.computed &&
-		node.object.property.name === 'location' &&
-		node.object.object.type === 'Identifier' &&
-		node.object.object.name === 'window'
-	);
-}
-
-function isExternalUrl(node) {
-	if (node.type === 'Literal' && typeof node.value === 'string') {
-		return node.value.startsWith('http://') || node.value.startsWith('https://');
-	}
-	if (node.type === 'TemplateLiteral' && node.quasis.length > 0) {
-		const raw = node.quasis[0].value.raw;
-		return raw.startsWith('http://') || raw.startsWith('https://');
-	}
-	return false;
-}
-
-
-// window.open(withBasePath(x)) and window.open(getAbsoluteUrl(x)) are already safe.
-function isSafeHelperCall(node) {
-	return (
-		node.type === 'CallExpression' &&
-		node.callee.type === 'Identifier' &&
-		(node.callee.name === 'withBasePath' || node.callee.name === 'getAbsoluteUrl')
-	);
-}
-
-export default {
-	meta: {
-		type: 'suggestion',
-		docs: {
-			description:
-				'Disallow raw window.open and origin-concatenation patterns that miss the runtime base path',
-			category: 'Base Path Safety',
-		},
-		schema: [],
-		messages: {
-			windowOpen:
-				'Use openInNewTab(path) instead of window.open(path, "_blank") — openInNewTab prepends the base path automatically.',
-			originConcat:
-				'Use getAbsoluteUrl(path) instead of window.location.origin + path — getAbsoluteUrl prepends the base path automatically.',
-			originDirect:
-				'Use getBaseUrl() instead of window.location.origin — getBaseUrl includes the base path.',
-			hrefAssign:
-				'Use withBasePath(path) or navigate() instead of window.location.href = path — ensures the base path is included.',
-		},
-	},
-
-	create(context) {
-		return {
-			// window.open(path, ...) — allow only external first-arg URLs
-			CallExpression(node) {
-				const { callee, arguments: args } = node;
-				if (
-					callee.type !== 'MemberExpression' ||
-					callee.object.type !== 'Identifier' ||
-					callee.object.name !== 'window' ||
-					callee.property.name !== 'open'
-				)
-					{return;}
-				if (args.length === 0) {return;}
-				if (isExternalUrl(args[0])) {return;}
-				if (isSafeHelperCall(args[0])) {return;}
-
-				context.report({ node, messageId: 'windowOpen' });
-			},
-
-			// window.location.origin + path
-			BinaryExpression(node) {
-				if (node.operator !== '+') {return;}
-				if (isOriginAccess(node.left) || isOriginAccess(node.right)) {
-					context.report({ node, messageId: 'originConcat' });
-				}
-			},
-
-			// `${window.location.origin}${path}`
-			TemplateLiteral(node) {
-				if (node.expressions.some(isOriginAccess)) {
-					context.report({ node, messageId: 'originConcat' });
-				}
-			},
-
-			// window.location.origin used directly (not in concatenation)
-			// Catches: frontendBaseUrl: window.location.origin
-			MemberExpression(node) {
-				if (!isOriginAccess(node)) {return;}
-
-				const parent = node.parent;
-				// Skip if parent is BinaryExpression with + (handled by BinaryExpression visitor)
-				if (parent.type === 'BinaryExpression' && parent.operator === '+') {return;}
-				// Skip if inside TemplateLiteral (handled by TemplateLiteral visitor)
-				if (parent.type === 'TemplateLiteral') {return;}
-
-				context.report({ node, messageId: 'originDirect' });
-			},
-
-			// window.location.href = path
-			AssignmentExpression(node) {
-				if (node.operator !== '=') {return;}
-				if (!isHrefAccess(node.left)) {return;}
-
-				// Allow external URLs
-				if (isExternalUrl(node.right)) {return;}
-				// Allow safe helper calls
-				if (isSafeHelperCall(node.right)) {return;}
-
-				context.report({ node, messageId: 'hrefAssign' });
-			},
-		};
-	},
-};
--- a/frontend/plugins/signoz.mjs
+++ b/frontend/plugins/signoz.mjs
@@ -8,7 +8,6 @@
 import noZustandGetStateInHooks from './rules/no-zustand-getstate-in-hooks.mjs';
 import noNavigatorClipboard from './rules/no-navigator-clipboard.mjs';
 import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs';
-import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';

 export default {
 	meta: {
@@ -18,6 +17,5 @@ export default {
 		'no-zustand-getstate-in-hooks': noZustandGetStateInHooks,
 		'no-navigator-clipboard': noNavigatorClipboard,
 		'no-unsupported-asset-pattern': noUnsupportedAssetPattern,
-		'no-raw-absolute-path': noRawAbsolutePath,
 	},
 };
--- a/frontend/src/ReactI18/index.tsx
+++ b/frontend/src/ReactI18/index.tsx
@@ -2,7 +2,6 @@ import { initReactI18next } from 'react-i18next';
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
-import { getBasePath } from 'utils/basePath';

 import cacheBursting from '../../i18n-translations-hash.json';

@@ -25,7 +24,7 @@ i18n
 				const ns = namespace[0];
 				const pathkey = `/${language}/${ns}`;
 				const hash = cacheBursting[pathkey as keyof typeof cacheBursting] || '';
-				return `${getBasePath()}locales/${language}/${namespace}.json?h=${hash}`;
+				return `/locales/${language}/${namespace}.json?h=${hash}`;
 			},
 		},
 		react: {
--- a/frontend/src/api/generatedAPIInstance.ts
+++ b/frontend/src/api/generatedAPIInstance.ts
@@ -1,6 +1,5 @@
 import {
 	interceptorRejected,
-	interceptorsRequestBasePath,
 	interceptorsRequestResponse,
 	interceptorsResponse,
 } from 'api';
@@ -18,7 +17,6 @@ export const GeneratedAPIInstance = <T>(
 	return generatedAPIAxiosInstance({ ...config }).then(({ data }) => data);
 };

-generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
 generatedAPIAxiosInstance.interceptors.response.use(
 	interceptorsResponse,
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -11,7 +11,6 @@ import axios, {
 import { ENVIRONMENT } from 'constants/env';
 import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { getBasePath } from 'utils/basePath';
 import { eventEmitter } from 'utils/getEventEmitter';

 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
@@ -68,39 +67,6 @@ export const interceptorsRequestResponse = (
 	return value;
 };

-// Strips the leading '/' from path and joins with base — idempotent if already prefixed.
-// e.g. prependBase('/signoz/', '/api/v1/') → '/signoz/api/v1/'
-function prependBase(base: string, path: string): string {
-	return path.startsWith(base) ? path : base + path.slice(1);
-}
-
-// Prepends the runtime base path to outgoing requests so API calls work under
-// a URL prefix (e.g. /signoz/api/v1/…). No-op for root deployments and dev
-// (dev baseURL is a full http:// URL, not an absolute path).
-export const interceptorsRequestBasePath = (
-	value: InternalAxiosRequestConfig,
-): InternalAxiosRequestConfig => {
-	const basePath = getBasePath();
-	if (basePath === '/') {
-		return value;
-	}
-
-	if (value.baseURL?.startsWith('/')) {
-		// Production relative baseURL: '/api/v1/' → '/signoz/api/v1/'
-		value.baseURL = prependBase(basePath, value.baseURL);
-	} else if (value.baseURL?.startsWith('http')) {
-		// Dev absolute baseURL (VITE_FRONTEND_API_ENDPOINT): 'https://host/api/v1/' → 'https://host/signoz/api/v1/'
-		const url = new URL(value.baseURL);
-		url.pathname = prependBase(basePath, url.pathname);
-		value.baseURL = url.toString();
-	} else if (!value.baseURL && value.url?.startsWith('/')) {
-		// Orval-generated client (empty baseURL, path in url): '/api/signoz/v1/rules' → '/signoz/api/signoz/v1/rules'
-		value.url = prependBase(basePath, value.url);
-	}
-
-	return value;
-};
-
 export const interceptorRejected = async (
 	value: AxiosResponse<any>,
 ): Promise<AxiosResponse<any>> => {
@@ -167,7 +133,6 @@ const instance = axios.create({
 });

 instance.interceptors.request.use(interceptorsRequestResponse);
-instance.interceptors.request.use(interceptorsRequestBasePath);
 instance.interceptors.response.use(interceptorsResponse, interceptorRejected);

 export const AxiosAlertManagerInstance = axios.create({
@@ -182,7 +147,6 @@ ApiV2Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
-ApiV2Instance.interceptors.request.use(interceptorsRequestBasePath);

 // axios V3
 export const ApiV3Instance = axios.create({
@@ -194,7 +158,6 @@ ApiV3Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV3Instance.interceptors.request.use(interceptorsRequestResponse);
-ApiV3Instance.interceptors.request.use(interceptorsRequestBasePath);
 //

 // axios V4
@@ -207,7 +170,6 @@ ApiV4Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
-ApiV4Instance.interceptors.request.use(interceptorsRequestBasePath);
 //

 // axios V5
@@ -220,7 +182,6 @@ ApiV5Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
-ApiV5Instance.interceptors.request.use(interceptorsRequestBasePath);
 //

 // axios Base
@@ -233,7 +194,6 @@ LogEventAxiosInstance.interceptors.response.use(
 	interceptorRejectedBase,
 );
 LogEventAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
-LogEventAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 //

 AxiosAlertManagerInstance.interceptors.response.use(
@@ -241,7 +201,6 @@ AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorRejected,
 );
 AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestResponse);
-AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestBasePath);

 export { apiV1 };
 export default instance;
--- a/frontend/src/api/thirdPartyApis/listOverview.ts
+++ b/frontend/src/api/thirdPartyApis/listOverview.ts
@@ -6,15 +6,20 @@ import { PayloadProps, Props } from 'types/api/thirdPartyApis/listOverview';

 const listOverview = async (
 	props: Props,
+	signal?: AbortSignal,
 ): Promise<SuccessResponseV2<PayloadProps>> => {
 	const { start, end, show_ip: showIp, filter } = props;
 	try {
-		const response = await axios.post(`/third-party-apis/overview/list`, {
-			start,
-			end,
-			show_ip: showIp,
-			filter,
-		});
+		const response = await axios.post(
+			`/third-party-apis/overview/list`,
+			{
+				start,
+				end,
+				show_ip: showIp,
+				filter,
+			},
+			{ signal },
+		);

 		return {
 			httpStatusCode: response.status,
--- a/frontend/src/components/CeleryTask/useNavigateToExplorer.ts
+++ b/frontend/src/components/CeleryTask/useNavigateToExplorer.ts
@@ -12,7 +12,6 @@ import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { withBasePath } from 'utils/basePath';

 export interface NavigateToExplorerProps {
 	filters: TagFilterItem[];
@@ -134,7 +133,7 @@ export function useNavigateToExplorer(): (
 				QueryParams.compositeQuery
 			}=${JSONCompositeQuery}`;

-			window.open(withBasePath(newExplorerPath), sameTab ? '_self' : '_blank');
+			window.open(newExplorerPath, sameTab ? '_self' : '_blank');
 		},
 		[
 			prepareQuery,
--- a/frontend/src/components/HeaderRightSection/ShareURLModal.tsx
+++ b/frontend/src/components/HeaderRightSection/ShareURLModal.tsx
@@ -13,7 +13,6 @@ import GetMinMax from 'lib/getMinMax';
 import { Check, Info, Link2 } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { getAbsoluteUrl } from 'utils/basePath';

 const routesToBeSharedWithTime = [
 	ROUTES.LOGS_EXPLORER,
@@ -81,13 +80,17 @@ function ShareURLModal(): JSX.Element {

 				urlQuery.delete(QueryParams.relativeTime);

-				currentUrl = getAbsoluteUrl(`${location.pathname}?${urlQuery.toString()}`);
+				currentUrl = `${window.location.origin}${
+					location.pathname
+				}?${urlQuery.toString()}`;
 			} else {
 				urlQuery.delete(QueryParams.startTime);
 				urlQuery.delete(QueryParams.endTime);

 				urlQuery.set(QueryParams.relativeTime, selectedTime);
-				currentUrl = getAbsoluteUrl(`${location.pathname}?${urlQuery.toString()}`);
+				currentUrl = `${window.location.origin}${
+					location.pathname
+				}?${urlQuery.toString()}`;
 			}
 		}

--- a/frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.module.scss
+++ b/frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.module.scss
@@ -0,0 +1,26 @@
+.placeholder {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	min-height: 240px;
+	width: 100%;
+	padding: 24px;
+	gap: 12px;
+}
+
+.emoji {
+	width: 48px;
+	height: 48px;
+}
+
+.text {
+	text-align: center;
+	font-size: 14px;
+	color: var(--muted-foreground);
+}
+
+.subText {
+	color: var(--foreground);
+}
--- a/frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.tsx
+++ b/frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.tsx
@@ -0,0 +1,31 @@
+import { Typography } from 'antd';
+import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
+
+import styles from './QueryCancelledPlaceholder.module.scss';
+
+interface QueryCancelledPlaceholderProps {
+	subText?: string;
+}
+
+function QueryCancelledPlaceholder({
+	subText,
+}: QueryCancelledPlaceholderProps): JSX.Element {
+	return (
+		<div className={styles.placeholder}>
+			<img className={styles.emoji} src={eyesEmojiUrl} alt="eyes emoji" />
+			<Typography className={styles.text}>
+				Query cancelled.
+				<span className={styles.subText}>
+					{' '}
+					{subText || 'Click "Run Query" to load data.'}
+				</span>
+			</Typography>
+		</div>
+	);
+}
+
+QueryCancelledPlaceholder.defaultProps = {
+	subText: undefined,
+};
+
+export default QueryCancelledPlaceholder;
--- a/frontend/src/components/QueryCancelledPlaceholder/index.ts
+++ b/frontend/src/components/QueryCancelledPlaceholder/index.ts
@@ -0,0 +1 @@
+export { default } from './QueryCancelledPlaceholder';
--- a/frontend/src/constants/reactQuery.ts
+++ b/frontend/src/constants/reactQuery.ts
@@ -0,0 +1,8 @@
+/**
+ * Maximum number of retries for a failed react-query request before giving up.
+ * Used as the upper bound in the default `retry` predicate:
+ *   `return failureCount < MAX_QUERY_RETRIES;`
+ *
+ * This retries up to 3 times (4 attempts total including the initial request).
+ */
+export const MAX_QUERY_RETRIES = 3;
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -25,7 +25,8 @@ export const REACT_QUERY_KEY = {
 	ALERT_RULE_TIMELINE_GRAPH: 'ALERT_RULE_TIMELINE_GRAPH',
 	GET_CONSUMER_LAG_DETAILS: 'GET_CONSUMER_LAG_DETAILS',
 	TOGGLE_ALERT_STATE: 'TOGGLE_ALERT_STATE',
-	GET_ALL_ALLERTS: 'GET_ALL_ALLERTS',
+	GET_ALL_ALERTS: 'GET_ALL_ALERTS',
+	ALERT_RULES_CHART_PREVIEW: 'ALERT_RULES_CHART_PREVIEW',
 	REMOVE_ALERT_RULE: 'REMOVE_ALERT_RULE',
 	DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
 	GET_HOST_LIST: 'GET_HOST_LIST',
--- a/frontend/src/container/AllError/index.tsx
+++ b/frontend/src/container/AllError/index.tsx
@@ -21,6 +21,7 @@ import { FilterConfirmProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import getAll from 'api/errors/getAll';
 import getErrorCounts from 'api/errors/getErrorCounts';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { ResizeTable } from 'components/ResizeTable';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
@@ -36,6 +37,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
+import { useAllErrorsQueryState } from 'pages/AllErrors/QueryStateContext';
 import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -121,7 +123,13 @@ function AllErrors(): JSX.Element {
 	const { queries } = useResourceAttribute();
 	const compositeData = useGetCompositeQueryParam();

-	const [{ isLoading, data }, errorCountResponse] = useQueries([
+	const setIsFetching = useAllErrorsQueryState((s) => s.setIsFetching);
+	const isCancelled = useAllErrorsQueryState((s) => s.isCancelled);
+
+	const [
+		{ isLoading, isFetching: isErrorsFetching, data },
+		errorCountResponse,
+	] = useQueries([
 		{
 			queryKey: ['getAllErrors', updatedPath, maxTime, minTime, compositeData],
 			queryFn: (): Promise<SuccessResponse<PayloadProps> | ErrorResponse> =>
@@ -162,6 +170,12 @@ function AllErrors(): JSX.Element {
 			enabled: !loading,
 		},
 	]);
+
+	const isFetching = isErrorsFetching || errorCountResponse.isFetching;
+	useEffect(() => {
+		setIsFetching(isFetching);
+	}, [isFetching, setIsFetching]);
+
 	const { notifications } = useNotifications();

 	useEffect(() => {
@@ -473,6 +487,12 @@ function AllErrors(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [errorCountResponse.data?.payload]);

+	if (isCancelled && !data?.payload?.length) {
+		return (
+			<QueryCancelledPlaceholder subText='Click "Run Query" to load exceptions.' />
+		);
+	}
+
 	return (
 		<ResizeTable
 			columns={columns}
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx
@@ -9,7 +9,6 @@ import {
 } from 'container/ApiMonitoring/utils';
 import { UnfoldVertical } from 'lucide-react';
 import { SuccessResponse } from 'types/api';
-import { openInNewTab } from 'utils/navigation';

 import emptyStateUrl from '@/assets/Icons/emptyState.svg';

@@ -95,14 +94,20 @@ function DependentServices({
 					}}
 					onRow={(record): { onClick: () => void; className: string } => ({
 						onClick: (): void => {
-							const serviceName =
-								record.serviceData.serviceName && record.serviceData.serviceName !== '-'
-									? record.serviceData.serviceName
-									: '';
+							const url = new URL(
+								`/services/${
+									record.serviceData.serviceName &&
+									record.serviceData.serviceName !== '-'
+										? record.serviceData.serviceName
+										: ''
+								}`,
+								window.location.origin,
+							);
 							const urlQuery = new URLSearchParams();
 							urlQuery.set(QueryParams.startTime, timeRange.startTime.toString());
 							urlQuery.set(QueryParams.endTime, timeRange.endTime.toString());
-							openInNewTab(`/services/${serviceName}?${urlQuery.toString()}`);
+							url.search = urlQuery.toString();
+							window.open(url.toString(), '_blank');
 						},
 						className: 'clickable-row',
 					})}
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx
@@ -1,12 +1,16 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { LoadingOutlined } from '@ant-design/icons';
 import { Spin, Table } from 'antd';
 import logEvent from 'api/common/logEvent';
+import emptyStateUrl from 'assets/Icons/emptyState.svg';
 import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { initialQueriesMap } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
@@ -23,8 +27,6 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';

-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import { ApiMonitoringHardcodedAttributeKeys } from '../../constants';
 import { DEFAULT_PARAMS, useApiMonitoringParams } from '../../queryParams';
 import { columnsConfig, formatDataForTable } from '../../utils';
@@ -40,6 +42,7 @@ function DomainList(): JSX.Element {
 		(state) => state.globalTime,
 	);

+	const queryClient = useQueryClient();
 	const { currentQuery, handleRunQuery } = useQueryBuilder();
 	const query = useMemo(() => currentQuery?.builder?.queryData[0] || null, [
 		currentQuery,
@@ -53,6 +56,19 @@ function DomainList(): JSX.Element {

 	const compositeData = useGetCompositeQueryParam();

+	const [isCancelled, setIsCancelled] = useState(false);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_DOMAINS_LIST]);
+		setIsCancelled(true);
+	}, [queryClient]);
+
+	const handleStageAndRunQuery = useCallback(() => {
+		setIsCancelled(false);
+		queryClient.invalidateQueries([REACT_QUERY_KEY.GET_DOMAINS_LIST]);
+		handleRunQuery();
+	}, [queryClient, handleRunQuery]);
+
 	const { data, isLoading, isFetching } = useListOverview({
 		start: minTime,
 		end: maxTime,
@@ -105,6 +121,13 @@ function DomainList(): JSX.Element {
 		[data],
 	);

+	// Auto-reset cancelled state when a new fetch starts
+	useEffect(() => {
+		if (isFetching) {
+			setIsCancelled(false);
+		}
+	}, [isFetching]);
+
 	// Open drawer if selectedDomain is set in URL
 	useEffect(() => {
 		if (selectedDomain && formattedDataForTable?.length > 0) {
@@ -119,7 +142,13 @@ function DomainList(): JSX.Element {
 		<section className={cx('api-module-right-section')}>
 			<Toolbar
 				showAutoRefresh={false}
-				rightActions={<RightToolbarActions onStageRunQuery={handleRunQuery} />}
+				rightActions={
+					<RightToolbarActions
+						onStageRunQuery={handleStageAndRunQuery}
+						isLoadingQueries={isFetching}
+						handleCancelQuery={handleCancelQuery}
+					/>
+				}
 			/>
 			<div className={cx('api-monitoring-list-header')}>
 				<QuerySearch
@@ -130,38 +159,44 @@ function DomainList(): JSX.Element {
 					hardcodedAttributeKeys={ApiMonitoringHardcodedAttributeKeys}
 				/>
 			</div>
-			{!isFetching && !isLoading && formattedDataForTable.length === 0 && (
-				<div className="no-filtered-domains-message-container">
-					<div className="no-filtered-domains-message-content">
-						<img
-							src={emptyStateUrl}
-							alt="thinking-emoji"
-							className="empty-state-svg"
-						/>
+			{isCancelled && formattedDataForTable.length === 0 && (
+				<QueryCancelledPlaceholder subText='Click "Run Query" to load API monitoring data.' />
+			)}
+			{!isCancelled &&
+				!isFetching &&
+				!isLoading &&
+				formattedDataForTable.length === 0 && (
+					<div className="no-filtered-domains-message-container">
+						<div className="no-filtered-domains-message-content">
+							<img
+								src={emptyStateUrl}
+								alt="thinking-emoji"
+								className="empty-state-svg"
+							/>

-						<div className="no-filtered-domains-message">
-							<div className="no-domain-title">
-								No External API calls detected with applied filters.
+							<div className="no-filtered-domains-message">
+								<div className="no-domain-title">
+									No External API calls detected with applied filters.
+								</div>
+								<div className="no-domain-subtitle">
+									Ensure all HTTP client spans are being sent with kind as{' '}
+									<span className="attribute">Client</span> and url set in{' '}
+									<span className="attribute">url.full</span> or{' '}
+									<span className="attribute">http.url</span> attribute.
+								</div>
+								<a
+									href={DOCLINKS.EXTERNAL_API_MONITORING}
+									target="_blank"
+									rel="noreferrer"
+									className="external-api-doc-link"
+								>
+									Learn how External API monitoring works in SigNoz{' '}
+									<MoveUpRight size={14} />
+								</a>
 							</div>
-							<div className="no-domain-subtitle">
-								Ensure all HTTP client spans are being sent with kind as{' '}
-								<span className="attribute">Client</span> and url set in{' '}
-								<span className="attribute">url.full</span> or{' '}
-								<span className="attribute">http.url</span> attribute.
-							</div>
-							<a
-								href={DOCLINKS.EXTERNAL_API_MONITORING}
-								target="_blank"
-								rel="noreferrer"
-								className="external-api-doc-link"
-							>
-								Learn how External API monitoring works in SigNoz{' '}
-								<MoveUpRight size={14} />
-							</a>
 						</div>
 					</div>
-				</div>
-			)}
+				)}
 			{(isFetching || isLoading || formattedDataForTable.length > 0) && (
 				<Table
 					className="api-monitoring-domain-list-table"
--- a/frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx
@@ -14,7 +14,6 @@ import { IUser } from 'providers/App/types';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { USER_ROLES } from 'types/roles';
-import { openInNewTab } from 'utils/navigation';

 import { ROUTING_POLICIES_ROUTE } from './constants';
 import { RoutingPolicyBannerProps } from './types';
@@ -388,7 +387,7 @@ export function NotificationChannelsNotFoundContent({
 							style={{ padding: '0 4px' }}
 							type="link"
 							onClick={(): void => {
-								openInNewTab(ROUTES.CHANNELS_NEW);
+								window.open(ROUTES.CHANNELS_NEW, '_blank');
 							}}
 						>
 							here.
--- a/frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx
+++ b/frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx
@@ -18,9 +18,16 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 export interface ChartPreviewProps {
 	alertDef: AlertDef;
 	source?: YAxisSource;
+	isCancelled?: boolean;
+	onFetchingStateChange?: (isFetching: boolean) => void;
 }

-function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
+function ChartPreview({
+	alertDef,
+	source,
+	isCancelled = false,
+	onFetchingStateChange,
+}: ChartPreviewProps): JSX.Element {
 	const { currentQuery, panelType, stagedQuery } = useQueryBuilder();
 	const {
 		alertType,
@@ -88,6 +95,8 @@ function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
 			additionalThresholds={thresholdState.thresholds}
+			isCancelled={isCancelled}
+			onFetchingStateChange={onFetchingStateChange}
 		/>
 	);

@@ -102,6 +111,8 @@ function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
 			additionalThresholds={thresholdState.thresholds}
+			isCancelled={isCancelled}
+			onFetchingStateChange={onFetchingStateChange}
 		/>
 	);

--- a/frontend/src/container/CreateAlertV2/QuerySection/QuerySection.tsx
+++ b/frontend/src/container/CreateAlertV2/QuerySection/QuerySection.tsx
@@ -1,9 +1,11 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { Button } from 'antd';
 import classNames from 'classnames';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import QuerySectionComponent from 'container/FormAlertRules/QuerySection';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { getMetricNameFromQueryData } from 'hooks/useGetYAxisUnit';
@@ -62,7 +64,24 @@ function QuerySection(): JSX.Element {
 		return currentQueryKey !== stagedQueryKey;
 	}, [currentQuery, alertType, thresholdState, stagedQuery]);

+	const queryClient = useQueryClient();
+	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingQueries) {
+			setIsCancelled(false);
+		}
+	}, [isLoadingQueries]);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
+		setIsCancelled(true);
+	}, [queryClient]);
+
 	const runQueryHandler = useCallback(() => {
+		setIsCancelled(false);
+		queryClient.invalidateQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
 		// Reset the source param when the query is changed
 		// Then manually run the query
 		if (source === YAxisSource.DASHBOARDS && didQueryChange) {
@@ -76,6 +95,7 @@ function QuerySection(): JSX.Element {
 		currentQuery,
 		didQueryChange,
 		handleRunQuery,
+		queryClient,
 		redirectWithQueryBuilderData,
 		source,
 	]);
@@ -106,7 +126,12 @@ function QuerySection(): JSX.Element {
 	return (
 		<div className="query-section">
 			<Stepper stepNumber={1} label="Define the query" />
-			<ChartPreview alertDef={alertDef} source={source} />
+			<ChartPreview
+				alertDef={alertDef}
+				source={source}
+				isCancelled={isCancelled}
+				onFetchingStateChange={setIsLoadingQueries}
+			/>
 			<div className="query-section-tabs">
 				<div className="query-section-query-actions">
 					{tabs.map((tab) => (
@@ -130,6 +155,8 @@ function QuerySection(): JSX.Element {
 				setQueryCategory={onQueryCategoryChange}
 				alertType={alertType}
 				runQuery={runQueryHandler}
+				isLoadingQueries={isLoadingQueries}
+				handleCancelQuery={handleCancelQuery}
 				alertDef={alertDef}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				key={currentQuery.queryType}
--- a/frontend/src/container/FormAlertRules/BasicInfo.tsx
+++ b/frontend/src/container/FormAlertRules/BasicInfo.tsx
@@ -15,7 +15,6 @@ import { AlertDef, Labels } from 'types/api/alerts/def';
 import { Channels } from 'types/api/channels/getAll';
 import APIError from 'types/api/error';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
-import { openInNewTab } from 'utils/navigation';
 import { popupContainer } from 'utils/selectPopupContainer';

 import ChannelSelect from './ChannelSelect';
@@ -88,7 +87,7 @@ function BasicInfo({
 			dataSource: ALERTS_DATA_SOURCE_MAP[alertDef?.alertType as AlertTypes],
 			ruleId: isNewRule ? 0 : alertDef?.id,
 		});
-		openInNewTab(ROUTES.CHANNELS_NEW);
+		window.open(ROUTES.CHANNELS_NEW, '_blank');
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 	const hasLoggedEvent = useRef(false);
--- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
+++ b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
@@ -4,12 +4,14 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import Spinner from 'components/Spinner';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import AnomalyAlertEvaluationView from 'container/AnomalyAlertEvaluationView';
 import { INITIAL_CRITICAL_THRESHOLD } from 'container/CreateAlertV2/context/constants';
 import { Threshold } from 'container/CreateAlertV2/context/types';
@@ -69,6 +71,8 @@ export interface ChartPreviewProps {
 	setQueryStatus?: (status: string) => void;
 	showSideLegend?: boolean;
 	additionalThresholds?: Threshold[];
+	isCancelled?: boolean;
+	onFetchingStateChange?: (isFetching: boolean) => void;
 }

 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -86,6 +90,8 @@ function ChartPreview({
 	setQueryStatus,
 	showSideLegend = false,
 	additionalThresholds,
+	isCancelled = false,
+	onFetchingStateChange,
 }: ChartPreviewProps): JSX.Element | null {
 	const { t } = useTranslation('alerts');
 	const dispatch = useDispatch();
@@ -185,7 +191,7 @@ function ChartPreview({
 		ENTITY_VERSION_V5,
 		{
 			queryKey: [
-				'chartPreview',
+				REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW,
 				userQueryKey || JSON.stringify(query),
 				selectedInterval,
 				minTime,
@@ -193,9 +199,14 @@ function ChartPreview({
 				alertDef?.ruleType,
 			],
 			enabled: canQuery,
+			keepPreviousData: true,
 		},
 	);

+	useEffect(() => {
+		onFetchingStateChange?.(queryResponse.isFetching);
+	}, [queryResponse.isFetching, onFetchingStateChange]);
+
 	const graphRef = useRef<HTMLDivElement>(null);

 	useEffect((): void => {
@@ -334,11 +345,16 @@ function ChartPreview({

 	const chartData = getUPlotChartData(queryResponse?.data?.payload);

+	const hasResultData = !!queryResponse?.data?.payload?.data?.result?.length;
+
 	const isAnomalyDetectionAlert =
 		alertDef?.ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT;

 	const chartDataAvailable =
-		chartData && !queryResponse.isError && !queryResponse.isLoading;
+		chartData &&
+		hasResultData &&
+		!queryResponse.isLoading &&
+		(!queryResponse.isError || isCancelled);

 	const isAnomalyDetectionEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.ANOMALY_DETECTION)
@@ -359,10 +375,14 @@ function ChartPreview({
 					{queryResponse.isLoading && (
 						<Spinner size="large" tip="Loading..." height="100%" />
 					)}
-					{(queryResponse?.isError || queryResponse?.error) && (
+					{(queryResponse?.isError || queryResponse?.error) && !isCancelled && (
 						<ErrorInPlace error={queryResponse.error as APIError} />
 					)}

+					{isCancelled && !queryResponse.isLoading && !hasResultData && (
+						<QueryCancelledPlaceholder subText='Click "Run Query" to load the chart preview.' />
+					)}
+
 					{chartDataAvailable && !isAnomalyDetectionAlert && (
 						<GridPanelSwitch
 							options={options}
@@ -403,6 +423,8 @@ ChartPreview.defaultProps = {
 	setQueryStatus: (): void => {},
 	showSideLegend: false,
 	additionalThresholds: undefined,
+	isCancelled: false,
+	onFetchingStateChange: undefined,
 };

 export default ChartPreview;
--- a/frontend/src/container/FormAlertRules/QuerySection.tsx
+++ b/frontend/src/container/FormAlertRules/QuerySection.tsx
@@ -35,6 +35,8 @@ function QuerySection({
 	setQueryCategory,
 	alertType,
 	runQuery,
+	isLoadingQueries,
+	handleCancelQuery,
 	alertDef,
 	panelType,
 	ruleId,
@@ -226,6 +228,8 @@ function QuerySection({
 												queryType: queryCategory,
 											});
 										}}
+										handleCancelQuery={handleCancelQuery}
+										isLoadingQueries={isLoadingQueries}
 									/>
 								</span>
 							}
@@ -245,7 +249,11 @@ function QuerySection({
 							onChange={handleQueryCategoryChange}
 							tabBarExtraContent={
 								<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-									<RunQueryBtn onStageRunQuery={runQuery} />
+									<RunQueryBtn
+										onStageRunQuery={runQuery}
+										handleCancelQuery={handleCancelQuery}
+										isLoadingQueries={isLoadingQueries}
+									/>
 								</span>
 							}
 							items={items}
@@ -287,6 +295,8 @@ interface QuerySectionProps {
 	setQueryCategory: (n: EQueryType) => void;
 	alertType: AlertTypes;
 	runQuery: VoidFunction;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
 	alertDef: AlertDef;
 	panelType: PANEL_TYPES;
 	ruleId: string;
--- a/frontend/src/container/FormAlertRules/index.tsx
+++ b/frontend/src/container/FormAlertRules/index.tsx
@@ -136,6 +136,19 @@ function FormAlertRules({

 	// use query client
 	const ruleCache = useQueryClient();
+	const [isChartQueryCancelled, setIsChartQueryCancelled] = useState(false);
+	const [isLoadingAlertQuery, setIsLoadingAlertQuery] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingAlertQuery) {
+			setIsChartQueryCancelled(false);
+		}
+	}, [isLoadingAlertQuery]);
+
+	const handleCancelAlertQuery = useCallback(() => {
+		ruleCache.cancelQueries(REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW);
+		setIsChartQueryCancelled(true);
+	}, [ruleCache]);

 	const isNewRule = !ruleId || isEmpty(ruleId);

@@ -702,6 +715,8 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
+			isCancelled={isChartQueryCancelled}
+			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);

@@ -720,6 +735,8 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
+			isCancelled={isChartQueryCancelled}
+			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);

@@ -902,7 +919,15 @@ function FormAlertRules({
 							queryCategory={currentQuery.queryType}
 							setQueryCategory={onQueryCategoryChange}
 							alertType={alertType || AlertTypes.METRICS_BASED_ALERT}
-							runQuery={(): void => handleRunQuery()}
+							runQuery={(): void => {
+								setIsChartQueryCancelled(false);
+								ruleCache.invalidateQueries([
+									REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW,
+								]);
+								handleRunQuery();
+							}}
+							isLoadingQueries={isLoadingAlertQuery}
+							handleCancelQuery={handleCancelAlertQuery}
 							alertDef={alertDef}
 							panelType={panelType || PANEL_TYPES.TIME_SERIES}
 							key={currentQuery.queryType}
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
@@ -6,6 +6,7 @@ import React, {
 	useRef,
 	useState,
 } from 'react';
+import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import {
@@ -18,6 +19,7 @@ import cx from 'classnames';
 import { ToggleGraphProps } from 'components/Graph/types';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import Spinner from 'components/Spinner';
 import TimePreference from 'components/TimePreferenceDropDown';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -86,6 +88,7 @@ function FullView({

 	const fullViewRef = useRef<HTMLDivElement>(null);
 	const { handleRunQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();

 	useEffect(() => {
 		setCurrentGraphRef(fullViewRef);
@@ -203,8 +206,8 @@ function FullView({
 		});
 	}, [selectedPanelType]);

-	const response = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
-		queryKey: [
+	const queryRangeKey = useMemo(
+		() => [
 			widget?.query,
 			selectedPanelType,
 			requestData,
@@ -212,10 +215,28 @@ function FullView({
 			minTime,
 			maxTime,
 		],
+		[widget?.query, selectedPanelType, requestData, version, minTime, maxTime],
+	);
+
+	const response = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
+		queryKey: queryRangeKey,
 		enabled: !isDependedDataLoaded,
 		keepPreviousData: true,
 	});

+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (response.isFetching) {
+			setIsCancelled(false);
+		}
+	}, [response.isFetching]);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries(queryRangeKey);
+		setIsCancelled(true);
+	}, [queryClient, queryRangeKey]);
+
 	const onDragSelect = useCallback((start: number, end: number): void => {
 		const startTimestamp = Math.trunc(start);
 		const endTimestamp = Math.trunc(end);
@@ -354,6 +375,8 @@ function FullView({
 									onStageRunQuery={(): void => {
 										handleRunQuery();
 									}}
+									isLoadingQueries={response.isFetching}
+									handleCancelQuery={handleCancelQuery}
 								/>
 							</>
 						)}
@@ -386,23 +409,27 @@ function FullView({
 									}}
 								/>
 							)}
-							<PanelWrapper
-								panelMode={PanelMode.STANDALONE_VIEW}
-								queryResponse={response}
-								widget={widget}
-								setRequestData={setRequestData}
-								isFullViewMode
-								onToggleModelHandler={onToggleModelHandler}
-								setGraphVisibility={setGraphsVisibilityStates}
-								graphVisibility={graphsVisibilityStates}
-								onDragSelect={customOnDragSelect ?? onDragSelect}
-								tableProcessedDataRef={tableProcessedDataRef}
-								searchTerm={searchTerm}
-								onClickHandler={onClickHandler}
-								enableDrillDown={enableDrillDown}
-								selectedGraph={selectedPanelType}
-								onColumnWidthsChange={onColumnWidthsChange}
-							/>
+							{isCancelled ? (
+								<QueryCancelledPlaceholder subText='Click "Run Query" to reload the widget.' />
+							) : (
+								<PanelWrapper
+									panelMode={PanelMode.STANDALONE_VIEW}
+									queryResponse={response}
+									widget={widget}
+									setRequestData={setRequestData}
+									isFullViewMode
+									onToggleModelHandler={onToggleModelHandler}
+									setGraphVisibility={setGraphsVisibilityStates}
+									graphVisibility={graphsVisibilityStates}
+									onDragSelect={customOnDragSelect ?? onDragSelect}
+									tableProcessedDataRef={tableProcessedDataRef}
+									searchTerm={searchTerm}
+									onClickHandler={onClickHandler}
+									enableDrillDown={enableDrillDown}
+									selectedGraph={selectedPanelType}
+									onColumnWidthsChange={onColumnWidthsChange}
+								/>
+							)}
 						</GraphContainer>
 					</div>
 				</>
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -83,8 +83,6 @@ import {
 } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { isModifierKeyPressed } from 'utils/app';
-import { getAbsoluteUrl } from 'utils/basePath';
-import { openInNewTab } from 'utils/navigation';

 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
 import dashboardsUrl from '@/assets/Icons/dashboards.svg';
@@ -459,7 +457,7 @@ function DashboardsList(): JSX.Element {
 													onClick={(e): void => {
 														e.stopPropagation();
 														e.preventDefault();
-														openInNewTab(getLink());
+														window.open(getLink(), '_blank');
 													}}
 												>
 													Open in New Tab
@@ -471,7 +469,7 @@ function DashboardsList(): JSX.Element {
 													onClick={(e): void => {
 														e.stopPropagation();
 														e.preventDefault();
-														setCopy(getAbsoluteUrl(getLink()));
+														setCopy(`${window.location.origin}${getLink()}`);
 													}}
 												>
 													Copy Link
--- a/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx
+++ b/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx
@@ -1,7 +1,6 @@
 import { LockFilled } from '@ant-design/icons';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
-import { openInNewTab } from 'utils/navigation';

 import { Data } from '../DashboardsList';
 import { TableLinkText } from './styles';
@@ -13,7 +12,7 @@ function Name(name: Data['name'], data: Data): JSX.Element {

 	const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
 		if (event.metaKey || event.ctrlKey) {
-			openInNewTab(getLink());
+			window.open(getLink(), '_blank');
 		} else {
 			history.push(getLink());
 		}
--- a/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx
+++ b/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx
@@ -17,7 +17,6 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import { ILog } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
-import { withBasePath } from 'utils/basePath';

 import { useContextLogData } from './useContextLogData';

@@ -117,7 +116,7 @@ function ContextLogRenderer({
 			);

 			const link = `${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`;
-			window.open(withBasePath(link), '_blank', 'noopener,noreferrer');
+			window.open(link, '_blank', 'noopener,noreferrer');
 		},
 		[query, urlQuery],
 	);
--- a/frontend/src/container/LogDetailedView/TableView.tsx
+++ b/frontend/src/container/LogDetailedView/TableView.tsx
@@ -34,7 +34,6 @@ import { SET_DETAILED_LOG_DATA } from 'types/actions/logs';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { openInNewTab } from 'utils/navigation';

 import { ActionItemProps } from './ActionItem';
 import FieldRenderer from './FieldRenderer';
@@ -192,7 +191,7 @@ function TableView({

 			if (event.ctrlKey || event.metaKey) {
 				// open the trace in new tab
-				openInNewTab(route);
+				window.open(route, '_blank');
 			} else {
 				history.push(route);
 			}
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/index.tsx
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/index.tsx
@@ -34,7 +34,6 @@ import ROUTES from 'constants/routes';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDragColumns from 'hooks/useDragColumns';
-import { getAbsoluteUrl } from 'utils/basePath';

 import { infinityDefaultStyles } from '../InfinityTableView/config';
 import { TanStackTableStyled } from '../InfinityTableView/styles';
@@ -240,7 +239,7 @@ const TanStackTableView = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 				urlQuery.delete(QueryParams.activeLogId);
 				urlQuery.delete(QueryParams.relativeTime);
 				urlQuery.set(QueryParams.activeLogId, `"${logId}"`);
-				const link = getAbsoluteUrl(`${pathname}?${urlQuery.toString()}`);
+				const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;

 				setCopy(link);
 				toast.success('Copied to clipboard', { position: 'top-right' });
--- a/frontend/src/container/MeterExplorer/Explorer/Explorer.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/Explorer.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -7,6 +8,7 @@ import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
@@ -37,6 +39,20 @@ function Explorer(): JSX.Element {
 		currentQuery,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
+	const queryClient = useQueryClient();
+	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingQueries) {
+			setIsCancelled(false);
+		}
+	}, [isLoadingQueries]);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
+		setIsCancelled(true);
+	}, [queryClient]);

 	const [showQuickFilters, setShowQuickFilters] = useState(true);

@@ -155,7 +171,11 @@ function Explorer(): JSX.Element {

 							<div className="explore-header-right-actions">
 								<DateTimeSelector showAutoRefresh />
-								<RightToolbarActions onStageRunQuery={(): void => handleRunQuery()} />
+								<RightToolbarActions
+									onStageRunQuery={(): void => handleRunQuery()}
+									isLoadingQueries={isLoadingQueries}
+									handleCancelQuery={handleCancelQuery}
+								/>
 							</div>
 						</div>
 						<QueryBuilderV2
@@ -171,7 +191,10 @@ function Explorer(): JSX.Element {
 						/>

 						<div className="explore-content">
-							<TimeSeries />
+							<TimeSeries
+								onFetchingStateChange={setIsLoadingQueries}
+								isCancelled={isCancelled}
+							/>
 						</div>
 					</div>
 					<ExplorerOptionWrapper
--- a/frontend/src/container/MeterExplorer/Explorer/QuerySection.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/QuerySection.tsx
@@ -1,43 +0,0 @@
-import { Button } from 'antd';
-import logEvent from 'api/common/logEvent';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { QueryBuilder } from 'container/QueryBuilder';
-import { ButtonWrapper } from 'container/TracesExplorer/QuerySection/styles';
-import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { MeterExplorerEventKeys, MeterExplorerEvents } from '../events';
-
-function QuerySection(): JSX.Element {
-	const { handleRunQuery } = useQueryBuilder();
-
-	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.TIME_SERIES);
-
-	return (
-		<div className="query-section">
-			<QueryBuilder
-				panelType={panelTypes}
-				config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
-				version="v4"
-				actions={
-					<ButtonWrapper>
-						<Button
-							onClick={(): void => {
-								handleRunQuery();
-								logEvent(MeterExplorerEvents.QueryBuilderQueryChanged, {
-									[MeterExplorerEventKeys.Tab]: 'explorer',
-								});
-							}}
-							type="primary"
-						>
-							Run Query
-						</Button>
-					</ButtonWrapper>
-				}
-			/>
-		</div>
-	);
-}
-
-export default QuerySection;
--- a/frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx
@@ -1,10 +1,12 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { isAxiosError } from 'axios';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsSearch';
 import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
@@ -21,7 +23,15 @@ import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';

-function TimeSeries(): JSX.Element {
+interface TimeSeriesProps {
+	onFetchingStateChange?: (isFetching: boolean) => void;
+	isCancelled?: boolean;
+}
+
+function TimeSeries({
+	onFetchingStateChange,
+	isCancelled = false,
+}: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');

@@ -67,7 +77,11 @@ function TimeSeries(): JSX.Element {
 				minTime,
 				index,
 			],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			queryFn: ({
+				signal,
+			}: {
+				signal?: AbortSignal;
+			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
@@ -79,9 +93,15 @@ function TimeSeries(): JSX.Element {
 						},
 					},
 					ENTITY_VERSION_V5,
+					undefined,
+					signal,
 				),
 			enabled: !!payload,
-			retry: (failureCount: number, error: Error): boolean => {
+			retry: (failureCount: number, error: unknown): boolean => {
+				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+					return false;
+				}
+
 				let status: number | undefined;

 				if (error instanceof APIError) {
@@ -94,7 +114,7 @@ function TimeSeries(): JSX.Element {
 					return false;
 				}

-				return failureCount < 3;
+				return failureCount < MAX_QUERY_RETRIES;
 			},
 			onError: (error: APIError): void => {
 				showErrorModal(error);
@@ -102,6 +122,11 @@ function TimeSeries(): JSX.Element {
 		})),
 	);

+	const isFetching = queries.some((q) => q.isFetching);
+	useEffect(() => {
+		onFetchingStateChange?.(isFetching);
+	}, [isFetching, onFetchingStateChange]);
+
 	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);

 	const responseData = useMemo(
@@ -122,7 +147,11 @@ function TimeSeries(): JSX.Element {
 			<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
 			<div className="time-series-container">
 				{!hasMetricSelected && <EmptyMetricsSearch />}
-				{hasMetricSelected &&
+				{isCancelled && hasMetricSelected && (
+					<QueryCancelledPlaceholder subText='Click "Run Query" to load metrics.' />
+				)}
+				{!isCancelled &&
+					hasMetricSelected &&
 					responseData.map((datapoint, index) => (
 						<div
 							className="time-series-view-panel"
--- a/frontend/src/container/MetricsApplication/utils.ts
+++ b/frontend/src/container/MetricsApplication/utils.ts
@@ -1,6 +1,5 @@
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import { withBasePath } from 'utils/basePath';

 import { TopOperationList } from './TopOperationsTable';
 import { NavigateToTraceProps } from './types';
@@ -38,7 +37,7 @@ export const navigateToTrace = ({
 	}=${JSONCompositeQuery}`;

 	if (openInNewTab) {
-		window.open(withBasePath(newTraceExplorerPath), '_blank');
+		window.open(newTraceExplorerPath, '_blank');
 	} else {
 		safeNavigate(newTraceExplorerPath);
 	}
--- a/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx
+++ b/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import { Switch, Tooltip } from 'antd';
@@ -6,6 +7,7 @@ import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
@@ -54,6 +56,21 @@ function Explorer(): JSX.Element {
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(false);

+	const queryClient = useQueryClient();
+	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingQueries) {
+			setIsCancelled(false);
+		}
+	}, [isLoadingQueries]);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
+		setIsCancelled(true);
+	}, [queryClient]);
+
 	const metricNames = useMemo(() => {
 		const currentMetricNames: string[] = [];
 		stagedQuery?.builder.queryData.forEach((query) => {
@@ -307,7 +324,11 @@ function Explorer(): JSX.Element {
 					<div className="explore-header-right-actions">
 						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
 						<DateTimeSelector showAutoRefresh />
-						<RightToolbarActions onStageRunQuery={(): void => handleRunQuery()} />
+						<RightToolbarActions
+							onStageRunQuery={(): void => handleRunQuery()}
+							isLoadingQueries={isLoadingQueries}
+							handleCancelQuery={handleCancelQuery}
+						/>
 					</div>
 				</div>
 				<QueryBuilderV2
@@ -319,6 +340,7 @@ function Explorer(): JSX.Element {
 				/>
 				<div className="explore-content">
 					<TimeSeries
+						onFetchingStateChange={setIsLoadingQueries}
 						showOneChartPerQuery={showOneChartPerQuery}
 						setWarning={setWarning}
 						areAllMetricUnitsSame={areAllMetricUnitsSame}
@@ -331,6 +353,7 @@ function Explorer(): JSX.Element {
 						yAxisUnit={yAxisUnit}
 						setYAxisUnit={setYAxisUnit}
 						showYAxisUnitSelector={showYAxisUnitSelector}
+						isCancelled={isCancelled}
 					/>
 				</div>
 			</div>
--- a/frontend/src/container/MetricsExplorer/Explorer/QuerySection.tsx
+++ b/frontend/src/container/MetricsExplorer/Explorer/QuerySection.tsx
@@ -1,7 +1,10 @@
-import { Button } from 'antd';
+import { useCallback } from 'react';
+import { useIsFetching, useQueryClient } from 'react-query';
 import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { QueryBuilder } from 'container/QueryBuilder';
+import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import { ButtonWrapper } from 'container/TracesExplorer/QuerySection/styles';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -11,9 +14,16 @@ import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';

 function QuerySection(): JSX.Element {
 	const { handleRunQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();

 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.TIME_SERIES);

+	const isLoadingQueries = useIsFetching([REACT_QUERY_KEY.GET_QUERY_RANGE]) > 0;
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
+	}, [queryClient]);
+
 	return (
 		<div className="query-section">
 			<QueryBuilder
@@ -22,17 +32,16 @@ function QuerySection(): JSX.Element {
 				version="v4"
 				actions={
 					<ButtonWrapper>
-						<Button
-							onClick={(): void => {
+						<RunQueryBtn
+							onStageRunQuery={(): void => {
 								handleRunQuery();
 								logEvent(MetricsExplorerEvents.QueryBuilderQueryChanged, {
 									[MetricsExplorerEventKeys.Tab]: 'explorer',
 								});
 							}}
-							type="primary"
-						>
-							Run Query
-						</Button>
+							isLoadingQueries={isLoadingQueries}
+							handleCancelQuery={handleCancelQuery}
+						/>
 					</ButtonWrapper>
 				}
 			/>
--- a/frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx
+++ b/frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useQueries, useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -11,10 +11,12 @@ import {
 } from 'api/generated/services/metrics';
 import { isAxiosError } from 'axios';
 import classNames from 'classnames';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
@@ -36,6 +38,7 @@ import {
 } from './utils';

 function TimeSeries({
+	onFetchingStateChange,
 	showOneChartPerQuery,
 	setWarning,
 	isMetricUnitsLoading,
@@ -46,6 +49,7 @@ function TimeSeries({
 	setYAxisUnit,
 	showYAxisUnitSelector,
 	metrics,
+	isCancelled = false,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();

@@ -98,7 +102,11 @@ function TimeSeries({
 				minTime,
 				index,
 			],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			queryFn: ({
+				signal,
+			}: {
+				signal?: AbortSignal;
+			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
@@ -111,9 +119,15 @@ function TimeSeries({
 					},
 					// ENTITY_VERSION_V4,
 					ENTITY_VERSION_V5,
+					undefined,
+					signal,
 				),
 			enabled: !!payload,
-			retry: (failureCount: number, error: Error): boolean => {
+			retry: (failureCount: number, error: unknown): boolean => {
+				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+					return false;
+				}
+
 				let status: number | undefined;

 				if (error instanceof APIError) {
@@ -126,11 +140,16 @@ function TimeSeries({
 					return false;
 				}

-				return failureCount < 3;
+				return failureCount < MAX_QUERY_RETRIES;
 			},
 		})),
 	);

+	const isFetching = queries.some((q) => q.isFetching);
+	useEffect(() => {
+		onFetchingStateChange?.(isFetching);
+	}, [isFetching, onFetchingStateChange]);
+
 	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);

 	const responseData = useMemo(
@@ -231,7 +250,11 @@ function TimeSeries({
 				})}
 			>
 				{metricNames.length === 0 && <EmptyMetricsSearch />}
-				{metricNames.length > 0 &&
+				{isCancelled && metricNames.length > 0 && (
+					<QueryCancelledPlaceholder subText='Click "Run Query" to load metrics.' />
+				)}
+				{!isCancelled &&
+					metricNames.length > 0 &&
 					responseData.map((datapoint, index) => {
 						const isQueryDataItem = index < metricNames.length;
 						const metricName = isQueryDataItem ? metricNames[index] : undefined;
--- a/frontend/src/container/MetricsExplorer/Explorer/types.ts
+++ b/frontend/src/container/MetricsExplorer/Explorer/types.ts
@@ -3,6 +3,7 @@ import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/si
 import { Warning } from 'types/api';

 export interface TimeSeriesProps {
+	onFetchingStateChange?: (isFetching: boolean) => void;
 	showOneChartPerQuery: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
 	areAllMetricUnitsSame: boolean;
@@ -15,4 +16,5 @@ export interface TimeSeriesProps {
 	yAxisUnit: string | undefined;
 	setYAxisUnit: (unit: string) => void;
 	showYAxisUnitSelector: boolean;
+	isCancelled?: boolean;
 }
--- a/frontend/src/container/MetricsExplorer/Inspect/Inspect.styles.scss
+++ b/frontend/src/container/MetricsExplorer/Inspect/Inspect.styles.scss
@@ -4,9 +4,25 @@

 	.inspect-metrics-fallback {
 		display: flex;
-		align-items: center;
-		justify-content: center;
+		flex-direction: column;
+		gap: 32px;
 		height: 100%;
+
+		.inspect-metrics-fallback-header-placeholder {
+			// Reserve the same vertical space the GraphView header occupies
+			// (antd middle button height) so swapping chart ↔ fallback causes
+			// no layout shift.
+			height: 32px;
+			flex-shrink: 0;
+		}
+
+		.inspect-metrics-fallback-body {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			min-height: 520px;
+		}
 	}

 	.inspect-metrics-title {
--- a/frontend/src/container/MetricsExplorer/Inspect/Inspect.tsx
+++ b/frontend/src/container/MetricsExplorer/Inspect/Inspect.tsx
@@ -1,9 +1,12 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Drawer, Empty, Skeleton, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetMetricMetadata } from 'api/generated/services/metrics';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -109,6 +112,28 @@ function Inspect({
 		reset,
 	} = useInspectMetrics(appliedMetricName);

+	const [isCancelled, setIsCancelled] = useState(false);
+
+	// Auto-reset isCancelled only on the rising edge of a new fetch
+	// (transition from not-loading → loading). Watching `isLoading` directly
+	// races with the cancel flow — when the user cancels mid-fetch, loading
+	// is still true in the render right after setIsCancelled(true), which
+	// would immediately reset it.
+	const wasLoadingRef = useRef(false);
+	useEffect(() => {
+		const nowLoading = isInspectMetricsLoading || isInspectMetricsRefetching;
+		if (!wasLoadingRef.current && nowLoading) {
+			setIsCancelled(false);
+		}
+		wasLoadingRef.current = nowLoading;
+	}, [isInspectMetricsLoading, isInspectMetricsRefetching]);
+
+	const queryClient = useQueryClient();
+	const handleCancelInspectQuery = useCallback(() => {
+		queryClient.cancelQueries(REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS);
+		setIsCancelled(true);
+	}, [queryClient]);
+
 	const handleDispatchMetricInspectionOptions = useCallback(
 		(action: MetricInspectionAction): void => {
 			dispatchMetricInspectionOptions(action);
@@ -167,96 +192,66 @@ function Inspect({
 		setExpandedViewOptions(null);
 	}, [inspectionStep]);

-	const content = useMemo(() => {
-		if (isInspectMetricsLoading && !isInspectMetricsRefetching) {
-			return (
-				<div
-					data-testid="inspect-metrics-loading"
-					className="inspect-metrics-fallback"
-				>
-					<Skeleton active />
-				</div>
+	const chartArea = useMemo(() => {
+		const renderFallback = (testId: string, body: JSX.Element): JSX.Element => (
+			<div data-testid={testId} className="inspect-metrics-fallback">
+				<div className="inspect-metrics-fallback-header-placeholder" />
+				<div className="inspect-metrics-fallback-body">{body}</div>
+			</div>
+		);
+
+		// Cancelled state takes precedence over any react-query state — ensures
+		// the placeholder shows immediately on cancel, regardless of whether
+		// isLoading/isRefetching has settled yet.
+		if (isCancelled) {
+			return renderFallback(
+				'inspect-metrics-cancelled',
+				<QueryCancelledPlaceholder subText='Click "Run Query" to see inspect results.' />,
 			);
 		}

-		if (isInspectMetricsError) {
-			const errorMessage = 'Error loading inspect metrics.';
+		if (isInspectMetricsLoading && !isInspectMetricsRefetching) {
+			return renderFallback('inspect-metrics-loading', <Skeleton active />);
+		}

-			return (
-				<div
-					data-testid="inspect-metrics-error"
-					className="inspect-metrics-fallback"
-				>
-					<Empty description={errorMessage} />
-				</div>
+		if (isInspectMetricsError) {
+			return renderFallback(
+				'inspect-metrics-error',
+				<Empty description="Error loading inspect metrics." />,
 			);
 		}

 		if (!inspectMetricsTimeSeries.length) {
-			return (
-				<div
-					data-testid="inspect-metrics-empty"
-					className="inspect-metrics-fallback"
-				>
-					<Empty description="No time series found for this metric to inspect." />
-				</div>
+			return renderFallback(
+				'inspect-metrics-empty',
+				<Empty description="No time series found for this metric to inspect." />,
 			);
 		}

 		return (
-			<div className="inspect-metrics-content">
-				<div className="inspect-metrics-content-first-col">
-					<GraphView
-						inspectMetricsTimeSeries={aggregatedTimeSeries}
-						formattedInspectMetricsTimeSeries={formattedInspectMetricsTimeSeries}
-						resetInspection={resetInspection}
-						metricName={appliedMetricName}
-						metricUnit={selectedMetricUnit}
-						metricType={selectedMetricType}
-						spaceAggregationSeriesMap={spaceAggregationSeriesMap}
-						inspectionStep={inspectionStep}
-						setPopoverOptions={setPopoverOptions}
-						setShowExpandedView={setShowExpandedView}
-						showExpandedView={showExpandedView}
-						setExpandedViewOptions={setExpandedViewOptions}
-						popoverOptions={popoverOptions}
-						metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
-						isInspectMetricsRefetching={isInspectMetricsRefetching}
-					/>
-					<QueryBuilder
-						currentMetricName={currentMetricName}
-						setCurrentMetricName={setCurrentMetricName}
-						setAppliedMetricName={setAppliedMetricName}
-						spaceAggregationLabels={spaceAggregationLabels}
-						currentMetricInspectionOptions={metricInspectionOptions.currentOptions}
-						dispatchMetricInspectionOptions={handleDispatchMetricInspectionOptions}
-						inspectionStep={inspectionStep}
-						inspectMetricsTimeSeries={inspectMetricsTimeSeries}
-						currentQuery={currentQueryData}
-						setCurrentQuery={setCurrentQueryData}
-					/>
-				</div>
-				<div className="inspect-metrics-content-second-col">
-					<Stepper
-						inspectionStep={inspectionStep}
-						resetInspection={resetInspection}
-					/>
-					{showExpandedView && (
-						<ExpandedView
-							options={expandedViewOptions}
-							spaceAggregationSeriesMap={spaceAggregationSeriesMap}
-							step={inspectionStep}
-							metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
-							timeAggregatedSeriesMap={timeAggregatedSeriesMap}
-						/>
-					)}
-				</div>
-			</div>
+			<GraphView
+				inspectMetricsTimeSeries={aggregatedTimeSeries}
+				formattedInspectMetricsTimeSeries={formattedInspectMetricsTimeSeries}
+				resetInspection={resetInspection}
+				metricName={appliedMetricName}
+				metricUnit={selectedMetricUnit}
+				metricType={selectedMetricType}
+				spaceAggregationSeriesMap={spaceAggregationSeriesMap}
+				inspectionStep={inspectionStep}
+				setPopoverOptions={setPopoverOptions}
+				setShowExpandedView={setShowExpandedView}
+				showExpandedView={showExpandedView}
+				setExpandedViewOptions={setExpandedViewOptions}
+				popoverOptions={popoverOptions}
+				metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
+				isInspectMetricsRefetching={isInspectMetricsRefetching}
+			/>
 		);
 	}, [
 		isInspectMetricsLoading,
 		isInspectMetricsRefetching,
 		isInspectMetricsError,
+		isCancelled,
 		inspectMetricsTimeSeries,
 		aggregatedTimeSeries,
 		formattedInspectMetricsTimeSeries,
@@ -312,7 +307,46 @@ function Inspect({
 				className="inspect-metrics-modal"
 				destroyOnClose
 			>
-				{content}
+				<div className="inspect-metrics-content">
+					<div className="inspect-metrics-content-first-col">
+						{chartArea}
+						<QueryBuilder
+							currentMetricName={currentMetricName}
+							setCurrentMetricName={setCurrentMetricName}
+							setAppliedMetricName={setAppliedMetricName}
+							spaceAggregationLabels={spaceAggregationLabels}
+							currentMetricInspectionOptions={metricInspectionOptions.currentOptions}
+							dispatchMetricInspectionOptions={handleDispatchMetricInspectionOptions}
+							inspectionStep={inspectionStep}
+							inspectMetricsTimeSeries={inspectMetricsTimeSeries}
+							currentQuery={currentQueryData}
+							setCurrentQuery={setCurrentQueryData}
+							isLoadingQueries={isInspectMetricsLoading || isInspectMetricsRefetching}
+							handleCancelQuery={handleCancelInspectQuery}
+							onRunQuery={(): void => {
+								setIsCancelled(false);
+								queryClient.invalidateQueries([
+									REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS,
+								]);
+							}}
+						/>
+					</div>
+					<div className="inspect-metrics-content-second-col">
+						<Stepper
+							inspectionStep={inspectionStep}
+							resetInspection={resetInspection}
+						/>
+						{showExpandedView && (
+							<ExpandedView
+								options={expandedViewOptions}
+								spaceAggregationSeriesMap={spaceAggregationSeriesMap}
+								step={inspectionStep}
+								metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
+								timeAggregatedSeriesMap={timeAggregatedSeriesMap}
+							/>
+						)}
+					</div>
+				</div>
 			</Drawer>
 		</Sentry.ErrorBoundary>
 	);
--- a/frontend/src/container/MetricsExplorer/Inspect/QueryBuilder.tsx
+++ b/frontend/src/container/MetricsExplorer/Inspect/QueryBuilder.tsx
@@ -20,13 +20,22 @@ function QueryBuilder({
 	inspectMetricsTimeSeries,
 	currentQuery,
 	setCurrentQuery,
+	isLoadingQueries,
+	handleCancelQuery,
+	onRunQuery,
 }: QueryBuilderProps): JSX.Element {
 	const applyInspectionOptions = useCallback(() => {
+		onRunQuery?.();
 		setAppliedMetricName(currentMetricName ?? '');
 		dispatchMetricInspectionOptions({
 			type: 'APPLY_METRIC_INSPECTION_OPTIONS',
 		});
-	}, [currentMetricName, setAppliedMetricName, dispatchMetricInspectionOptions]);
+	}, [
+		currentMetricName,
+		setAppliedMetricName,
+		dispatchMetricInspectionOptions,
+		onRunQuery,
+	]);

 	return (
 		<div className="inspect-metrics-query-builder">
@@ -39,7 +48,11 @@ function QueryBuilder({
 				>
 					Query Builder
 				</Button>
-				<RunQueryBtn onStageRunQuery={applyInspectionOptions} />
+				<RunQueryBtn
+					onStageRunQuery={applyInspectionOptions}
+					handleCancelQuery={handleCancelQuery}
+					isLoadingQueries={isLoadingQueries}
+				/>
 			</div>
 			<Card className="inspect-metrics-query-builder-content">
 				<MetricNameSearch
--- a/frontend/src/container/MetricsExplorer/Inspect/tests/QueryBuilder.test.tsx
+++ b/frontend/src/container/MetricsExplorer/Inspect/tests/QueryBuilder.test.tsx
@@ -103,6 +103,8 @@ describe('QueryBuilder', () => {
 			filterExpression: '',
 		} as any,
 		setCurrentQuery: jest.fn(),
+		isLoadingQueries: false,
+		handleCancelQuery: jest.fn(),
 	};

 	beforeEach(() => {
--- a/frontend/src/container/MetricsExplorer/Inspect/types.ts
+++ b/frontend/src/container/MetricsExplorer/Inspect/types.ts
@@ -65,6 +65,9 @@ export interface QueryBuilderProps {
 	inspectMetricsTimeSeries: InspectMetricsSeries[];
 	currentQuery: IBuilderQuery;
 	setCurrentQuery: (query: IBuilderQuery) => void;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
+	onRunQuery?: () => void;
 }

 export interface MetricNameSearchProps {
--- a/frontend/src/container/MetricsExplorer/Inspect/useInspectMetrics.ts
+++ b/frontend/src/container/MetricsExplorer/Inspect/useInspectMetrics.ts
@@ -1,6 +1,9 @@
 import { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { useQuery } from 'react-query';
 import { inspectMetrics } from 'api/generated/services/metrics';
+import { isAxiosError } from 'axios';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { themeColors } from 'constants/theme';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
@@ -107,7 +110,7 @@ export function useInspectMetrics(
 		isRefetching: isInspectMetricsRefetching,
 	} = useQuery({
 		queryKey: [
-			'inspectMetrics',
+			REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS,
 			metricName,
 			start,
 			end,
@@ -127,6 +130,12 @@ export function useInspectMetrics(
 			),
 		enabled: !!metricName,
 		keepPreviousData: true,
+		retry: (failureCount: number, error: Error): boolean => {
+			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+				return false;
+			}
+			return failureCount < MAX_QUERY_RETRIES;
+		},
 	});

 	const inspectMetricsData = useMemo(
--- a/frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx
+++ b/frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx
@@ -12,6 +12,8 @@ function MetricsSearch({
 	currentQueryFilterExpression,
 	setCurrentQueryFilterExpression,
 	isLoading,
+	handleCancelQuery,
+	onRunQuery,
 }: MetricsSearchProps): JSX.Element {
 	const handleOnChange = useCallback(
 		(expression: string): void => {
@@ -22,7 +24,8 @@ function MetricsSearch({

 	const handleStageAndRunQuery = useCallback(() => {
 		onChange(currentQueryFilterExpression);
-	}, [currentQueryFilterExpression, onChange]);
+		onRunQuery?.();
+	}, [currentQueryFilterExpression, onChange, onRunQuery]);

 	const handleRunQuery = useCallback(
 		(expression: string): void => {
@@ -53,6 +56,7 @@ function MetricsSearch({
 			<RunQueryBtn
 				onStageRunQuery={handleStageAndRunQuery}
 				isLoadingQueries={isLoading}
+				handleCancelQuery={handleCancelQuery}
 			/>
 			<div className="metrics-search-options">
 				<DateTimeSelectionV2
--- a/frontend/src/container/MetricsExplorer/Summary/Summary.tsx
+++ b/frontend/src/container/MetricsExplorer/Summary/Summary.tsx
@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
+import { Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -17,6 +18,7 @@ import {
 	Querybuildertypesv5OrderByDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
@@ -104,6 +106,8 @@ function Summary(): JSX.Element {
 		setCurrentQueryFilterExpression,
 	] = useState<string>(appliedFilterExpression);

+	const [isCancelled, setIsCancelled] = useState<boolean>(false);
+
 	useEffect(() => {
 		setCurrentQueryFilterExpression(appliedFilterExpression);
 	}, [appliedFilterExpression]);
@@ -164,6 +168,7 @@ function Summary(): JSX.Element {
 		isLoading: isGetMetricsStatsLoading,
 		isError: isGetMetricsStatsError,
 		error: metricsStatsError,
+		reset: resetMetricsStats,
 	} = useGetMetricsStats();

 	const {
@@ -172,6 +177,7 @@ function Summary(): JSX.Element {
 		isLoading: isGetMetricsTreemapLoading,
 		isError: isGetMetricsTreemapError,
 		error: metricsTreemapError,
+		reset: resetMetricsTreemap,
 	} = useGetMetricsTreemap();

 	const metricsStatsApiError = useMemo(
@@ -196,6 +202,40 @@ function Summary(): JSX.Element {
 		});
 	}, [metricsTreemapQuery, getMetricsTreemap]);

+	const handleCancelQuery = useCallback(() => {
+		resetMetricsStats();
+		resetMetricsTreemap();
+		setCurrentQueryFilterExpression(appliedFilterExpression);
+		setIsCancelled(true);
+	}, [
+		resetMetricsStats,
+		resetMetricsTreemap,
+		setCurrentQueryFilterExpression,
+		appliedFilterExpression,
+	]);
+
+	const handleRunQuery = useCallback(() => {
+		setIsCancelled(false);
+		getMetricsStats({
+			data: {
+				...metricsListQuery,
+				filter: { expression: currentQueryFilterExpression },
+			},
+		});
+		getMetricsTreemap({
+			data: {
+				...metricsTreemapQuery,
+				filter: { expression: currentQueryFilterExpression },
+			},
+		});
+	}, [
+		getMetricsStats,
+		getMetricsTreemap,
+		metricsListQuery,
+		metricsTreemapQuery,
+		currentQueryFilterExpression,
+	]);
+
 	const handleFilterChange = useCallback(
 		(expression: string) => {
 			const newFilters: TagFilter = {
@@ -330,11 +370,19 @@ function Summary(): JSX.Element {
 		!isGetMetricsTreemapLoading &&
 		!isGetMetricsTreemapError;

+	const isLoadingQueries =
+		isGetMetricsStatsLoading || isGetMetricsTreemapLoading;
+
 	const showFullScreenLoading =
-		(isGetMetricsStatsLoading || isGetMetricsTreemapLoading) &&
+		isLoadingQueries &&
 		formattedMetricsData.length === 0 &&
 		!treeMapData?.data[heatmapView]?.length;

+	const showNoMetrics =
+		isMetricsListDataEmpty &&
+		isMetricsTreeMapDataEmpty &&
+		!appliedFilterExpression;
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="metrics-explorer-summary-tab">
@@ -343,13 +391,26 @@ function Summary(): JSX.Element {
 					onChange={handleFilterChange}
 					currentQueryFilterExpression={currentQueryFilterExpression}
 					setCurrentQueryFilterExpression={setCurrentQueryFilterExpression}
-					isLoading={isGetMetricsStatsLoading || isGetMetricsTreemapLoading}
+					isLoading={isLoadingQueries}
+					handleCancelQuery={handleCancelQuery}
+					onRunQuery={handleRunQuery}
 				/>
 				{showFullScreenLoading ? (
 					<MetricsLoading />
-				) : isMetricsListDataEmpty &&
-				  isMetricsTreeMapDataEmpty &&
-				  !appliedFilterExpression ? (
+				) : isCancelled ? (
+					<div className="no-logs-container">
+						<div className="no-logs-container-content">
+							<img className="eyes-emoji" src={eyesEmojiUrl} alt="eyes emoji" />
+							<Typography className="no-logs-text">
+								Query cancelled.
+								<span className="sub-text">
+									{' '}
+									Click &quot;Run Query&quot; to load metrics.
+								</span>
+							</Typography>
+						</div>
+					</div>
+				) : showNoMetrics ? (
 					<NoLogs dataSource={DataSource.METRICS} />
 				) : (
 					<>
--- a/frontend/src/container/MetricsExplorer/Summary/types.ts
+++ b/frontend/src/container/MetricsExplorer/Summary/types.ts
@@ -33,6 +33,8 @@ export interface MetricsSearchProps {
 	currentQueryFilterExpression: string;
 	setCurrentQueryFilterExpression: (expression: string) => void;
 	isLoading: boolean;
+	handleCancelQuery: () => void;
+	onRunQuery: () => void;
 }

 export interface MetricsTreemapProps {
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { QueryKey } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Tabs, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -25,8 +24,8 @@ import PromQLQueryContainer from './QueryBuilder/promQL';
 import './QuerySection.styles.scss';
 function QuerySection({
 	selectedGraph,
-	queryRangeKey,
 	isLoadingQueries,
+	handleCancelQuery,
 	selectedWidget,
 	dashboardVersion,
 	dashboardId,
@@ -179,7 +178,7 @@ function QuerySection({
 							label="Stage & Run Query"
 							onStageRunQuery={handleRunQuery}
 							isLoadingQueries={isLoadingQueries}
-							queryRangeKey={queryRangeKey}
+							handleCancelQuery={handleCancelQuery}
 						/>
 					</span>
 				}
@@ -191,8 +190,8 @@ function QuerySection({

 interface QueryProps {
 	selectedGraph: PANEL_TYPES;
-	queryRangeKey?: QueryKey;
-	isLoadingQueries?: boolean;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
 	selectedWidget: Widgets;
 	dashboardVersion?: string;
 	dashboardId?: string;
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { Card } from 'container/GridCardLayout/styles';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
@@ -22,6 +23,7 @@ function WidgetGraph({
 	selectedWidget,
 	isLoadingPanelData,
 	enableDrillDown = false,
+	isCancelled = false,
 }: WidgetGraphContainerProps): JSX.Element {
 	const { currentQuery } = useQueryBuilder();

@@ -46,20 +48,24 @@ function WidgetGraph({
 				</div>
 				<DateTimeSelectionV2 showAutoRefresh={false} hideShareModal />
 			</div>
-			{queryResponse.error && (
+			{!isCancelled && queryResponse.error && (
 				<AlertIconContainer color="red" title={queryResponse.error.message}>
 					<InfoCircleOutlined />
 				</AlertIconContainer>
 			)}

-			<WidgetGraphComponent
-				isLoadingPanelData={isLoadingPanelData}
-				selectedGraph={selectedGraph}
-				queryResponse={queryResponse}
-				setRequestData={setRequestData}
-				selectedWidget={selectedWidget}
-				enableDrillDown={enableDrillDown}
-			/>
+			{isCancelled ? (
+				<QueryCancelledPlaceholder subText='Click "Run Query" to reload the chart.' />
+			) : (
+				<WidgetGraphComponent
+					isLoadingPanelData={isLoadingPanelData}
+					selectedGraph={selectedGraph}
+					queryResponse={queryResponse}
+					setRequestData={setRequestData}
+					selectedWidget={selectedWidget}
+					enableDrillDown={enableDrillDown}
+				/>
+			)}
 		</Container>
 	);
 }
--- a/frontend/src/container/NewWidget/LeftContainer/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/index.tsx
@@ -1,5 +1,5 @@
-import { memo, useEffect } from 'react';
-import { useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { ENTITY_VERSION_V5 } from 'constants/app';
@@ -34,6 +34,7 @@ function LeftContainer({
 	isNewPanel = false,
 }: WidgetGraphProps): JSX.Element {
 	const { stagedQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();

 	const { selectedTime: globalSelectedInterval, minTime, maxTime } = useSelector<
 		AppState,
@@ -49,12 +50,25 @@ function LeftContainer({
 		],
 		[globalSelectedInterval, requestData, minTime, maxTime],
 	);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries(queryRangeKey);
+		setIsCancelled(true);
+	}, [queryClient, queryRangeKey]);
+
 	const queryResponse = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
 		enabled: !!stagedQuery,
 		queryKey: queryRangeKey,
 		keepPreviousData: true,
 	});

+	useEffect(() => {
+		if (queryResponse.isFetching) {
+			setIsCancelled(false);
+		}
+	}, [queryResponse.isFetching]);
+
 	// Update parent component with query response for legend colors
 	useEffect(() => {
 		if (setQueryResponse) {
@@ -71,12 +85,13 @@ function LeftContainer({
 				selectedWidget={selectedWidget}
 				isLoadingPanelData={isLoadingPanelData}
 				enableDrillDown={enableDrillDown}
+				isCancelled={isCancelled}
 			/>
 			<QueryContainer className="query-section-left-container">
 				<QuerySection
 					selectedGraph={selectedGraph}
-					queryRangeKey={queryRangeKey}
 					isLoadingQueries={queryResponse.isFetching}
+					handleCancelQuery={handleCancelQuery}
 					selectedWidget={selectedWidget}
 					dashboardVersion={ENTITY_VERSION_V5}
 					dashboardId={dashboardData?.id}
--- a/frontend/src/container/NewWidget/types.ts
+++ b/frontend/src/container/NewWidget/types.ts
@@ -50,4 +50,5 @@ export type WidgetGraphContainerProps = {
 	selectedWidget: Widgets;
 	isLoadingPanelData: boolean;
 	enableDrillDown?: boolean;
+	isCancelled?: boolean;
 };
--- a/frontend/src/container/QueryBuilder/components/RunQueryBtn/RunQueryBtn.tsx
+++ b/frontend/src/container/QueryBuilder/components/RunQueryBtn/RunQueryBtn.tsx
@@ -1,5 +1,3 @@
-import { useCallback } from 'react';
-import { QueryKey, useIsFetching, useQueryClient } from 'react-query';
 import { Button } from '@signozhq/ui';
 import cx from 'classnames';
 import {
@@ -12,14 +10,23 @@ import {
 import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';

 import './RunQueryBtn.scss';
-interface RunQueryBtnProps {
+
+type RunQueryBtnProps = {
 	className?: string;
 	label?: string;
-	isLoadingQueries?: boolean;
-	handleCancelQuery?: () => void;
-	onStageRunQuery?: () => void;
-	queryRangeKey?: QueryKey;
-}
+	disabled?: boolean;
+} & (
+	| {
+			onStageRunQuery: () => void;
+			handleCancelQuery: () => void;
+			isLoadingQueries: boolean;
+	  }
+	| {
+			onStageRunQuery?: never;
+			handleCancelQuery?: never;
+			isLoadingQueries?: never;
+	  }
+);

 function RunQueryBtn({
 	className,
@@ -27,26 +34,10 @@ function RunQueryBtn({
 	isLoadingQueries,
 	handleCancelQuery,
 	onStageRunQuery,
-	queryRangeKey,
+	disabled,
 }: RunQueryBtnProps): JSX.Element {
 	const isMac = getUserOperatingSystem() === UserOperatingSystem.MACOS;
-	const queryClient = useQueryClient();
-	const isKeyFetchingCount = useIsFetching(
-		queryRangeKey as QueryKey | undefined,
-	);
-	const isLoading =
-		typeof isLoadingQueries === 'boolean'
-			? isLoadingQueries
-			: isKeyFetchingCount > 0;
-
-	const onCancel = useCallback(() => {
-		if (handleCancelQuery) {
-			return handleCancelQuery();
-		}
-		if (queryRangeKey) {
-			queryClient.cancelQueries(queryRangeKey);
-		}
-	}, [handleCancelQuery, queryClient, queryRangeKey]);
+	const isLoading = isLoadingQueries ?? false;

 	return isLoading ? (
 		<Button
@@ -54,7 +45,7 @@ function RunQueryBtn({
 			type="button"
 			prefix={<Loader2 size={14} className="loading-icon animate-spin" />}
 			className={cx('cancel-query-btn', className)}
-			onClick={onCancel}
+			onClick={handleCancelQuery}
 		>
 			Cancel
 		</Button>
@@ -63,7 +54,7 @@ function RunQueryBtn({
 			color="primary"
 			type="button"
 			className={cx('run-query-btn', className)}
-			disabled={isLoading || !onStageRunQuery}
+			disabled={disabled}
 			onClick={onStageRunQuery}
 			prefix={<Play size={14} />}
 		>
--- a/frontend/src/container/QueryBuilder/components/RunQueryBtn/test/RunQueryBtn.test.tsx
+++ b/frontend/src/container/QueryBuilder/components/RunQueryBtn/test/RunQueryBtn.test.tsx
@@ -1,18 +1,8 @@
-// frontend/src/container/QueryBuilder/components/RunQueryBtn/__tests__/RunQueryBtn.test.tsx
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';

 import RunQueryBtn from '../RunQueryBtn';

-jest.mock('react-query', () => {
-	const actual = jest.requireActual('react-query');
-	return {
-		...actual,
-		useIsFetching: jest.fn(),
-		useQueryClient: jest.fn(),
-	};
-});
-import { useIsFetching, useQueryClient } from 'react-query';
-
 // Mock OS util
 jest.mock('utils/getUserOS', () => ({
 	getUserOperatingSystem: jest.fn(),
@@ -26,79 +16,60 @@ describe('RunQueryBtn', () => {
 		(getUserOperatingSystem as jest.Mock).mockReturnValue(
 			UserOperatingSystem.MACOS,
 		);
-		(useIsFetching as jest.Mock).mockReturnValue(0);
-		(useQueryClient as jest.Mock).mockReturnValue({
-			cancelQueries: jest.fn(),
-		});
 	});

-	test('uses isLoadingQueries prop over useIsFetching', () => {
-		// Simulate fetching but prop forces not loading
-		(useIsFetching as jest.Mock).mockReturnValue(1);
+	test('renders run state and triggers on click', async () => {
+		const user = userEvent.setup();
 		const onRun = jest.fn();
-		render(<RunQueryBtn onStageRunQuery={onRun} isLoadingQueries={false} />);
-		// Should show "Run Query" (not cancel)
-		const runBtn = screen.getByRole('button', { name: /run query/i });
-		expect(runBtn).toBeInTheDocument();
-		expect(runBtn).toBeEnabled();
-	});
-
-	test('fallback cancel: uses handleCancelQuery when no key provided', () => {
-		(useIsFetching as jest.Mock).mockReturnValue(0);
-		const cancelQueries = jest.fn();
-		(useQueryClient as jest.Mock).mockReturnValue({ cancelQueries });
-
 		const onCancel = jest.fn();
-		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
-
-		const cancelBtn = screen.getByRole('button', { name: /cancel/i });
-		fireEvent.click(cancelBtn);
-		expect(onCancel).toHaveBeenCalledTimes(1);
-		expect(cancelQueries).not.toHaveBeenCalled();
-	});
-
-	test('renders run state and triggers on click', () => {
-		const onRun = jest.fn();
-		render(<RunQueryBtn onStageRunQuery={onRun} />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={onRun}
+				handleCancelQuery={onCancel}
+				isLoadingQueries={false}
+			/>,
+		);
 		const btn = screen.getByRole('button', { name: /run query/i });
 		expect(btn).toBeEnabled();
-		fireEvent.click(btn);
+		await user.click(btn);
 		expect(onRun).toHaveBeenCalledTimes(1);
 	});

-	test('disabled when onStageRunQuery is undefined', () => {
-		render(<RunQueryBtn />);
-		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
-	});
-
-	test('shows cancel state and calls handleCancelQuery', () => {
+	test('shows cancel state and calls handleCancelQuery', async () => {
+		const user = userEvent.setup();
+		const onRun = jest.fn();
 		const onCancel = jest.fn();
-		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={onRun}
+				handleCancelQuery={onCancel}
+				isLoadingQueries
+			/>,
+		);
 		const cancel = screen.getByRole('button', { name: /cancel/i });
-		fireEvent.click(cancel);
+		await user.click(cancel);
 		expect(onCancel).toHaveBeenCalledTimes(1);
 	});

-	test('derives loading from queryKey via useIsFetching and cancels via queryClient', () => {
-		(useIsFetching as jest.Mock).mockReturnValue(1);
-		const cancelQueries = jest.fn();
-		(useQueryClient as jest.Mock).mockReturnValue({ cancelQueries });
+	test('disabled when disabled prop is true', () => {
+		render(<RunQueryBtn disabled />);
+		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
+	});

-		const queryKey = ['GET_QUERY_RANGE', '1h', { some: 'req' }, 1, 2];
-		render(<RunQueryBtn queryRangeKey={queryKey} />);
-
-		// Button switches to cancel state
-		const cancelBtn = screen.getByRole('button', { name: /cancel/i });
-		expect(cancelBtn).toBeInTheDocument();
-
-		// Clicking cancel calls cancelQueries with the key
-		fireEvent.click(cancelBtn);
-		expect(cancelQueries).toHaveBeenCalledWith(queryKey);
+	test('disabled when no props provided', () => {
+		render(<RunQueryBtn />);
+		expect(
+			screen.getByRole('button', { name: /run query/i }),
+		).toBeInTheDocument();
 	});

 	test('shows Command + CornerDownLeft on mac', () => {
 		const { container } = render(
-			<RunQueryBtn onStageRunQuery={(): void => {}} />,
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+			/>,
 		);
 		expect(container.querySelector('.lucide-command')).toBeInTheDocument();
 		expect(
@@ -111,7 +82,11 @@ describe('RunQueryBtn', () => {
 			UserOperatingSystem.WINDOWS,
 		);
 		const { container } = render(
-			<RunQueryBtn onStageRunQuery={(): void => {}} />,
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+			/>,
 		);
 		expect(container.querySelector('.lucide-chevron-up')).toBeInTheDocument();
 		expect(container.querySelector('.lucide-command')).not.toBeInTheDocument();
@@ -121,8 +96,14 @@ describe('RunQueryBtn', () => {
 	});

 	test('renders custom label when provided', () => {
-		const onRun = jest.fn();
-		render(<RunQueryBtn onStageRunQuery={onRun} label="Stage & Run Query" />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+				label="Stage & Run Query"
+			/>,
+		);
 		expect(
 			screen.getByRole('button', { name: /stage & run query/i }),
 		).toBeInTheDocument();
--- a/frontend/src/container/QueryBuilder/components/ToolbarActions/RightToolbarActions.tsx
+++ b/frontend/src/container/QueryBuilder/components/ToolbarActions/RightToolbarActions.tsx
@@ -1,5 +1,4 @@
-import { MutableRefObject, useEffect } from 'react';
-import { useQueryClient } from 'react-query';
+import { useEffect } from 'react';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';

@@ -9,23 +8,19 @@ import './ToolbarActions.styles.scss';

 interface RightToolbarActionsProps {
 	onStageRunQuery: () => void;
-	isLoadingQueries?: boolean;
-	listQueryKeyRef?: MutableRefObject<any>;
-	chartQueryKeyRef?: MutableRefObject<any>;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
 	showLiveLogs?: boolean;
 }

 export default function RightToolbarActions({
 	onStageRunQuery,
 	isLoadingQueries,
-	listQueryKeyRef,
-	chartQueryKeyRef,
+	handleCancelQuery,
 	showLiveLogs,
 }: RightToolbarActionsProps): JSX.Element {
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();

-	const queryClient = useQueryClient();
-
 	useEffect(() => {
 		if (showLiveLogs) {
 			return;
@@ -42,20 +37,11 @@ export default function RightToolbarActions({
 	if (showLiveLogs) {
 		return (
 			<div className="right-toolbar-actions-container">
-				<RunQueryBtn />
+				<RunQueryBtn disabled />
 			</div>
 		);
 	}

-	const handleCancelQuery = (): void => {
-		if (listQueryKeyRef?.current) {
-			queryClient.cancelQueries(listQueryKeyRef.current);
-		}
-		if (chartQueryKeyRef?.current) {
-			queryClient.cancelQueries(chartQueryKeyRef.current);
-		}
-	};
-
 	return (
 		<div className="right-toolbar-actions-container">
 			<RunQueryBtn
@@ -68,8 +54,5 @@ export default function RightToolbarActions({
 }

 RightToolbarActions.defaultProps = {
-	isLoadingQueries: false,
-	listQueryKeyRef: null,
-	chartQueryKeyRef: null,
 	showLiveLogs: false,
 };
--- a/frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx
+++ b/frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx
@@ -92,7 +92,12 @@ describe('ToolbarActions', () => {
 		const onStageRunQuery = jest.fn();
 		const { queryByText } = render(
 			<MockQueryClientProvider>
-				<RightToolbarActions onStageRunQuery={onStageRunQuery} />,
+				<RightToolbarActions
+					onStageRunQuery={onStageRunQuery}
+					isLoadingQueries={false}
+					handleCancelQuery={jest.fn()}
+				/>
+				,
 			</MockQueryClientProvider>,
 		);

--- a/frontend/src/container/QueryTable/Drilldown/tests/useBaseDrilldownNavigate.test.ts
+++ b/frontend/src/container/QueryTable/Drilldown/tests/useBaseDrilldownNavigate.test.ts
@@ -0,0 +1,282 @@
+import { renderHook } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getViewQuery } from '../drilldownUtils';
+import { AggregateData } from '../useAggregateDrilldown';
+import useBaseDrilldownNavigate, {
+	buildDrilldownUrl,
+	getRoute,
+} from '../useBaseDrilldownNavigate';
+
+const mockSafeNavigate = jest.fn();
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({ safeNavigate: mockSafeNavigate }),
+}));
+
+jest.mock('../drilldownUtils', () => ({
+	...jest.requireActual('../drilldownUtils'),
+	getViewQuery: jest.fn(),
+}));
+
+const mockGetViewQuery = getViewQuery as jest.Mock;
+
+// ─── Fixtures ────────────────────────────────────────────────────────────────
+
+const MOCK_QUERY: Query = {
+	id: 'q1',
+	queryType: 'builder' as any,
+	builder: {
+		queryData: [
+			{
+				queryName: 'A',
+				dataSource: 'metrics' as any,
+				groupBy: [],
+				expression: '',
+				disabled: false,
+				functions: [],
+				legend: '',
+				having: [],
+				limit: null,
+				stepInterval: undefined,
+				orderBy: [],
+			},
+		],
+		queryFormulas: [],
+		queryTraceOperator: [],
+	},
+	promql: [],
+	clickhouse_sql: [],
+};
+
+const MOCK_VIEW_QUERY: Query = {
+	...MOCK_QUERY,
+	builder: {
+		...MOCK_QUERY.builder,
+		queryData: [
+			{
+				...MOCK_QUERY.builder.queryData[0],
+				filters: { items: [], op: 'AND' },
+			},
+		],
+	},
+};
+
+const MOCK_AGGREGATE_DATA: AggregateData = {
+	queryName: 'A',
+	filters: [{ filterKey: 'service_name', filterValue: 'auth', operator: '=' }],
+	timeRange: { startTime: 1000000, endTime: 2000000 },
+};
+
+// ─── getRoute ─────────────────────────────────────────────────────────────────
+
+describe('getRoute', () => {
+	it.each([
+		['view_logs', ROUTES.LOGS_EXPLORER],
+		['view_metrics', ROUTES.METRICS_EXPLORER],
+		['view_traces', ROUTES.TRACES_EXPLORER],
+	])('maps %s to the correct explorer route', (key, expected) => {
+		expect(getRoute(key)).toBe(expected);
+	});
+
+	it('returns empty string for an unknown key', () => {
+		expect(getRoute('view_dashboard')).toBe('');
+	});
+});
+
+// ─── buildDrilldownUrl ────────────────────────────────────────────────────────
+
+describe('buildDrilldownUrl', () => {
+	beforeEach(() => {
+		mockGetViewQuery.mockReturnValue(MOCK_VIEW_QUERY);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('returns null for an unknown drilldown key', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_dashboard');
+		expect(url).toBeNull();
+	});
+
+	it('returns null when getViewQuery returns null', () => {
+		mockGetViewQuery.mockReturnValue(null);
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).toBeNull();
+	});
+
+	it('returns a URL starting with the logs explorer route for view_logs', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).not.toBeNull();
+		expect(url).toContain(ROUTES.LOGS_EXPLORER);
+	});
+
+	it('returns a URL starting with the traces explorer route for view_traces', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_traces');
+		expect(url).toContain(ROUTES.TRACES_EXPLORER);
+	});
+
+	it('includes compositeQuery param in the URL', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).toContain('compositeQuery=');
+	});
+
+	it('includes startTime and endTime when aggregateData has a timeRange', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).toContain('startTime=1000000');
+		expect(url).toContain('endTime=2000000');
+	});
+
+	it('omits startTime and endTime when aggregateData has no timeRange', () => {
+		const { timeRange: _, ...withoutTimeRange } = MOCK_AGGREGATE_DATA;
+		const url = buildDrilldownUrl(MOCK_QUERY, withoutTimeRange, 'view_logs');
+		expect(url).not.toContain('startTime=');
+		expect(url).not.toContain('endTime=');
+	});
+
+	it('includes summaryFilters param for view_metrics', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_metrics');
+		expect(url).toContain(ROUTES.METRICS_EXPLORER);
+		expect(url).toContain('summaryFilters=');
+	});
+
+	it('does not include summaryFilters param for non-metrics routes', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).not.toContain('summaryFilters=');
+	});
+
+	it('handles null aggregateData by passing empty filters and empty queryName', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, null, 'view_logs');
+		expect(url).not.toBeNull();
+		expect(mockGetViewQuery).toHaveBeenCalledWith(MOCK_QUERY, [], 'view_logs', '');
+	});
+
+	it('passes aggregateData filters and queryName to getViewQuery', () => {
+		buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(mockGetViewQuery).toHaveBeenCalledWith(
+			MOCK_QUERY,
+			MOCK_AGGREGATE_DATA.filters,
+			'view_logs',
+			MOCK_AGGREGATE_DATA.queryName,
+		);
+	});
+});
+
+// ─── useBaseDrilldownNavigate ─────────────────────────────────────────────────
+
+describe('useBaseDrilldownNavigate', () => {
+	beforeEach(() => {
+		mockGetViewQuery.mockReturnValue(MOCK_VIEW_QUERY);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('calls safeNavigate with the built URL on a valid key', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+			}),
+		);
+
+		result.current('view_logs');
+
+		expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
+		const [url] = mockSafeNavigate.mock.calls[0];
+		expect(url).toContain(ROUTES.LOGS_EXPLORER);
+		expect(url).toContain('compositeQuery=');
+	});
+
+	it('opens the explorer in a new tab', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+			}),
+		);
+
+		result.current('view_traces');
+
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.any(String),
+			{ newTab: true },
+		);
+	});
+
+	it('calls callback after successful navigation', () => {
+		const callback = jest.fn();
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+				callback,
+			}),
+		);
+
+		result.current('view_logs');
+
+		expect(callback).toHaveBeenCalledTimes(1);
+	});
+
+	it('does not call safeNavigate for an unknown key', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+			}),
+		);
+
+		result.current('view_dashboard');
+
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('still calls callback when the key is unknown', () => {
+		const callback = jest.fn();
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+				callback,
+			}),
+		);
+
+		result.current('view_dashboard');
+
+		expect(callback).toHaveBeenCalledTimes(1);
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('still calls callback when getViewQuery returns null', () => {
+		mockGetViewQuery.mockReturnValue(null);
+		const callback = jest.fn();
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+				callback,
+			}),
+		);
+
+		result.current('view_logs');
+
+		expect(callback).toHaveBeenCalledTimes(1);
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('handles null aggregateData without throwing', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: null,
+			}),
+		);
+
+		expect(() => result.current('view_logs')).not.toThrow();
+		expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
+	});
+});
--- a/frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx
+++ b/frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx
@@ -166,7 +166,7 @@ export const getAggregateColumnHeader = (
 	};
 };

-const getFiltersFromMetric = (metric: any): FilterData[] =>
+export const getFiltersFromMetric = (metric: any): FilterData[] =>
 	Object.keys(metric).map((key) => ({
 		filterKey: key,
 		filterValue: metric[key],
--- a/frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx
+++ b/frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx
@@ -2,25 +2,21 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { LinkOutlined, LoadingOutlined } from '@ant-design/icons';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
 import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { processContextLinks } from 'container/NewWidget/RightContainer/ContextLinks/utils';
 import useContextVariables from 'hooks/dashboard/useContextVariables';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import createQueryParams from 'lib/createQueryParams';
 import ContextMenu from 'periscope/components/ContextMenu';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { openInNewTab } from 'utils/navigation';

 import { ContextMenuItem } from './contextConfig';
 import { getDataLinks } from './dataLinksUtils';
-import { getAggregateColumnHeader, getViewQuery } from './drilldownUtils';
+import { getAggregateColumnHeader } from './drilldownUtils';
 import { getBaseContextConfig } from './menuOptions';
 import { AggregateData } from './useAggregateDrilldown';
+import useBaseDrilldownNavigate from './useBaseDrilldownNavigate';

 interface UseBaseAggregateOptionsProps {
 	query: Query;
@@ -38,19 +34,6 @@ interface BaseAggregateOptionsConfig {
 	items?: ContextMenuItem;
 }

-const getRoute = (key: string): string => {
-	switch (key) {
-		case 'view_logs':
-			return ROUTES.LOGS_EXPLORER;
-		case 'view_metrics':
-			return ROUTES.METRICS_EXPLORER;
-		case 'view_traces':
-			return ROUTES.TRACES_EXPLORER;
-		default:
-			return '';
-	}
-};
-
 const useBaseAggregateOptions = ({
 	query,
 	onClose,
@@ -63,10 +46,8 @@ const useBaseAggregateOptions = ({
 	baseAggregateOptionsConfig: BaseAggregateOptionsConfig;
 } => {
 	const [resolvedQuery, setResolvedQuery] = useState<Query>(query);
-	const {
-		getUpdatedQuery,
-		isLoading: isResolveQueryLoading,
-	} = useUpdatedQuery();
+	const { getUpdatedQuery, isLoading: isResolveQueryLoading } =
+		useUpdatedQuery();
 	const { dashboardData } = useDashboardStore();

 	useEffect(() => {
@@ -88,8 +69,6 @@ const useBaseAggregateOptions = ({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [query, aggregateData, panelType]);

-	const { safeNavigate } = useSafeNavigate();
-
 	// Use the new useContextVariables hook
 	const { processedVariables } = useContextVariables({
 		maxValues: 2,
@@ -116,57 +95,23 @@ const useBaseAggregateOptions = ({
 					key={id}
 					icon={<LinkOutlined />}
 					onClick={(): void => {
-						openInNewTab(url);
+						window.open(url, '_blank');
 						onClose?.();
 					}}
 				>
 					{label}
 				</ContextMenu.Item>
 			));
-		} catch (error) {
+		} catch {
 			return [];
 		}
 	}, [contextLinks, processedVariables, onClose, aggregateData, query]);

-	const handleBaseDrilldown = useCallback(
-		(key: string): void => {
-			const route = getRoute(key);
-			const timeRange = aggregateData?.timeRange;
-			const filtersToAdd = aggregateData?.filters || [];
-			const viewQuery = getViewQuery(
-				resolvedQuery,
-				filtersToAdd,
-				key,
-				aggregateData?.queryName || '',
-			);
-
-			let queryParams = {
-				[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
-				...(timeRange && {
-					[QueryParams.startTime]: timeRange?.startTime.toString(),
-					[QueryParams.endTime]: timeRange?.endTime.toString(),
-				}),
-			} as Record<string, string>;
-
-			if (route === ROUTES.METRICS_EXPLORER) {
-				queryParams = {
-					...queryParams,
-					[QueryParams.summaryFilters]: JSON.stringify(
-						viewQuery?.builder.queryData[0].filters,
-					),
-				};
-			}
-
-			if (route) {
-				safeNavigate(`${route}?${createQueryParams(queryParams)}`, {
-					newTab: true,
-				});
-			}
-
-			onClose();
-		},
-		[resolvedQuery, safeNavigate, onClose, aggregateData],
-	);
+	const handleBaseDrilldown = useBaseDrilldownNavigate({
+		resolvedQuery,
+		aggregateData,
+		callback: onClose,
+	});

 	const { pathname } = useLocation();

--- a/frontend/src/container/QueryTable/Drilldown/useBaseDrilldownNavigate.ts
+++ b/frontend/src/container/QueryTable/Drilldown/useBaseDrilldownNavigate.ts
@@ -0,0 +1,117 @@
+import { useCallback } from 'react';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import createQueryParams from 'lib/createQueryParams';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getViewQuery } from './drilldownUtils';
+import { AggregateData } from './useAggregateDrilldown';
+
+type DrilldownKey = 'view_logs' | 'view_metrics' | 'view_traces';
+
+const DRILLDOWN_ROUTE_MAP: Record<DrilldownKey, string> = {
+	view_logs: ROUTES.LOGS_EXPLORER,
+	view_metrics: ROUTES.METRICS_EXPLORER,
+	view_traces: ROUTES.TRACES_EXPLORER,
+};
+
+const getRoute = (key: string): string =>
+	DRILLDOWN_ROUTE_MAP[key as DrilldownKey] ?? '';
+
+interface UseBaseDrilldownNavigateProps {
+	resolvedQuery: Query;
+	aggregateData: AggregateData | null;
+	callback?: () => void;
+}
+
+const useBaseDrilldownNavigate = ({
+	resolvedQuery,
+	aggregateData,
+	callback,
+}: UseBaseDrilldownNavigateProps): ((key: string) => void) => {
+	const { safeNavigate } = useSafeNavigate();
+
+	return useCallback(
+		(key: string): void => {
+			const route = getRoute(key);
+			const viewQuery = getViewQuery(
+				resolvedQuery,
+				aggregateData?.filters ?? [],
+				key,
+				aggregateData?.queryName ?? '',
+			);
+
+			if (!viewQuery || !route) {
+				callback?.();
+				return;
+			}
+
+			const timeRange = aggregateData?.timeRange;
+			let queryParams: Record<string, string> = {
+				[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
+				...(timeRange && {
+					[QueryParams.startTime]: timeRange.startTime.toString(),
+					[QueryParams.endTime]: timeRange.endTime.toString(),
+				}),
+			};
+
+			if (route === ROUTES.METRICS_EXPLORER) {
+				queryParams = {
+					...queryParams,
+					[QueryParams.summaryFilters]: JSON.stringify(
+						viewQuery.builder.queryData[0].filters,
+					),
+				};
+			}
+
+			safeNavigate(`${route}?${createQueryParams(queryParams)}`, {
+				newTab: true,
+			});
+
+			callback?.();
+		},
+		[resolvedQuery, safeNavigate, callback, aggregateData],
+	);
+};
+
+export function buildDrilldownUrl(
+	resolvedQuery: Query,
+	aggregateData: AggregateData | null,
+	key: string,
+): string | null {
+	const route = getRoute(key);
+	const viewQuery = getViewQuery(
+		resolvedQuery,
+		aggregateData?.filters ?? [],
+		key,
+		aggregateData?.queryName ?? '',
+	);
+
+	if (!viewQuery || !route) {
+		return null;
+	}
+
+	const timeRange = aggregateData?.timeRange;
+	let queryParams: Record<string, string> = {
+		[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
+		...(timeRange && {
+			[QueryParams.startTime]: timeRange.startTime.toString(),
+			[QueryParams.endTime]: timeRange.endTime.toString(),
+		}),
+	};
+
+	if (route === ROUTES.METRICS_EXPLORER) {
+		queryParams = {
+			...queryParams,
+			[QueryParams.summaryFilters]: JSON.stringify(
+				viewQuery.builder.queryData[0].filters,
+			),
+		};
+	}
+
+	return `${route}?${createQueryParams(queryParams)}`;
+}
+
+export { getRoute };
+export default useBaseDrilldownNavigate;
--- a/frontend/src/container/RoutingPolicies/RoutingPolicyDetails.tsx
+++ b/frontend/src/container/RoutingPolicies/RoutingPolicyDetails.tsx
@@ -14,7 +14,6 @@ import { ModalTitle } from 'container/PipelinePage/PipelineListsView/styles';
 import { Check, Loader, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
-import { openInNewTab } from 'utils/navigation';

 import { INITIAL_ROUTING_POLICY_DETAILS_FORM_STATE } from './constants';
 import {
@@ -77,7 +76,7 @@ function RoutingPolicyDetails({
 							style={{ padding: '0 4px' }}
 							type="link"
 							onClick={(): void => {
-								openInNewTab(ROUTES.CHANNELS_NEW);
+								window.open(ROUTES.CHANNELS_NEW, '_blank');
 							}}
 						>
 							here.
--- a/frontend/src/container/SpanDetailsDrawer/SpanLogs/SpanLogs.tsx
+++ b/frontend/src/container/SpanDetailsDrawer/SpanLogs/SpanLogs.tsx
@@ -28,7 +28,6 @@ import {
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
-import { openInNewTab } from 'utils/navigation';
 import { v4 as uuid } from 'uuid';

 import noDataUrl from '@/assets/Icons/no-data.svg';
@@ -144,7 +143,7 @@ function SpanLogs({

 			const url = `${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`;

-			openInNewTab(url);
+			window.open(url, '_blank');
 		},
 		[
 			isLogSpanRelated,
--- a/frontend/src/container/SpanDetailsDrawer/SpanRelatedSignals/SpanRelatedSignals.tsx
+++ b/frontend/src/container/SpanDetailsDrawer/SpanRelatedSignals/SpanRelatedSignals.tsx
@@ -17,7 +17,6 @@ import { BarChart2, Compass, X } from 'lucide-react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Span } from 'types/api/trace/getTraceV2';
 import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
-import { getAbsoluteUrl } from 'utils/basePath';

 import { RelatedSignalsViews } from '../constants';
 import SpanLogs from '../SpanLogs/SpanLogs';
@@ -159,7 +158,9 @@ function SpanRelatedSignals({
 		searchParams.set(QueryParams.endTime, endTimeMs.toString());

 		window.open(
-			getAbsoluteUrl(`${ROUTES.LOGS_EXPLORER}?${searchParams.toString()}`),
+			`${window.location.origin}${
+				ROUTES.LOGS_EXPLORER
+			}?${searchParams.toString()}`,
 			'_blank',
 			'noopener,noreferrer',
 		);
--- a/frontend/src/container/Trace/TraceTable/index.tsx
+++ b/frontend/src/container/Trace/TraceTable/index.tsx
@@ -31,7 +31,6 @@ import {
 	UPDATE_SPANS_AGGREGATE_PAGE_SIZE,
 } from 'types/actions/trace';
 import { TraceReducer } from 'types/reducer/trace';
-import { openInNewTab } from 'utils/navigation';
 import { v4 } from 'uuid';

 dayjs.extend(duration);
@@ -215,7 +214,7 @@ function TraceTable(): JSX.Element {
 					event.preventDefault();
 					event.stopPropagation();
 					if (event.metaKey || event.ctrlKey) {
-						openInNewTab(getLink(record));
+						window.open(getLink(record), '_blank');
 					} else {
 						history.push(getLink(record));
 					}
--- a/frontend/src/container/TracesTableComponent/TracesTableComponent.tsx
+++ b/frontend/src/container/TracesTableComponent/TracesTableComponent.tsx
@@ -28,7 +28,6 @@ import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { openInNewTab } from 'utils/navigation';

 import './TracesTableComponent.styles.scss';

@@ -87,7 +86,7 @@ function TracesTableComponent({
 				event.preventDefault();
 				event.stopPropagation();
 				if (event.metaKey || event.ctrlKey) {
-					openInNewTab(getTraceLink(record));
+					window.open(getTraceLink(record), '_blank');
 				} else {
 					history.push(getTraceLink(record));
 				}
--- a/frontend/src/hooks/logs/useCopyLogLink.ts
+++ b/frontend/src/hooks/logs/useCopyLogLink.ts
@@ -17,7 +17,6 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { getAbsoluteUrl } from 'utils/basePath';

 import { HIGHLIGHTED_DELAY } from './configs';
 import { UseCopyLogLink } from './types';
@@ -61,7 +60,7 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => {
 			urlQuery.set(QueryParams.startTime, minTime?.toString() || '');
 			urlQuery.set(QueryParams.endTime, maxTime?.toString() || '');

-			const link = getAbsoluteUrl(`${pathname}?${urlQuery.toString()}`);
+			const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;

 			setCopy(link);

--- a/frontend/src/hooks/queryBuilder/useGetQueryRange.ts
+++ b/frontend/src/hooks/queryBuilder/useGetQueryRange.ts
@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
 import { isAxiosError } from 'axios';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { updateBarStepInterval } from 'container/GridCardLayout/utils';
 import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
@@ -132,6 +133,10 @@ export const useGetQueryRange: UseGetQueryRange = (
 			return options.retry;
 		}
 		return (failureCount: number, error: Error): boolean => {
+			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+				return false;
+			}
+
 			let status: number | undefined;

 			if (error instanceof APIError) {
@@ -144,7 +149,7 @@ export const useGetQueryRange: UseGetQueryRange = (
 				return false;
 			}

-			return failureCount < 3;
+			return failureCount < MAX_QUERY_RETRIES;
 		};
 	}, [options?.retry]);

--- a/frontend/src/hooks/thirdPartyApis/useListOverview.ts
+++ b/frontend/src/hooks/thirdPartyApis/useListOverview.ts
@@ -1,5 +1,7 @@
 import { useQuery, UseQueryResult } from 'react-query';
 import listOverview from 'api/thirdPartyApis/listOverview';
+import { isAxiosError } from 'axios';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { SuccessResponseV2 } from 'types/api';
 import APIError from 'types/api/error';
@@ -20,12 +22,21 @@ export const useListOverview = (
 			showIp,
 			filter.expression,
 		],
-		queryFn: () =>
-			listOverview({
-				start,
-				end,
-				show_ip: showIp,
-				filter,
-			}),
+		queryFn: ({ signal }) =>
+			listOverview(
+				{
+					start,
+					end,
+					show_ip: showIp,
+					filter,
+				},
+				signal,
+			),
+		retry: (failureCount, error): boolean => {
+			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+				return false;
+			}
+			return failureCount < MAX_QUERY_RETRIES;
+		},
 	});
 };
--- a/frontend/src/hooks/trace/useCopySpanLink.ts
+++ b/frontend/src/hooks/trace/useCopySpanLink.ts
@@ -4,7 +4,6 @@ import { useCopyToClipboard } from 'react-use';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { Span } from 'types/api/trace/getTraceV2';
-import { getAbsoluteUrl } from 'utils/basePath';

 export const useCopySpanLink = (
 	span?: Span,
@@ -29,7 +28,7 @@ export const useCopySpanLink = (
 				urlQuery.set('spanId', span?.spanId);
 			}

-			const link = getAbsoluteUrl(`${pathname}?${urlQuery.toString()}`);
+			const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;

 			setCopy(link);
 			notifications.success({
--- a/frontend/src/hooks/useSafeNavigate.ts
+++ b/frontend/src/hooks/useSafeNavigate.ts
@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { cloneDeep, isEqual } from 'lodash-es';
-import { withBasePath } from 'utils/basePath';

 interface NavigateOptions {
 	replace?: boolean;
@@ -131,7 +130,7 @@ export const useSafeNavigate = (
 					typeof to === 'string'
 						? to
 						: `${to.pathname || location.pathname}${to.search || ''}`;
-				window.open(withBasePath(targetPath), '_blank');
+				window.open(targetPath, '_blank');
 				return;
 			}

--- a/frontend/src/lib/history.ts
+++ b/frontend/src/lib/history.ts
@@ -1,4 +1,3 @@
 import { createBrowserHistory } from 'history';
-import { getBasePath } from 'utils/basePath';

-export default createBrowserHistory({ basename: getBasePath() });
+export default createBrowserHistory();
--- a/frontend/src/pages/AllErrors/QueryStateContext.ts
+++ b/frontend/src/pages/AllErrors/QueryStateContext.ts
@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+
+interface AllErrorsQueryState {
+	isFetching: boolean;
+	isCancelled: boolean;
+	setIsFetching: (isFetching: boolean) => void;
+	setIsCancelled: (isCancelled: boolean) => void;
+}
+
+export const useAllErrorsQueryState = create<AllErrorsQueryState>((set) => ({
+	isFetching: false,
+	isCancelled: false,
+	setIsFetching: (isFetching): void => {
+		set((state) => ({
+			isFetching,
+			// Auto-reset cancelled when a new fetch starts
+			isCancelled: isFetching ? false : state.isCancelled,
+		}));
+	},
+	setIsCancelled: (isCancelled): void => {
+		set({ isCancelled });
+	},
+}));
--- a/frontend/src/pages/AllErrors/index.tsx
+++ b/frontend/src/pages/AllErrors/index.tsx
@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { FilterOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
@@ -19,12 +20,22 @@ import history from 'lib/history';
 import { isNull } from 'lodash-es';

 import { routes } from './config';
+import { useAllErrorsQueryState } from './QueryStateContext';

 import './AllErrors.styles.scss';

 function AllErrors(): JSX.Element {
 	const { pathname } = useLocation();
 	const { handleRunQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();
+
+	const isLoadingQueries = useAllErrorsQueryState((s) => s.isFetching);
+	const setIsCancelled = useAllErrorsQueryState((s) => s.setIsCancelled);
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries(['getAllErrors']);
+		queryClient.cancelQueries(['getErrorCounts']);
+		setIsCancelled(true);
+	}, [queryClient, setIsCancelled]);

 	const [showFilters, setShowFilters] = useState<boolean>(() => {
 		const localStorageValue = getLocalStorageKey(
@@ -77,7 +88,11 @@ function AllErrors(): JSX.Element {
 							}
 							rightActions={
 								<div className="right-toolbar-actions-container">
-									<RightToolbarActions onStageRunQuery={handleRunQuery} />
+									<RightToolbarActions
+										onStageRunQuery={handleRunQuery}
+										isLoadingQueries={isLoadingQueries}
+										handleCancelQuery={handleCancelQuery}
+									/>
 									<HeaderRightSection
 										enableAnnouncements={false}
 										enableShare
--- a/frontend/src/pages/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx
+++ b/frontend/src/pages/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx
@@ -4,7 +4,6 @@ import ROUTES from 'constants/routes';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Home, LifeBuoy } from 'lucide-react';
-import { withBasePath } from 'utils/basePath';

 import cloudUrl from '@/assets/Images/cloud.svg';

@@ -12,8 +11,8 @@ import './ErrorBoundaryFallback.styles.scss';

 function ErrorBoundaryFallback(): JSX.Element {
 	const handleReload = (): void => {
-		// Hard reload resets Sentry.ErrorBoundary state; withBasePath preserves any /signoz/ prefix.
-		window.location.href = withBasePath(ROUTES.HOME);
+		// Go to home page
+		window.location.href = ROUTES.HOME;
 	};

 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
--- a/frontend/src/pages/LogsExplorer/index.tsx
+++ b/frontend/src/pages/LogsExplorer/index.tsx
@@ -1,10 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -74,6 +76,27 @@ function LogsExplorer(): JSX.Element {
 	const chartQueryKeyRef = useRef<any>();

 	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingQueries) {
+			setIsCancelled(false);
+		}
+	}, [isLoadingQueries]);
+
+	const queryClient = useQueryClient();
+	const handleCancelQuery = useCallback(() => {
+		if (listQueryKeyRef.current) {
+			queryClient.cancelQueries(listQueryKeyRef.current);
+		}
+		if (chartQueryKeyRef.current) {
+			queryClient.cancelQueries(chartQueryKeyRef.current);
+		}
+		setIsCancelled(true);
+		// Reset loading state — the views container unmounts when cancelled, so
+		// no child will call setIsLoadingQueries(false) otherwise.
+		setIsLoadingQueries(false);
+	}, [queryClient]);

 	const [warning, setWarning] = useState<Warning | undefined>(undefined);

@@ -296,10 +319,12 @@ function LogsExplorer(): JSX.Element {
 							}
 							rightActions={
 								<RightToolbarActions
-									onStageRunQuery={(): void => handleRunQuery()}
-									listQueryKeyRef={listQueryKeyRef}
-									chartQueryKeyRef={chartQueryKeyRef}
+									onStageRunQuery={(): void => {
+										setIsCancelled(false);
+										handleRunQuery();
+									}}
 									isLoadingQueries={isLoadingQueries}
+									handleCancelQuery={handleCancelQuery}
 									showLiveLogs={showLiveLogs}
 								/>
 							}
@@ -315,14 +340,18 @@ function LogsExplorer(): JSX.Element {
 								</ExplorerCard>
 							</div>
 							<div className="logs-explorer-views">
-								<LogsExplorerViewsContainer
-									listQueryKeyRef={listQueryKeyRef}
-									chartQueryKeyRef={chartQueryKeyRef}
-									setIsLoadingQueries={setIsLoadingQueries}
-									setWarning={setWarning}
-									showLiveLogs={showLiveLogs}
-									handleChangeSelectedView={handleChangeSelectedView}
-								/>
+								{isCancelled ? (
+									<QueryCancelledPlaceholder subText='Click "Run Query" to load logs.' />
+								) : (
+									<LogsExplorerViewsContainer
+										listQueryKeyRef={listQueryKeyRef}
+										chartQueryKeyRef={chartQueryKeyRef}
+										setIsLoadingQueries={setIsLoadingQueries}
+										setWarning={setWarning}
+										showLiveLogs={showLiveLogs}
+										handleChangeSelectedView={handleChangeSelectedView}
+									/>
+								)}
 							</div>
 						</div>
 					</section>
--- a/frontend/src/pages/MessagingQueues/MQDetails/DropRateView/DropRateView.tsx
+++ b/frontend/src/pages/MessagingQueues/MQDetails/DropRateView/DropRateView.tsx
@@ -19,7 +19,6 @@ import {
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { openInNewTab } from 'utils/navigation';

 import {
 	convertToMilliseconds,
@@ -94,7 +93,7 @@ export function getColumns(
 											key={item}
 											className="traceid-text"
 											onClick={(): void => {
-												openInNewTab(`${ROUTES.TRACE}/${item}`);
+												window.open(`${ROUTES.TRACE}/${item}`, '_blank');
 												logEvent(`MQ Kafka: Drop Rate - traceid navigation`, {
 													item,
 												});
@@ -124,7 +123,7 @@ export function getColumns(
 						onClick={(e): void => {
 							e.preventDefault();
 							e.stopPropagation();
-							openInNewTab(`/services/${encodeURIComponent(text)}`);
+							window.open(`/services/${encodeURIComponent(text)}`, '_blank');
 						}}
 					>
 						{text}
--- a/frontend/src/pages/TracesExplorer/index.tsx
+++ b/frontend/src/pages/TracesExplorer/index.tsx
@@ -1,10 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -71,11 +73,29 @@ function TracesExplorer(): JSX.Element {
 	});

 	const [searchParams] = useSearchParams();
+	const queryClient = useQueryClient();
 	const listQueryKeyRef = useRef<any>();

 	// Get panel type from URL
 	const panelTypesFromUrl = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingQueries) {
+			setIsCancelled(false);
+		}
+	}, [isLoadingQueries]);
+
+	const handleCancelQuery = useCallback(() => {
+		if (listQueryKeyRef.current) {
+			queryClient.cancelQueries(listQueryKeyRef.current);
+		}
+		setIsCancelled(true);
+		// Reset loading state — the active view unmounts when cancelled, so no
+		// child will call setIsLoadingQueries(false) otherwise.
+		setIsLoadingQueries(false);
+	}, [queryClient]);

 	const [selectedView, setSelectedView] = useState<ExplorerViews>(() =>
 		getExplorerViewFromUrl(searchParams, panelTypesFromUrl),
@@ -210,9 +230,12 @@ function TracesExplorer(): JSX.Element {
 							}
 							rightActions={
 								<RightToolbarActions
-									onStageRunQuery={(): void => handleRunQuery()}
+									onStageRunQuery={(): void => {
+										setIsCancelled(false);
+										handleRunQuery();
+									}}
 									isLoadingQueries={isLoadingQueries}
-									listQueryKeyRef={listQueryKeyRef}
+									handleCancelQuery={handleCancelQuery}
 								/>
 							}
 						/>
@@ -224,7 +247,11 @@ function TracesExplorer(): JSX.Element {
 					</ExplorerCard>

 					<div className="traces-explorer-views">
-						{selectedView === ExplorerViews.LIST && (
+						{isCancelled && (
+							<QueryCancelledPlaceholder subText='Click "Run Query" to load traces.' />
+						)}
+
+						{!isCancelled && selectedView === ExplorerViews.LIST && (
 							<div className="trace-explorer-list-view">
 								<ListView
 									isFilterApplied={isFilterApplied}
@@ -235,7 +262,7 @@ function TracesExplorer(): JSX.Element {
 							</div>
 						)}

-						{selectedView === ExplorerViews.TRACE && (
+						{!isCancelled && selectedView === ExplorerViews.TRACE && (
 							<div className="trace-explorer-traces-view">
 								<TracesView
 									isFilterApplied={isFilterApplied}
@@ -246,7 +273,7 @@ function TracesExplorer(): JSX.Element {
 							</div>
 						)}

-						{selectedView === ExplorerViews.TIMESERIES && (
+						{!isCancelled && selectedView === ExplorerViews.TIMESERIES && (
 							<div className="trace-explorer-time-series-view">
 								<TimeSeriesView
 									dataSource={DataSource.TRACES}
@@ -258,7 +285,7 @@ function TracesExplorer(): JSX.Element {
 							</div>
 						)}

-						{selectedView === ExplorerViews.TABLE && (
+						{!isCancelled && selectedView === ExplorerViews.TABLE && (
 							<div className="trace-explorer-table-view">
 								<TableView
 									setWarning={setWarning}
--- a/frontend/src/utils/tests/base-path.test.ts
+++ b/frontend/src/utils/tests/base-path.test.ts
@@ -1,118 +0,0 @@
-/**
- * basePath is memoized at module init, so each describe block isolates the
- * module with a fresh DOM state using jest.isolateModules + require.
- */
-
-type BasePath = typeof import('../basePath');
-
-function loadModule(href?: string): BasePath {
-	if (href !== undefined) {
-		const base = document.createElement('base');
-		base.setAttribute('href', href);
-		document.head.append(base);
-	}
-
-	let mod!: BasePath;
-	jest.isolateModules(() => {
-		// oxlint-disable-next-line typescript-eslint/no-require-imports, typescript-eslint/no-var-requires
-		mod = require('../basePath');
-	});
-	return mod;
-}
-
-afterEach(() => {
-	for (const el of document.head.querySelectorAll('base')) { el.remove(); }
-});
-
-describe('at basePath="/"', () => {
-	let m: BasePath;
-	beforeEach(() => {
-		m = loadModule('/');
-	});
-
-	it('getBasePath returns "/"', () => {
-		expect(m.getBasePath()).toBe('/');
-	});
-
-	it('withBasePath is a no-op for any internal path', () => {
-		expect(m.withBasePath('/logs')).toBe('/logs');
-		expect(m.withBasePath('/logs/explorer')).toBe('/logs/explorer');
-	});
-
-	it('withBasePath passes through external URLs', () => {
-		expect(m.withBasePath('https://example.com/foo')).toBe(
-			'https://example.com/foo',
-		);
-	});
-
-	it('getAbsoluteUrl returns origin + path', () => {
-		expect(m.getAbsoluteUrl('/logs')).toBe(`${window.location.origin}/logs`);
-	});
-
-	it('getBaseUrl returns bare origin', () => {
-		expect(m.getBaseUrl()).toBe(window.location.origin);
-	});
-});
-
-describe('at basePath="/signoz/"', () => {
-	let m: BasePath;
-	beforeEach(() => {
-		m = loadModule('/signoz/');
-	});
-
-	it('getBasePath returns "/signoz/"', () => {
-		expect(m.getBasePath()).toBe('/signoz/');
-	});
-
-	it('withBasePath prepends the prefix', () => {
-		expect(m.withBasePath('/logs')).toBe('/signoz/logs');
-		expect(m.withBasePath('/logs/explorer')).toBe('/signoz/logs/explorer');
-	});
-
-	it('withBasePath is idempotent — safe to call twice', () => {
-		expect(m.withBasePath('/signoz/logs')).toBe('/signoz/logs');
-	});
-
-	it('withBasePath is idempotent when path equals the prefix without trailing slash', () => {
-		expect(m.withBasePath('/signoz')).toBe('/signoz');
-	});
-
-	it('withBasePath passes through external URLs', () => {
-		expect(m.withBasePath('https://example.com/foo')).toBe(
-			'https://example.com/foo',
-		);
-	});
-
-	it('getAbsoluteUrl returns origin + prefixed path', () => {
-		expect(m.getAbsoluteUrl('/logs')).toBe(
-			`${window.location.origin}/signoz/logs`,
-		);
-	});
-
-	it('getBaseUrl returns origin + prefix without trailing slash', () => {
-		expect(m.getBaseUrl()).toBe(`${window.location.origin}/signoz`);
-	});
-});
-
-describe('no <base> tag', () => {
-	it('getBasePath falls back to "/"', () => {
-		const m = loadModule();
-		expect(m.getBasePath()).toBe('/');
-	});
-});
-
-describe('href without trailing slash', () => {
-	it('normalises to trailing slash', () => {
-		const m = loadModule('/signoz');
-		expect(m.getBasePath()).toBe('/signoz/');
-		expect(m.withBasePath('/logs')).toBe('/signoz/logs');
-	});
-});
-
-describe('nested prefix "/a/b/prefix/"', () => {
-	it('withBasePath handles arbitrary depth', () => {
-		const m = loadModule('/a/b/prefix/');
-		expect(m.withBasePath('/logs')).toBe('/a/b/prefix/logs');
-		expect(m.withBasePath('/a/b/prefix/logs')).toBe('/a/b/prefix/logs');
-	});
-});
--- a/frontend/src/utils/tests/navigation.test.ts
+++ b/frontend/src/utils/tests/navigation.test.ts
@@ -1,38 +1,25 @@
 import { isModifierKeyPressed } from '../app';
-
-type NavigationModule = typeof import('../navigation');
-
-function loadNavigationModule(href?: string): NavigationModule {
-	if (href !== undefined) {
-		const base = document.createElement('base');
-		base.setAttribute('href', href);
-		document.head.append(base);
-	}
-	let mod!: NavigationModule;
-	jest.isolateModules(() => {
-		// oxlint-disable-next-line typescript-eslint/no-require-imports, typescript-eslint/no-var-requires
-		mod = require('../navigation');
-	});
-	return mod;
-}
-
-const createMouseEvent = (overrides: Partial<MouseEvent> = {}): MouseEvent =>
-	({
-		metaKey: false,
-		ctrlKey: false,
-		button: 0,
-		...overrides,
-	}) as MouseEvent;
+import { openInNewTab } from '../navigation';

 describe('navigation utilities', () => {
 	const originalWindowOpen = window.open;

+	beforeEach(() => {
+		window.open = jest.fn();
+	});
+
 	afterEach(() => {
 		window.open = originalWindowOpen;
-		for (const el of document.head.querySelectorAll('base')) { el.remove(); }
 	});

 	describe('isModifierKeyPressed', () => {
+		const createMouseEvent = (overrides: Partial<MouseEvent> = {}): MouseEvent =>
+			({
+				metaKey: false,
+				ctrlKey: false,
+				button: 0,
+				...overrides,
+			} as MouseEvent);

 		it('returns true when metaKey is pressed (Cmd on Mac)', () => {
 			const event = createMouseEvent({ metaKey: true });
@@ -69,59 +56,25 @@ describe('navigation utilities', () => {
 	});

 	describe('openInNewTab', () => {
-		describe('at basePath="/"', () => {
-			let m: NavigationModule;
-			beforeEach(() => {
-				jest.spyOn(window, 'open').mockImplementation();
-				m = loadNavigationModule('/');
-			});
-
-			it('passes internal path through unchanged', () => {
-				m.openInNewTab('/dashboard');
-				expect(window.open).toHaveBeenCalledWith('/dashboard', '_blank');
-			});
-
-			it('passes through external URLs unchanged', () => {
-				m.openInNewTab('https://example.com/page');
-				expect(window.open).toHaveBeenCalledWith(
-					'https://example.com/page',
-					'_blank',
-				);
-			});
-
-			it('handles paths with query strings', () => {
-				m.openInNewTab('/alerts?tab=AlertRules&relativeTime=30m');
-				expect(window.open).toHaveBeenCalledWith(
-					'/alerts?tab=AlertRules&relativeTime=30m',
-					'_blank',
-				);
-			});
+		it('calls window.open with the given path and _blank target', () => {
+			openInNewTab('/dashboard');
+			expect(window.open).toHaveBeenCalledWith('/dashboard', '_blank');
 		});

-		describe('at basePath="/signoz/"', () => {
-			let m: NavigationModule;
-			beforeEach(() => {
-				jest.spyOn(window, 'open').mockImplementation();
-				m = loadNavigationModule('/signoz/');
-			});
+		it('handles full URLs', () => {
+			openInNewTab('https://example.com/page');
+			expect(window.open).toHaveBeenCalledWith(
+				'https://example.com/page',
+				'_blank',
+			);
+		});

-			it('prepends base path to internal paths', () => {
-				m.openInNewTab('/dashboard');
-				expect(window.open).toHaveBeenCalledWith('/signoz/dashboard', '_blank');
-			});
-
-			it('passes through external URLs unchanged', () => {
-				m.openInNewTab('https://example.com/page');
-				expect(window.open).toHaveBeenCalledWith(
-					'https://example.com/page',
-					'_blank',
-				);
-			});
-
-			it('is idempotent — does not double-prefix an already-prefixed path', () => {
-				m.openInNewTab('/signoz/dashboard');
-				expect(window.open).toHaveBeenCalledWith('/signoz/dashboard', '_blank');
-			});
+		it('handles paths with query strings', () => {
+			openInNewTab('/alerts?tab=AlertRules&relativeTime=30m');
+			expect(window.open).toHaveBeenCalledWith(
+				'/alerts?tab=AlertRules&relativeTime=30m',
+				'_blank',
+			);
 		});
 	});
 });
--- a/frontend/src/utils/basePath.ts
+++ b/frontend/src/utils/basePath.ts
@@ -1,50 +0,0 @@
-// Read once at module init — avoids a DOM query on every axios request.
-const _basePath: string = ((): string => {
-	const href = document.querySelector('base')?.getAttribute('href') ?? '/';
-	return href.endsWith('/') ? href : `${href}/`;
-})();
-
-/** Returns the runtime base path — always trailing-slashed. e.g. "/" or "/signoz/" */
-export function getBasePath(): string {
-	return _basePath;
-}
-
-/**
- * Prepends the base path to an internal absolute path.
- * Idempotent and safe to call on any value.
- *
- *   withBasePath('/logs')         → '/signoz/logs'
- *   withBasePath('/signoz/logs')  → '/signoz/logs'  (already prefixed)
- *   withBasePath('https://x.com') → 'https://x.com' (external, passthrough)
- */
-export function withBasePath(path: string): string {
-	if (!path.startsWith('/')) {
-		return path;
-	}
-	if (_basePath === '/') {
-		return path;
-	}
-	if (path.startsWith(_basePath) || path === _basePath.slice(0, -1)) {
-		return path;
-	}
-	return _basePath + path.slice(1);
-}
-
-/**
- * Full absolute URL — for copy-to-clipboard and window.open calls.
- * getAbsoluteUrl(ROUTES.LOGS_EXPLORER) → 'https://host/signoz/logs/logs-explorer'
- */
-export function getAbsoluteUrl(path: string): string {
-	return window.location.origin + withBasePath(path);
-}
-
-/**
- * Origin + base path without trailing slash — for sending to the backend
- * as frontendBaseUrl in invite / password-reset email flows.
- * getBaseUrl() → 'https://host/signoz'
- */
-export function getBaseUrl(): string {
-	return (
-		window.location.origin + (_basePath === '/' ? '' : _basePath.slice(0, -1))
-	);
-}
--- a/frontend/src/utils/navigation.ts
+++ b/frontend/src/utils/navigation.ts
@@ -1,5 +1,6 @@
-import { withBasePath } from 'utils/basePath';
-
+/**
+ * Opens the given path in a new browser tab.
+ */
 export const openInNewTab = (path: string): void => {
-	window.open(withBasePath(path), '_blank');
+	window.open(path, '_blank');
 };
--- a/frontend/stylelint-rules/no-unsupported-asset-url.js
+++ b/frontend/stylelint-rules/no-unsupported-asset-url.js
@@ -34,7 +34,7 @@ const ruleName = 'local/no-unsupported-asset-url';
 * e.g. "url('/a.svg') url('/b.png') repeat" → ['/a.svg', '/b.png']
 */
 function extractUrlPaths(value) {
-	if (typeof value !== 'string') {return [];}
+	if (typeof value !== 'string') return [];
 	const paths = [];
 	const urlPattern = /url\(\s*['"]?([^'")\s]+)['"]?\s*\)/g;
 	let match = urlPattern.exec(value);
@@ -71,7 +71,7 @@ const messages = stylelint.utils.ruleMessages(ruleName, {
 */
 const rule = (primaryOption) => {
 	return (root, result) => {
-		if (!primaryOption) {return;}
+		if (!primaryOption) return;

 		root.walkDecls((decl) => {
 			const urlPaths = extractUrlPaths(decl.value);
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -10,18 +10,6 @@ import { createHtmlPlugin } from 'vite-plugin-html';
 import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
 import tsconfigPaths from 'vite-tsconfig-paths';

-// In dev the Go backend is not involved, so replace the [[.BaseHref]] placeholder
-// with "/" so relative assets resolve correctly from the Vite dev server.
-function devBasePathPlugin(): Plugin {
-	return {
-		name: 'dev-base-path',
-		apply: 'serve',
-		transformIndexHtml(html): string {
-			return html.replaceAll('[[.BaseHref]]', '/');
-		},
-	};
-}
-
 function rawMarkdownPlugin(): Plugin {
 	return {
 		name: 'raw-markdown',
@@ -44,7 +32,6 @@ export default defineConfig(
 		const plugins = [
 			tsconfigPaths(),
 			rawMarkdownPlugin(),
-			devBasePathPlugin(),
 			react(),
 			createHtmlPlugin({
 				inject: {
@@ -137,7 +124,6 @@ export default defineConfig(
 				'process.env.TUNNEL_DOMAIN': JSON.stringify(env.VITE_TUNNEL_DOMAIN),
 				'process.env.DOCS_BASE_URL': JSON.stringify(env.VITE_DOCS_BASE_URL),
 			},
-			base: './',
 			build: {
 				sourcemap: true,
 				outDir: 'build',
				`@@ -0,0 +1 @@`
				`export { default } from './QueryCancelledPlaceholder';`