Merge branch 'main' into base-path-config-setup-1

frontend/.eslintrc.cjs

@@ -66,6 +66,8 @@ module.exports = {
 	rules: {
 		// Asset migration — base-path safety
 		'rulesdir/no-unsupported-asset-pattern': 'error',
+		// Base-path safety — window.open and origin-concat patterns; upgrade to error coming PR
+		'rulesdir/no-raw-absolute-path': 'warn',
 
 		// Code quality rules
 		'prefer-const': 'error', // Enforces const for variables never reassigned

frontend/eslint-rules/no-raw-absolute-path.js

@@ -0,0 +1,153 @@
+'use strict';
+
+/**
+ * ESLint 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')
+	);
+}
+
+module.exports = {
+	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 < 1) 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' });
+			},
+		};
+	},
+};

frontend/index.html

@@ -2,6 +2,7 @@
 <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"
@@ -59,7 +60,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>
@@ -136,7 +137,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>

frontend/src/ReactI18/index.tsx

@@ -2,6 +2,7 @@ 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';
 
@@ -24,7 +25,7 @@ i18n
 				const ns = namespace[0];
 				const pathkey = `/${language}/${ns}`;
 				const hash = cacheBursting[pathkey as keyof typeof cacheBursting] || '';
-				return `/locales/${language}/${namespace}.json?h=${hash}`;
+				return `${getBasePath()}locales/${language}/${namespace}.json?h=${hash}`;
 			},
 		},
 		react: {

frontend/src/api/generatedAPIInstance.ts

@@ -1,5 +1,6 @@
 import {
 	interceptorRejected,
+	interceptorsRequestBasePath,
 	interceptorsRequestResponse,
 	interceptorsResponse,
 } from 'api';
@@ -17,6 +18,7 @@ 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,

frontend/src/api/index.ts

@@ -11,6 +11,7 @@ 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';
@@ -67,6 +68,39 @@ 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>> => {
@@ -133,6 +167,7 @@ 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({
@@ -147,6 +182,7 @@ ApiV2Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV2Instance.interceptors.request.use(interceptorsRequestBasePath);
 
 // axios V3
 export const ApiV3Instance = axios.create({
@@ -158,6 +194,7 @@ ApiV3Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV3Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV3Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios V4
@@ -170,6 +207,7 @@ ApiV4Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV4Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios V5
@@ -182,6 +220,7 @@ ApiV5Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV5Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios Base
@@ -194,6 +233,7 @@ LogEventAxiosInstance.interceptors.response.use(
 	interceptorRejectedBase,
 );
 LogEventAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
+LogEventAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 AxiosAlertManagerInstance.interceptors.response.use(
@@ -201,6 +241,7 @@ AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorRejected,
 );
 AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestResponse);
+AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestBasePath);
 
 export { apiV1 };
 export default instance;

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -12,6 +12,7 @@ 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[];
@@ -133,7 +134,7 @@ export function useNavigateToExplorer(): (
 				QueryParams.compositeQuery
 			}=${JSONCompositeQuery}`;
 
-			window.open(newExplorerPath, sameTab ? '_self' : '_blank');
+			window.open(withBasePath(newExplorerPath), sameTab ? '_self' : '_blank');
 		},
 		[
 			prepareQuery,

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

@@ -37,7 +37,6 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
 				isStackedBarChart: isStackedBarChart,
-				canPinTooltip: rest.canPinTooltip,
 			};
 			return <BarChartTooltip {...tooltipProps} />;
 		},
@@ -47,7 +46,6 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 			rest.yAxisUnit,
 			rest.decimalPrecision,
 			isStackedBarChart,
-			rest.canPinTooltip,
 		],
 	);
 

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
 import Legend from 'lib/uPlotV2/components/Legend/Legend';
 import {
@@ -25,14 +25,11 @@ export default function ChartWrapper({
 	showTooltip = true,
 	showLegend = true,
 	canPinTooltip = false,
-	pinKey,
-	onClick,
 	syncMode,
 	syncKey,
 	onDestroy = noop,
 	children,
 	layoutChildren,
-	yAxisUnit,
 	customTooltip,
 	pinnedTooltipElement,
 	'data-testid': testId,
@@ -65,13 +62,6 @@ export default function ChartWrapper({
 		[customTooltip],
 	);
 
-	const syncMetadata = useMemo(
-		() => ({
-			yAxisUnit,
-		}),
-		[yAxisUnit],
-	);
-
 	return (
 		<PlotContextProvider>
 			<ChartLayout
@@ -103,15 +93,12 @@ export default function ChartWrapper({
 							<TooltipPlugin
 								config={config}
 								canPinTooltip={canPinTooltip}
-								pinKey={pinKey}
-								onClick={onClick}
 								syncMode={syncMode}
 								maxWidth={Math.max(
 									TOOLTIP_MIN_WIDTH,
 									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
 								)}
 								syncKey={syncKey}
-								syncMetadata={syncMetadata}
 								render={renderTooltipCallback}
 								pinnedTooltipElement={pinnedTooltipElement}
 							/>

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

@@ -24,13 +24,13 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 			}
 			const tooltipProps: HistogramTooltipProps = {
 				...props,
+				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
-				canPinTooltip: rest.canPinTooltip,
 			};
 			return <HistogramTooltip {...tooltipProps} />;
 		},
-		[customTooltip, rest.yAxisUnit, rest.decimalPrecision, rest.canPinTooltip],
+		[customTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
 	);
 
 	return (

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

@@ -21,17 +21,10 @@ export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
-				canPinTooltip: rest.canPinTooltip,
 			};
 			return <TimeSeriesTooltip {...tooltipProps} />;
 		},
-		[
-			customTooltip,
-			rest.timezone,
-			rest.yAxisUnit,
-			rest.decimalPrecision,
-			rest.canPinTooltip,
-		],
+		[customTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
 	);
 
 	return (

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

@@ -12,11 +12,8 @@ interface BaseChartProps {
 	height: number;
 	showTooltip?: boolean;
 	showLegend?: boolean;
+	timezone?: Timezone;
 	canPinTooltip?: boolean;
-	/** Key that pins the tooltip while hovering. Defaults to DEFAULT_PIN_TOOLTIP_KEY ('l'). */
-	pinKey?: string;
-	/** Called when the user clicks the uPlot overlay. Receives resolved click data. */
-	onClick?: (clickData: TooltipClickData) => void;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
@@ -35,31 +32,18 @@ interface UPlotBasedChartProps {
 	layoutChildren?: React.ReactNode;
 }
 
-interface UPlotChartDataProps {
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-}
-
 export interface TimeSeriesChartProps
 	extends BaseChartProps,
-		UPlotBasedChartProps,
-		UPlotChartDataProps {
-	timezone?: Timezone;
-}
+		UPlotBasedChartProps {}
 
 export interface HistogramChartProps
 	extends BaseChartProps,
-		UPlotBasedChartProps,
-		UPlotChartDataProps {
+		UPlotBasedChartProps {
 	isQueriesMerged?: boolean;
 }
 
-export interface BarChartProps
-	extends BaseChartProps,
-		UPlotBasedChartProps,
-		UPlotChartDataProps {
+export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
 	isStackedBarChart?: boolean;
-	timezone?: Timezone;
 }
 
 export type ChartProps =

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

@@ -121,16 +121,15 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
 					}}
-					canPinTooltip
 					plotRef={onPlotRef}
 					onDestroy={onPlotDestroy}
+					yAxisUnit={widget.yAxisUnit}
+					decimalPrecision={widget.decimalPrecision}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
 					isStackedBarChart={widget.stackedBarChart ?? false}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
 					timezone={timezone}
 				>
 					<ContextMenu

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

@@ -3,6 +3,8 @@ import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { useTimezone } from 'providers/Timezone';
 import uPlot from 'uplot';
 
 import Histogram from '../../charts/Histogram/Histogram';
@@ -27,6 +29,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 	const containerDimensions = useResizeObserver(graphRef);
 
 	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
 
 	const config = useMemo(() => {
 		return prepareHistogramPanelConfig({
@@ -89,10 +92,11 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 					onDestroy={(): void => {
 						uPlotRef.current = null;
 					}}
-					canPinTooltip
+					isQueriesMerged={widget.mergeAllActiveQueries}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
-					isQueriesMerged={widget.mergeAllActiveQueries}
+					syncMode={DashboardCursorSync.Crosshair}
+					timezone={timezone}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}

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

@@ -48,8 +48,8 @@ jest.mock(
 					{JSON.stringify({
 						legendPosition: props.legendConfig?.position,
 						isQueriesMerged: props.isQueriesMerged,
-						yAxisUnit: props?.yAxisUnit,
-						decimalPrecision: props?.decimalPrecision,
+						yAxisUnit: props.yAxisUnit,
+						decimalPrecision: props.decimalPrecision,
 					})}
 				</div>
 				{props.layoutChildren}

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

@@ -112,10 +112,9 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
 					}}
-					canPinTooltip
-					timezone={timezone}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
+					timezone={timezone}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}

frontend/src/hooks/useSafeNavigate.ts

@@ -1,6 +1,7 @@
 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;
@@ -130,7 +131,7 @@ export const useSafeNavigate = (
 					typeof to === 'string'
 						? to
 						: `${to.pathname || location.pathname}${to.search || ''}`;
-				window.open(targetPath, '_blank');
+				window.open(withBasePath(targetPath), '_blank');
 				return;
 			}
 

frontend/src/lib/history.ts

@@ -1,3 +1,4 @@
 import { createBrowserHistory } from 'history';
+import { getBasePath } from 'utils/basePath';
 
-export default createBrowserHistory();
+export default createBrowserHistory({ basename: getBasePath() });

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.module.scss

@@ -1,4 +1,4 @@
-.container {
+.uplot-tooltip-container {
 	font-family: 'Inter';
 	font-size: 12px;
 	background: var(--bg-ink-300);
@@ -10,23 +10,63 @@
 	flex-direction: column;
 	gap: 8px;
 
-	&.pinned {
-		border-color: var(--bg-robin-500);
-	}
-
 	&.lightMode {
 		background: var(--bg-vanilla-100);
 		color: var(--bg-ink-500);
 		border: 1px solid var(--bg-vanilla-300);
 
-		.divider {
+		.uplot-tooltip-list {
+			&::-webkit-scrollbar-thumb {
+				background: var(--bg-vanilla-400);
+			}
+		}
+
+		.uplot-tooltip-divider {
 			background-color: var(--bg-vanilla-300);
 		}
 	}
 
-	.divider {
+	.uplot-tooltip-header-container {
+		padding: 1rem 1rem 0 1rem;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		&:last-child {
+			padding-bottom: 1rem;
+		}
+
+		.uplot-tooltip-header {
+			font-size: 13px;
+			font-weight: 500;
+		}
+	}
+
+	.uplot-tooltip-divider {
 		width: 100%;
 		height: 1px;
 		background-color: var(--bg-ink-100);
 	}
+
+	.uplot-tooltip-list {
+		// Virtuoso absolutely positions its item rows; left: 0 prevents accidental
+		// horizontal offset when the scroller has padding or transform applied.
+		div[data-viewport-type='element'] {
+			left: 0;
+			padding: 4px 8px 4px 16px;
+		}
+
+		&::-webkit-scrollbar {
+			width: 0.3rem;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--bg-slate-100);
+			border-radius: 0.5rem;
+		}
+	}
 }

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

@@ -1,31 +1,71 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
+import { Virtuoso } from 'react-virtuoso';
 import cx from 'classnames';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useTimezone } from 'providers/Timezone';
 
 import { TooltipProps } from '../types';
-import TooltipFooter from './components/TooltipFooter/TooltipFooter';
-import TooltipHeader from './components/TooltipHeader/TooltipHeader';
-import TooltipList from './components/TooltipList/TooltipList';
+import TooltipItem from './components/TooltipItem/TooltipItem';
 
 import Styles from './Tooltip.module.scss';
 
+// Fallback per-item height used for the initial size estimate before
+// Virtuoso reports the real total height via totalListHeightChanged.
+const TOOLTIP_ITEM_HEIGHT = 38;
+const LIST_MAX_HEIGHT = 300;
+
 export default function Tooltip({
 	uPlotInstance,
 	timezone,
 	content,
 	showTooltipHeader = true,
-	isPinned,
-	canPinTooltip,
-	dismiss,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
+	const { timezone: userTimezone } = useTimezone();
+	const [totalListHeight, setTotalListHeight] = useState(0);
 
 	const tooltipContent = useMemo(() => content ?? [], [content]);
+
+	const resolvedTimezone = timezone?.value ?? userTimezone.value;
+
+	const headerTitle = useMemo(() => {
+		if (!showTooltipHeader) {
+			return null;
+		}
+		const cursorIdx = uPlotInstance.cursor.idx;
+		if (cursorIdx == null) {
+			return null;
+		}
+		const timestamp = uPlotInstance.data[0]?.[cursorIdx];
+		if (timestamp == null) {
+			return null;
+		}
+		return dayjs(timestamp * 1000)
+			.tz(resolvedTimezone)
+			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
+	}, [
+		resolvedTimezone,
+		uPlotInstance.data,
+		uPlotInstance.cursor.idx,
+		showTooltipHeader,
+	]);
+
 	const activeItem = useMemo(
 		() => tooltipContent.find((item) => item.isActive) ?? null,
 		[tooltipContent],
 	);
 
+	// Use the measured height from Virtuoso when available; fall back to a
+	// per-item estimate on the first render.  Math.ceil prevents a 1 px
+	// subpixel rounding gap from triggering a spurious scrollbar.
+	const virtuosoHeight = useMemo(() => {
+		return totalListHeight > 0
+			? Math.ceil(Math.min(totalListHeight, LIST_MAX_HEIGHT))
+			: Math.min(tooltipContent.length * TOOLTIP_ITEM_HEIGHT, LIST_MAX_HEIGHT);
+	}, [totalListHeight, tooltipContent.length]);
+
 	const showHeader = showTooltipHeader || activeItem != null;
 	// With a single series the active item is fully represented in the header —
 	// hide the divider and list to avoid showing a duplicate row.
@@ -34,28 +74,46 @@ export default function Tooltip({
 
 	return (
 		<div
-			className={cx(
-				Styles.container,
-				!isDarkMode && Styles.lightMode,
-				isPinned && Styles.pinned,
-			)}
+			className={cx(Styles.uplotTooltipContainer, !isDarkMode && Styles.lightMode)}
 			data-testid="uplot-tooltip-container"
 		>
 			{showHeader && (
-				<TooltipHeader
-					uPlotInstance={uPlotInstance}
-					timezone={timezone}
-					showTooltipHeader={showTooltipHeader}
-					isPinned={isPinned}
-					activeItem={activeItem}
-				/>
+				<div className={Styles.uplotTooltipHeaderContainer}>
+					{showTooltipHeader && headerTitle && (
+						<div
+							className={Styles.uplotTooltipHeader}
+							data-testid="uplot-tooltip-header"
+						>
+							<span>{headerTitle}</span>
+						</div>
+					)}
+
+					{activeItem && (
+						<TooltipItem
+							item={activeItem}
+							isItemActive={true}
+							containerTestId="uplot-tooltip-pinned"
+							markerTestId="uplot-tooltip-pinned-marker"
+							contentTestId="uplot-tooltip-pinned-content"
+						/>
+					)}
+				</div>
 			)}
 
-			{showDivider && <span className={Styles.divider} />}
+			{showDivider && <span className={Styles.uplotTooltipDivider} />}
 
-			{showList && <TooltipList content={tooltipContent} />}
-
-			{canPinTooltip && <TooltipFooter isPinned={isPinned} dismiss={dismiss} />}
+			{showList && (
+				<Virtuoso
+					className={Styles.uplotTooltipList}
+					data-testid="uplot-tooltip-list"
+					data={tooltipContent}
+					style={{ height: virtuosoHeight, width: '100%' }}
+					totalListHeightChanged={setTotalListHeight}
+					itemContent={(_, item): JSX.Element => (
+						<TooltipItem item={item} isItemActive={false} />
+					)}
+				/>
+			)}
 		</div>
 	);
 }

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { VirtuosoMockContext } from 'react-virtuoso';
-import userEvent from '@testing-library/user-event';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -192,85 +191,3 @@ describe('Tooltip', () => {
 		expect(list).toHaveStyle({ height: '76px' });
 	});
 });
-
-describe('Tooltip footer hint', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUseIsDarkMode.mockReturnValue(false);
-	});
-
-	it('renders footer with "Press L to lock" hint when not pinned', () => {
-		renderTooltip({ isPinned: false });
-
-		const footer = screen.getByTestId('uplot-tooltip-footer');
-		expect(footer).toBeInTheDocument();
-		expect(footer).toHaveTextContent('Press');
-		expect(footer).toHaveTextContent('L');
-		expect(footer).toHaveTextContent('to lock');
-	});
-
-	it('renders footer with "Press L or Esc to unlock" hint when pinned', () => {
-		renderTooltip({ isPinned: true });
-
-		const footer = screen.getByTestId('uplot-tooltip-footer');
-		expect(footer).toHaveTextContent('Press');
-		expect(footer).toHaveTextContent('L');
-		expect(footer).toHaveTextContent('Esc');
-		expect(footer).toHaveTextContent('to unlock');
-	});
-
-	it('does not render Unpin button when not pinned', () => {
-		renderTooltip({ isPinned: false });
-
-		expect(screen.queryByTestId('uplot-tooltip-unpin')).not.toBeInTheDocument();
-	});
-
-	it('renders Unpin button when pinned', () => {
-		renderTooltip({ isPinned: true });
-
-		const unpinBtn = screen.getByTestId('uplot-tooltip-unpin');
-		expect(unpinBtn).toBeInTheDocument();
-		expect(unpinBtn).toHaveAttribute('aria-label', 'Unpin tooltip');
-	});
-
-	it('calls dismiss when Unpin button is clicked', async () => {
-		const dismiss = jest.fn();
-		renderTooltip({ isPinned: true, dismiss });
-
-		const user = userEvent.setup();
-		const unpinBtn = screen.getByTestId('uplot-tooltip-unpin');
-		await user.click(unpinBtn);
-
-		expect(dismiss).toHaveBeenCalledTimes(1);
-	});
-
-	it('footer has role="status" for screen reader announcements', () => {
-		renderTooltip();
-
-		const footer = screen.getByRole('status');
-		expect(footer).toBeInTheDocument();
-	});
-});
-
-describe('Tooltip header status pill', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUseIsDarkMode.mockReturnValue(false);
-	});
-
-	it('shows Pinned status when pinned and header is visible', () => {
-		const uPlotInstance = createUPlotInstance(0);
-
-		renderTooltip({ uPlotInstance, isPinned: true });
-
-		expect(screen.getByText('Pinned')).toBeInTheDocument();
-	});
-
-	it('does not render status pill when showTooltipHeader is false', () => {
-		const uPlotInstance = createUPlotInstance(0);
-
-		renderTooltip({ uPlotInstance, showTooltipHeader: false, isPinned: false });
-
-		expect(screen.queryByTestId('uplot-tooltip-status')).not.toBeInTheDocument();
-	});
-});

frontend/src/lib/uPlotV2/components/Tooltip/components/Kbd/Kbd.module.scss

@@ -1,29 +0,0 @@
-.kbd {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	min-width: 18px;
-	height: 18px;
-	padding: 0 5px;
-	border-radius: 3px;
-	background: var(--bg-ink-200);
-	border: 1px solid var(--bg-slate-200);
-	border-bottom-width: 2px;
-	color: var(--bg-vanilla-100);
-	font-family: 'Space Mono', monospace;
-	font-size: 10px;
-	font-weight: 600;
-	line-height: 1;
-
-	&.lightMode {
-		background: var(--bg-vanilla-200);
-		border-color: var(--bg-vanilla-400);
-		color: var(--bg-ink-400);
-	}
-
-	&.pinned {
-		background: rgba(78, 116, 248, 0.12);
-		border-color: rgba(78, 116, 248, 0.5);
-		color: var(--bg-robin-300);
-	}
-}

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

@@ -1,27 +0,0 @@
-import cx from 'classnames';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import Styles from './Kbd.module.scss';
-
-interface KbdProps {
-	children: React.ReactNode;
-	isPinned?: boolean;
-}
-
-export default function Kbd({
-	children,
-	isPinned = false,
-}: KbdProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-
-	return (
-		<kbd
-			className={cx(Styles.kbd, {
-				[Styles.lightMode]: !isDarkMode,
-				[Styles.pinned]: isPinned,
-			})}
-		>
-			{children}
-		</kbd>
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipFooter/TooltipFooter.module.scss

@@ -1,67 +0,0 @@
-.footer {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 10px;
-	padding: 7px 12px;
-	border-top: 1px solid var(--bg-slate-400);
-	background: rgba(0, 0, 0, 0.25);
-	border-radius: 0 0 6px 6px;
-	// Pull the footer up against the flex gap from the parent container.
-	margin-top: -8px;
-
-	&.lightMode {
-		background: rgba(0, 0, 0, 0.04);
-		border-top-color: var(--bg-vanilla-300);
-
-		.hint {
-			color: var(--bg-ink-400);
-		}
-
-		.unpin-button {
-			color: var(--bg-ink-400);
-			border-color: var(--bg-vanilla-300);
-
-			&:hover {
-				color: var(--bg-ink-500);
-				border-color: var(--bg-vanilla-400);
-				background: var(--bg-vanilla-200);
-			}
-		}
-	}
-
-	&.footer-pinned {
-		background: rgba(78, 116, 248, 0.06);
-		border-top-color: rgba(78, 116, 248, 0.25);
-	}
-
-	.hint {
-		display: flex;
-		align-items: center;
-		gap: 5px;
-		font-size: 11px;
-		color: var(--bg-vanilla-400);
-	}
-
-	.unpin-button {
-		display: inline-flex;
-		align-items: center;
-		gap: 5px;
-		padding: 3px 8px 3px 6px;
-		background: transparent;
-		border: 1px solid var(--bg-slate-200);
-		border-radius: 3px;
-		color: var(--bg-vanilla-400);
-		font-family: 'Inter', sans-serif;
-		font-size: 11px;
-		cursor: pointer;
-		transition: all 150ms ease;
-		flex-shrink: 0;
-
-		&:hover {
-			color: var(--bg-vanilla-100);
-			border-color: var(--bg-slate-100);
-			background: var(--bg-ink-200);
-		}
-	}
-}

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

@@ -1,65 +0,0 @@
-import cx from 'classnames';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { DEFAULT_PIN_TOOLTIP_KEY } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { X } from 'lucide-react';
-
-import Kbd from '../Kbd/Kbd';
-
-import Styles from './TooltipFooter.module.scss';
-
-interface TooltipFooterProps {
-	pinKey?: string;
-	isPinned: boolean;
-	dismiss: () => void;
-}
-
-export default function TooltipFooter({
-	pinKey = DEFAULT_PIN_TOOLTIP_KEY,
-	isPinned,
-	dismiss,
-}: TooltipFooterProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-
-	return (
-		<div
-			className={cx(
-				Styles.footer,
-				!isDarkMode && Styles.lightMode,
-				isPinned && Styles.footerPinned,
-			)}
-			role="status"
-			data-testid="uplot-tooltip-footer"
-		>
-			<div className={Styles.hint}>
-				{isPinned ? (
-					<>
-						<span>Press</span>
-						<Kbd isPinned>{pinKey.toUpperCase()}</Kbd>
-						<span>or</span>
-						<Kbd isPinned>Esc</Kbd>
-						<span>to unpin</span>
-					</>
-				) : (
-					<>
-						<span>Press</span>
-						<Kbd>{pinKey.toUpperCase()}</Kbd>
-						<span>to pin the tooltip</span>
-					</>
-				)}
-			</div>
-
-			{isPinned && (
-				<button
-					type="button"
-					className={Styles.unpinButton}
-					onClick={dismiss}
-					aria-label="Unpin tooltip"
-					data-testid="uplot-tooltip-unpin"
-				>
-					<X size={10} />
-					<span>Unpin</span>
-				</button>
-			)}
-		</div>
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.module.scss

@@ -1,39 +0,0 @@
-.header-container {
-	padding: 1rem 1rem 0 1rem;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-
-	&:last-child {
-		padding-bottom: 1rem;
-	}
-
-	.header-row {
-		font-size: 13px;
-		font-weight: 500;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 8px;
-	}
-
-	.status {
-		display: flex;
-		align-items: center;
-		gap: 5px;
-		font-size: 10px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: var(--bg-slate-50);
-		flex-shrink: 0;
-
-		&.statusLightMode {
-			color: var(--bg-ink-300);
-		}
-
-		&.status-pinned {
-			color: var(--bg-robin-400);
-		}
-	}
-}

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

@@ -1,94 +0,0 @@
-import { useMemo } from 'react';
-import cx from 'classnames';
-import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import dayjs from 'dayjs';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { Pin } from 'lucide-react';
-import { useTimezone } from 'providers/Timezone';
-import type uPlot from 'uplot';
-
-import { TooltipContentItem } from '../../../types';
-import TooltipItem from '../TooltipItem/TooltipItem';
-
-import Styles from './TooltipHeader.module.scss';
-
-interface TooltipHeaderProps {
-	uPlotInstance: uPlot;
-	timezone?: Timezone;
-	showTooltipHeader: boolean;
-	isPinned: boolean;
-	activeItem: TooltipContentItem | null;
-}
-
-export default function TooltipHeader({
-	uPlotInstance,
-	timezone,
-	showTooltipHeader,
-	isPinned,
-	activeItem,
-}: TooltipHeaderProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	const { timezone: userTimezone } = useTimezone();
-	const resolvedTimezone = timezone?.value ?? userTimezone.value;
-
-	const headerTitle = useMemo(() => {
-		if (!showTooltipHeader) {
-			return null;
-		}
-		const cursorIdx = uPlotInstance.cursor.idx;
-		if (cursorIdx == null) {
-			return null;
-		}
-		const timestamp = uPlotInstance.data[0]?.[cursorIdx];
-		if (timestamp == null) {
-			return null;
-		}
-		return dayjs(timestamp * 1000)
-			.tz(resolvedTimezone)
-			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
-	}, [
-		resolvedTimezone,
-		uPlotInstance.data,
-		uPlotInstance.cursor.idx,
-		showTooltipHeader,
-	]);
-
-	return (
-		<div
-			className={Styles.headerContainer}
-			data-testid="uplot-tooltip-header-container"
-		>
-			{showTooltipHeader && headerTitle && (
-				<div className={Styles.headerRow}>
-					<span>{headerTitle}</span>
-					<div
-						className={cx(
-							Styles.status,
-							!isDarkMode && Styles.statusLightMode,
-							isPinned && Styles.statusPinned,
-						)}
-						data-testid="uplot-tooltip-status"
-					>
-						{isPinned && (
-							<>
-								<Pin size={12} />
-								<span>Pinned</span>
-							</>
-						)}
-					</div>
-				</div>
-			)}
-
-			{activeItem && (
-				<TooltipItem
-					item={activeItem}
-					isItemActive={true}
-					containerTestId="uplot-tooltip-pinned"
-					markerTestId="uplot-tooltip-pinned-marker"
-					contentTestId="uplot-tooltip-pinned-content"
-				/>
-			)}
-		</div>
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipList/TooltipList.module.scss

@@ -1,27 +0,0 @@
-.list {
-	// Virtuoso absolutely positions its item rows; left: 0 prevents accidental
-	// horizontal offset when the scroller has padding or transform applied.
-	div[data-viewport-type='element'] {
-		left: 0;
-		padding: 4px 8px 4px 16px;
-	}
-
-	&::-webkit-scrollbar {
-		width: 0.3rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--bg-slate-100);
-		border-radius: 0.5rem;
-	}
-
-	&.lightMode {
-		&::-webkit-scrollbar-thumb {
-			background: var(--bg-vanilla-400);
-		}
-	}
-}

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

@@ -1,48 +0,0 @@
-import { useMemo, useState } from 'react';
-import { Virtuoso } from 'react-virtuoso';
-import cx from 'classnames';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import { TooltipContentItem } from '../../../types';
-import TooltipItem from '../TooltipItem/TooltipItem';
-
-import Styles from './TooltipList.module.scss';
-
-// Fallback per-item height before Virtuoso reports the real total.
-const TOOLTIP_ITEM_HEIGHT = 38;
-const LIST_MAX_HEIGHT = 300;
-
-interface TooltipListProps {
-	content: TooltipContentItem[];
-}
-
-export default function TooltipList({
-	content,
-}: TooltipListProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	const [totalListHeight, setTotalListHeight] = useState(0);
-
-	// Use the measured height from Virtuoso when available; fall back to a
-	// per-item estimate on first render. Math.ceil prevents a 1 px
-	// subpixel rounding gap from triggering a spurious scrollbar.
-	const height = useMemo(
-		() =>
-			totalListHeight > 0
-				? Math.ceil(Math.min(totalListHeight, LIST_MAX_HEIGHT))
-				: Math.min(content.length * TOOLTIP_ITEM_HEIGHT, LIST_MAX_HEIGHT),
-		[totalListHeight, content.length],
-	);
-
-	return (
-		<Virtuoso
-			className={cx(Styles.list, !isDarkMode && Styles.lightMode)}
-			data-testid="uplot-tooltip-list"
-			data={content}
-			style={{ height, width: '100%' }}
-			totalListHeightChanged={setTotalListHeight}
-			itemContent={(_, item): JSX.Element => (
-				<TooltipItem item={item} isItemActive={false} />
-			)}
-		/>
-	);
-}

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

@@ -62,11 +62,10 @@ export interface TooltipRenderArgs {
 
 export interface BaseTooltipProps {
 	showTooltipHeader?: boolean;
-	canPinTooltip?: boolean;
+	timezone?: Timezone;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	content?: TooltipContentItem[];
-	timezone?: Timezone;
 }
 
 export interface TimeSeriesTooltipProps

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.styles.scss

@@ -11,6 +11,10 @@
 	opacity: 0;
 	pointer-events: none;
 
+	&.pinned {
+		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+	}
+
 	&.visible {
 		opacity: 1;
 		pointer-events: all;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'classnames';
+import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
 import uPlot from 'uplot';
 
-import { syncCursorRegistry } from './syncCursorRegistry';
 import {
 	createInitialControllerState,
 	createSetCursorHandler,
@@ -16,18 +16,14 @@ import {
 } from './tooltipController';
 import {
 	DashboardCursorSync,
-	DEFAULT_PIN_TOOLTIP_KEY,
+	TooltipClickData,
 	TooltipControllerContext,
 	TooltipControllerState,
 	TooltipLayoutInfo,
 	TooltipPluginProps,
 	TooltipViewState,
 } from './types';
-import {
-	buildClickData,
-	createInitialViewState,
-	createLayoutObserver,
-} from './utils';
+import { createInitialViewState, createLayoutObserver } from './utils';
 
 import './TooltipPlugin.styles.scss';
 
@@ -44,11 +40,8 @@ export default function TooltipPlugin({
 	maxHeight = 600,
 	syncMode = DashboardCursorSync.None,
 	syncKey = '_tooltip_sync_global_',
-	syncMetadata,
 	pinnedTooltipElement,
 	canPinTooltip = false,
-	pinKey = DEFAULT_PIN_TOOLTIP_KEY,
-	onClick,
 }: TooltipPluginProps): JSX.Element | null {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const rafId = useRef<number | null>(null);
@@ -107,29 +100,7 @@ export default function TooltipPlugin({
 		// crosshair / tooltip can follow the dashboard-wide cursor.
 		if (syncMode !== DashboardCursorSync.None && config.scales[0]?.props.time) {
 			config.setCursor({
-				sync: { key: syncKey, scales: ['x', 'y'] },
-			});
-
-			// Show the horizontal crosshair only when the receiving panel shares
-			// the same y-axis unit as the source panel. When this panel is the
-			// source (cursor.event != null) the line is always shown and this
-			// panel's metadata is written to the registry so receivers can read it.
-			config.addHook('setCursor', (u: uPlot): void => {
-				const yCursorEl = u.root.querySelector<HTMLElement>('.u-cursor-y');
-				if (!yCursorEl) {
-					return;
-				}
-
-				if (u.cursor.event != null) {
-					// This panel is the source — publish metadata and always show line.
-					syncCursorRegistry.setMetadata(syncKey, syncMetadata);
-					yCursorEl.style.display = '';
-				} else {
-					// This panel is receiving sync — show only if units match.
-					const sourceMeta = syncCursorRegistry.getMetadata(syncKey);
-					yCursorEl.style.display =
-						sourceMeta?.yAxisUnit === syncMetadata?.yAxisUnit ? '' : 'none';
-				}
+				sync: { key: syncKey, scales: ['x', null] },
 			});
 		}
 
@@ -164,14 +135,13 @@ export default function TooltipPlugin({
 
 		// Attach / detach global listeners when pin state changes so
 		// we can detect when the user interacts outside the tooltip.
-		// Keyboard unpinning is handled exclusively in handleKeyDown so
-		// that only L (toggle) and Escape (release) can dismiss — not
-		// arbitrary keystrokes like arrow keys or Tab.
 		function toggleOutsideListeners(enable: boolean): void {
 			if (enable) {
 				document.addEventListener('mousedown', onOutsideInteraction, true);
+				document.addEventListener('keydown', onOutsideInteraction, true);
 			} else {
 				document.removeEventListener('mousedown', onOutsideInteraction, true);
+				document.removeEventListener('keydown', onOutsideInteraction, true);
 			}
 		}
 
@@ -289,84 +259,66 @@ export default function TooltipPlugin({
 			}
 		};
 
-		// Handles all tooltip-pin keyboard interactions:
-		//   Escape  — always releases the tooltip when pinned (never steals Escape
-		//             from other handlers since we do not call stopPropagation).
-		//   pinKey  — toggles: pins when hovering+unpinned, unpins when pinned.
-		const handleKeyDown = (event: KeyboardEvent): void => {
-			// Escape: release-only (never toggles on).
-			if (event.key === 'Escape') {
-				if (controller.pinned) {
-					dismissTooltip();
-				}
-				return;
-			}
-
-			if (event.key.toLowerCase() !== pinKey.toLowerCase()) {
-				return;
-			}
-
-			// Toggle off: L pressed while already pinned.
-			if (controller.pinned) {
-				dismissTooltip();
-				return;
-			}
-
-			// Toggle on: L pressed while hovering.
+		// When pinning is enabled, a click on the plot overlay while
+		// hovering converts the transient tooltip into a pinned one.
+		// Uses getPlot(controller) to avoid closing over u (plot), which
+		// would retain the plot and detached canvases across unmounts.
+		const handleUPlotOverClick = (event: MouseEvent): void => {
 			const plot = getPlot(controller);
-			if (
-				!plot ||
-				!controller.hoverActive ||
-				controller.focusedSeriesIndex == null
-			) {
-				return;
-			}
-
-			const cursorLeft = plot.cursor.left ?? -1;
-			const cursorTop = plot.cursor.top ?? -1;
-			if (cursorLeft < 0 || cursorTop < 0) {
-				return;
-			}
-
-			const plotRect = plot.over.getBoundingClientRect();
-			const syntheticEvent = ({
-				clientX: plotRect.left + cursorLeft,
-				clientY: plotRect.top + cursorTop,
-				target: plot.over,
-				offsetX: cursorLeft,
-				offsetY: cursorTop,
-			} as unknown) as MouseEvent;
-
-			controller.clickData = buildClickData(syntheticEvent, plot);
-			controller.pinned = true;
-			scheduleRender(true);
-		};
-
-		// Forward overlay clicks to the consumer-provided onClick callback.
-		const handleOverClick = (event: MouseEvent): void => {
-			const plot = getPlot(controller);
-			/**
-			 * Only trigger onClick if the click happened on the plot overlay and there is a focused series.
-			 * It also ensures that clicks only trigger onClick when there is a relevant data point (i.e. a focused series) to provide context for the click.
-			 */
 			if (
 				plot &&
 				event.target === plot.over &&
+				controller.hoverActive &&
+				!controller.pinned &&
 				controller.focusedSeriesIndex != null
 			) {
-				const clickData = buildClickData(event, plot);
-				onClick?.(clickData);
+				const xValue = plot.posToVal(event.offsetX, 'x');
+				const yValue = plot.posToVal(event.offsetY, 'y');
+				const focusedSeries = getFocusedSeriesAtPosition(event, plot);
+
+				let clickedDataTimestamp = xValue;
+				if (focusedSeries) {
+					const dataIndex = plot.posToIdx(event.offsetX);
+					const xSeriesData = plot.data[0];
+					if (
+						xSeriesData &&
+						dataIndex >= 0 &&
+						dataIndex < xSeriesData.length &&
+						xSeriesData[dataIndex] !== undefined
+					) {
+						clickedDataTimestamp = xSeriesData[dataIndex];
+					}
+				}
+
+				const clickData: TooltipClickData = {
+					xValue,
+					yValue,
+					focusedSeries,
+					clickedDataTimestamp,
+					mouseX: event.offsetX,
+					mouseY: event.offsetY,
+					absoluteMouseX: event.clientX,
+					absoluteMouseY: event.clientY,
+				};
+
+				controller.clickData = clickData;
+
+				setTimeout(() => {
+					controller.pinned = true;
+					scheduleRender(true);
+				}, 0);
 			}
 		};
 
 		let overClickHandler: ((event: MouseEvent) => void) | null = null;
 
-		// Called once per uPlot instance; used to store the instance on the controller.
+		// Called once per uPlot instance; used to store the instance
+		// on the controller and optionally attach the pinning handler.
 		const handleInit = (u: uPlot): void => {
 			controller.plot = u;
 			updateState({ hasPlot: true });
-			if (onClick) {
-				overClickHandler = handleOverClick;
+			if (canPinTooltip) {
+				overClickHandler = handleUPlotOverClick;
 				u.over.addEventListener('click', overClickHandler);
 			}
 		};
@@ -413,18 +365,13 @@ export default function TooltipPlugin({
 
 		window.addEventListener('resize', handleWindowResize);
 		window.addEventListener('scroll', handleScroll, true);
-		if (canPinTooltip) {
-			document.addEventListener('keydown', handleKeyDown, true);
-		}
 
 		return (): void => {
 			layoutRef.current?.observer.disconnect();
 			window.removeEventListener('resize', handleWindowResize);
 			window.removeEventListener('scroll', handleScroll, true);
 			document.removeEventListener('mousedown', onOutsideInteraction, true);
-			if (canPinTooltip) {
-				document.removeEventListener('keydown', handleKeyDown, true);
-			}
+			document.removeEventListener('keydown', onOutsideInteraction, true);
 			cancelPendingRender();
 			removeReadyHook();
 			removeInitHook();
@@ -434,7 +381,9 @@ export default function TooltipPlugin({
 			removeSetCursorHook();
 			if (overClickHandler) {
 				const plot = getPlot(controller);
-				plot?.over.removeEventListener('click', overClickHandler);
+				if (plot) {
+					plot.over.removeEventListener('click', overClickHandler);
+				}
 				overClickHandler = null;
 			}
 			clearPlotReferences();
@@ -474,12 +423,8 @@ export default function TooltipPlugin({
 	}, [isHovering, hasPlot]);
 
 	const tooltipBody = useMemo(() => {
-		if (isPinned) {
-			if (pinnedTooltipElement != null && viewState.clickData != null) {
-				return pinnedTooltipElement(viewState.clickData);
-			}
-			// No custom pinned element — keep showing the last hover contents.
-			return contents ?? null;
+		if (isPinned && pinnedTooltipElement != null && viewState.clickData != null) {
+			return pinnedTooltipElement(viewState.clickData);
 		}
 
 		if (isHovering) {

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/syncCursorRegistry.ts

@@ -1,24 +0,0 @@
-import type { TooltipSyncMetadata } from './types';
-
-/**
- * Module-level registry that tracks the metadata of the panel currently
- * acting as the cursor source (the one being hovered) per sync group.
- *
- * uPlot fires the source panel's setCursor hook before broadcasting to
- * receivers, so the registry is always populated before receivers read it.
- *
- * Receivers use this to make decisions such as:
- * - Whether to show the horizontal crosshair line (matching yAxisUnit)
- * - Future: what to render inside the tooltip (matching groupBy, etc.)
- */
-const metadataBySyncKey = new Map<string, TooltipSyncMetadata | undefined>();
-
-export const syncCursorRegistry = {
-	setMetadata(syncKey: string, metadata: TooltipSyncMetadata | undefined): void {
-		metadataBySyncKey.set(syncKey, metadata);
-	},
-
-	getMetadata(syncKey: string): TooltipSyncMetadata | undefined {
-		return metadataBySyncKey.get(syncKey);
-	},
-};

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/tooltipController.ts

@@ -102,12 +102,6 @@ export function updateHoverState(
 	controller: TooltipControllerState,
 	syncTooltipWithDashboard: boolean,
 ): void {
-	// When pinned, keep hoverActive stable so the tooltip stays visible
-	// until explicitly dismissed — the cursor lock fires asynchronously
-	// and setSeries/setLegend can otherwise race and clear hoverActive.
-	if (controller.pinned) {
-		return;
-	}
 	// When the cursor is driven by dashboard‑level sync, we only show
 	// the tooltip if the plot is in viewport and at least one series
 	// is active. Otherwise we fall back to local interaction logic.

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts

@@ -11,9 +11,6 @@ import type { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
 
 export const TOOLTIP_OFFSET = 10;
 
-// Default key that pins the tooltip while hovering over the chart.
-export const DEFAULT_PIN_TOOLTIP_KEY = 'p';
-
 export enum DashboardCursorSync {
 	Crosshair,
 	None,
@@ -37,20 +34,11 @@ export interface TooltipLayoutInfo {
 	height: number;
 }
 
-export interface TooltipSyncMetadata {
-	yAxisUnit?: string;
-}
-
 export interface TooltipPluginProps {
 	config: UPlotConfigBuilder;
 	canPinTooltip?: boolean;
-	/** Key that pins the tooltip while hovering. Defaults to DEFAULT_PIN_TOOLTIP_KEY ('l'). */
-	pinKey?: string;
-	/** Called when the user clicks the uPlot overlay. Receives resolved click data. */
-	onClick?: (clickData: TooltipClickData) => void;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
-	syncMetadata?: TooltipSyncMetadata;
 	render: (args: TooltipRenderArgs) => ReactNode;
 	pinnedTooltipElement?: (clickData: TooltipClickData) => ReactNode;
 	maxWidth?: number;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/utils.ts

@@ -1,11 +1,4 @@
-import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
-
-import {
-	TOOLTIP_OFFSET,
-	TooltipClickData,
-	TooltipLayoutInfo,
-	TooltipViewState,
-} from './types';
+import { TOOLTIP_OFFSET, TooltipLayoutInfo, TooltipViewState } from './types';
 
 export function isPlotInViewport(
 	rect: uPlot.BBox,
@@ -165,40 +158,3 @@ export function createLayoutObserver(
 	};
 	return layout;
 }
-
-/**
- * Resolves a TooltipClickData snapshot from a MouseEvent (real or synthetic)
- * and the current uPlot instance. Shared by the overlay click handler and the
- * keyboard-pin handler (which synthesises an event from the cursor position).
- */
-export function buildClickData(
-	event: MouseEvent,
-	plot: uPlot,
-): TooltipClickData {
-	const xValue = plot.posToVal(event.offsetX, 'x');
-	const yValue = plot.posToVal(event.offsetY, 'y');
-	const focusedSeries = getFocusedSeriesAtPosition(event, plot);
-
-	const dataIndex = plot.posToIdx(event.offsetX);
-	let clickedDataTimestamp = xValue;
-	const xSeriesData = plot.data[0];
-	if (
-		xSeriesData &&
-		dataIndex >= 0 &&
-		dataIndex < xSeriesData.length &&
-		xSeriesData[dataIndex] !== undefined
-	) {
-		clickedDataTimestamp = xSeriesData[dataIndex];
-	}
-
-	return {
-		xValue,
-		yValue,
-		focusedSeries,
-		clickedDataTimestamp,
-		mouseX: event.offsetX,
-		mouseY: event.offsetY,
-		absoluteMouseX: event.clientX,
-		absoluteMouseY: event.clientY,
-	};
-}

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -7,10 +7,7 @@ import type uPlot from 'uplot';
 import { TooltipRenderArgs } from '../../components/types';
 import { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
 import TooltipPlugin from '../TooltipPlugin/TooltipPlugin';
-import {
-	DashboardCursorSync,
-	DEFAULT_PIN_TOOLTIP_KEY,
-} from '../TooltipPlugin/types';
+import { DashboardCursorSync } from '../TooltipPlugin/types';
 
 // Avoid depending on the full uPlot + onClickPlugin behaviour in these tests.
 // We only care that pinning logic runs without throwing, not which series is focused.
@@ -63,7 +60,7 @@ function getHandler(config: ConfigMock, hookName: string): HookHandler {
 function createFakePlot(): {
 	over: HTMLDivElement;
 	setCursor: jest.Mock<void, [uPlot.Cursor]>;
-	cursor: { event: Record<string, unknown>; left: number; top: number };
+	cursor: { event: Record<string, unknown> };
 	posToVal: jest.Mock<number, [value: number]>;
 	posToIdx: jest.Mock<number, []>;
 	data: [number[], number[]];
@@ -74,9 +71,7 @@ function createFakePlot(): {
 	return {
 		over,
 		setCursor: jest.fn(),
-		// left / top are set to valid values so keyboard-pin tests do not
-		// hit the "cursor off-screen" guard inside handleKeyDown.
-		cursor: { event: {}, left: 50, top: 50 },
+		cursor: { event: {} },
 		// In real uPlot these map overlay coordinates to data-space values.
 		posToVal: jest.fn((value: number) => value),
 		posToIdx: jest.fn(() => 0),
@@ -250,21 +245,18 @@ describe('TooltipPlugin', () => {
 	// ---- Pin behaviour ----------------------------------------------------------
 
 	describe('pin behaviour', () => {
-		it('pins the tooltip when canPinTooltip is true and the pinKey is pressed while hovering', () => {
+		it('pins the tooltip when canPinTooltip is true and overlay is clicked', () => {
 			const config = createConfigMock();
 
-			renderAndActivateHover(config, undefined, { canPinTooltip: true });
+			const fakePlot = renderAndActivateHover(config, undefined, {
+				canPinTooltip: true,
+			});
 
 			const container = screen.getByTestId('tooltip-plugin-container');
 			expect(container.classList.contains('pinned')).toBe(false);
 
 			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 			});
 
 			return waitFor(() => {
@@ -280,7 +272,7 @@ describe('TooltipPlugin', () => {
 				React.createElement('div', null, 'pinned-tooltip'),
 			);
 
-			renderAndActivateHover(
+			const fakePlot = renderAndActivateHover(
 				config,
 				() => React.createElement('div', null, 'hover-tooltip'),
 				{
@@ -292,12 +284,7 @@ describe('TooltipPlugin', () => {
 			expect(screen.getByText('hover-tooltip')).toBeInTheDocument();
 
 			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 			});
 
 			await waitFor(() => {
@@ -331,14 +318,9 @@ describe('TooltipPlugin', () => {
 				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
 			});
 
-			// Pin the tooltip via the keyboard shortcut.
+			// Pin the tooltip.
 			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 			});
 
 			// Wait until the tooltip is actually pinned (pointer events enabled)
@@ -387,14 +369,9 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			// Pin via keyboard.
+			// Pin.
 			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 				jest.runAllTimers();
 			});
 
@@ -440,14 +417,8 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			// Pin via keyboard.
 			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 				jest.runAllTimers();
 			});
 
@@ -475,7 +446,7 @@ describe('TooltipPlugin', () => {
 			jest.useRealTimers();
 		});
 
-		it('unpins the tooltip when Escape is pressed while pinned', async () => {
+		it('unpins the tooltip on outside keydown', async () => {
 			jest.useFakeTimers();
 			const config = createConfigMock();
 
@@ -496,14 +467,8 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			// Pin via keyboard.
 			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 				jest.runAllTimers();
 			});
 
@@ -513,7 +478,7 @@ describe('TooltipPlugin', () => {
 					?.classList.contains('pinned'),
 			).toBe(true);
 
-			// Press Escape to release.
+			// Press a key outside the tooltip.
 			act(() => {
 				document.body.dispatchEvent(
 					new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
@@ -531,277 +496,6 @@ describe('TooltipPlugin', () => {
 
 			jest.useRealTimers();
 		});
-
-		it('unpins the tooltip when the pin key is pressed a second time (toggle off)', async () => {
-			jest.useFakeTimers();
-			const config = createConfigMock();
-
-			renderAndActivateHover(config, undefined, { canPinTooltip: true });
-			jest.runAllTimers();
-
-			// First press — pin.
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
-				jest.runAllTimers();
-			});
-
-			await waitFor(() => {
-				expect(
-					screen
-						.getByTestId('tooltip-plugin-container')
-						.classList.contains('pinned'),
-				).toBe(true);
-			});
-
-			// Second press — unpin (toggle off).
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
-				jest.runAllTimers();
-			});
-
-			await waitFor(() => {
-				const container = screen.getByTestId('tooltip-plugin-container');
-				expect(container.classList.contains('pinned')).toBe(false);
-			});
-
-			jest.useRealTimers();
-		});
-
-		it('does not unpin on Escape when tooltip is not pinned', () => {
-			const config = createConfigMock();
-			renderAndActivateHover(config, undefined, { canPinTooltip: true });
-
-			// Escape without pinning first — should be a no-op.
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
-				);
-			});
-
-			const container = screen.getByTestId('tooltip-plugin-container');
-			// Tooltip should still be hovering (visible), not dismissed.
-			expect(container.classList.contains('visible')).toBe(true);
-			expect(container.classList.contains('pinned')).toBe(false);
-		});
-
-		it('does not unpin on arbitrary keys that are not Escape or the pin key', async () => {
-			jest.useFakeTimers();
-			const config = createConfigMock();
-
-			renderAndActivateHover(config, undefined, { canPinTooltip: true });
-			jest.runAllTimers();
-
-			// Pin.
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
-				jest.runAllTimers();
-			});
-
-			await waitFor(() => {
-				expect(
-					screen
-						.getByTestId('tooltip-plugin-container')
-						.classList.contains('pinned'),
-				).toBe(true);
-			});
-
-			// Arrow key — should NOT unpin.
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }),
-				);
-				jest.runAllTimers();
-			});
-
-			await waitFor(() => {
-				expect(
-					screen
-						.getByTestId('tooltip-plugin-container')
-						.classList.contains('pinned'),
-				).toBe(true);
-			});
-
-			jest.useRealTimers();
-		});
-	});
-
-	// ---- Keyboard pin edge cases ------------------------------------------------
-
-	describe('keyboard pin edge cases', () => {
-		it('does not pin when cursor coordinates are negative (cursor off-screen)', () => {
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config,
-					render: () => React.createElement('div', null, 'tooltip-body'),
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: true,
-				}),
-			);
-
-			// Negative cursor coords — handleKeyDown bails out before pinning.
-			const fakePlot = {
-				...createFakePlot(),
-				cursor: { event: {}, left: -1, top: -1 },
-			};
-
-			act(() => {
-				getHandler(config, 'init')(fakePlot);
-				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
-			});
-
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
-			});
-
-			const container = screen.getByTestId('tooltip-plugin-container');
-			expect(container.classList.contains('pinned')).toBe(false);
-		});
-
-		it('does not pin when hover is not active', () => {
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config,
-					render: () => React.createElement('div', null, 'tooltip-body'),
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: true,
-				}),
-			);
-
-			const fakePlot = createFakePlot();
-
-			act(() => {
-				// Initialise the plot but do NOT call setSeries – hoverActive stays false.
-				getHandler(config, 'init')(fakePlot);
-			});
-
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
-			});
-
-			// The container exists once the plot is initialised, but it should
-			// be hidden and not pinned since hover was never activated.
-			const container = screen.getByTestId('tooltip-plugin-container');
-			expect(container.classList.contains('pinned')).toBe(false);
-			expect(container.classList.contains('visible')).toBe(false);
-		});
-
-		it('ignores other keys and only pins on the configured pinKey', async () => {
-			const config = createConfigMock();
-
-			renderAndActivateHover(config, undefined, {
-				canPinTooltip: true,
-				pinKey: 'p',
-			});
-
-			// Default key 'l' should NOT pin when pinKey is 'p'.
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
-			});
-
-			await waitFor(() => {
-				expect(
-					screen
-						.getByTestId('tooltip-plugin-container')
-						.classList.contains('pinned'),
-				).toBe(false);
-			});
-
-			// Custom pin key 'p' SHOULD pin.
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', { key: 'p', bubbles: true }),
-				);
-			});
-
-			await waitFor(() => {
-				expect(
-					screen
-						.getByTestId('tooltip-plugin-container')
-						.classList.contains('pinned'),
-				).toBe(true);
-			});
-		});
-
-		it('does not register a keydown listener when canPinTooltip is false', () => {
-			const config = createConfigMock();
-			const addSpy = jest.spyOn(document, 'addEventListener');
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config,
-					render: () => null,
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: false,
-				}),
-			);
-
-			const keydownCalls = addSpy.mock.calls.filter(
-				([type]) => type === 'keydown',
-			);
-			expect(keydownCalls).toHaveLength(0);
-		});
-
-		it('removes the keydown pin listener on unmount', () => {
-			const config = createConfigMock();
-			const addSpy = jest.spyOn(document, 'addEventListener');
-			const removeSpy = jest.spyOn(document, 'removeEventListener');
-
-			const { unmount } = render(
-				React.createElement(TooltipPlugin, {
-					config,
-					render: () => null,
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: true,
-				}),
-			);
-
-			const pinListenerCall = addSpy.mock.calls.find(
-				([type]) => type === 'keydown',
-			);
-			expect(pinListenerCall).toBeDefined();
-			if (!pinListenerCall) {
-				return;
-			}
-			const [, pinListener, pinOptions] = pinListenerCall;
-
-			unmount();
-
-			expect(removeSpy).toHaveBeenCalledWith('keydown', pinListener, pinOptions);
-		});
 	});
 
 	// ---- Cursor sync ------------------------------------------------------------
@@ -822,7 +516,7 @@ describe('TooltipPlugin', () => {
 			);
 
 			expect(setCursorSpy).toHaveBeenCalledWith({
-				sync: { key: 'dashboard-sync', scales: ['x', 'y'] },
+				sync: { key: 'dashboard-sync', scales: ['x', null] },
 			});
 		});
 

frontend/src/pages/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx

@@ -4,6 +4,7 @@ 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';
 
@@ -11,8 +12,8 @@ import './ErrorBoundaryFallback.styles.scss';
 
 function ErrorBoundaryFallback(): JSX.Element {
 	const handleReload = (): void => {
-		// Go to home page
-		window.location.href = ROUTES.HOME;
+		// Hard reload resets Sentry.ErrorBoundary state; withBasePath preserves any /signoz/ prefix.
+		window.location.href = withBasePath(ROUTES.HOME);
 	};
 
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();

frontend/src/utils/__tests__/basePath.test.ts

@@ -0,0 +1,118 @@
+/**
+ * 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.appendChild(base);
+	}
+
+	let mod!: BasePath;
+	jest.isolateModules(() => {
+		// eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+		mod = require('../basePath');
+	});
+	return mod;
+}
+
+afterEach(() => {
+	document.head.querySelectorAll('base').forEach((el) => 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');
+	});
+});

frontend/src/utils/__tests__/navigation.test.ts

@@ -1,15 +1,27 @@
 import { isModifierKeyPressed } from '../app';
-import { openInNewTab } from '../navigation';
+
+type NavigationModule = typeof import('../navigation');
+
+function loadNavigationModule(href?: string): NavigationModule {
+	if (href !== undefined) {
+		const base = document.createElement('base');
+		base.setAttribute('href', href);
+		document.head.appendChild(base);
+	}
+	let mod!: NavigationModule;
+	jest.isolateModules(() => {
+		// eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+		mod = require('../navigation');
+	});
+	return mod;
+}
 
 describe('navigation utilities', () => {
 	const originalWindowOpen = window.open;
 
-	beforeEach(() => {
-		window.open = jest.fn();
-	});
-
 	afterEach(() => {
 		window.open = originalWindowOpen;
+		document.head.querySelectorAll('base').forEach((el) => el.remove());
 	});
 
 	describe('isModifierKeyPressed', () => {
@@ -56,25 +68,59 @@ describe('navigation utilities', () => {
 	});
 
 	describe('openInNewTab', () => {
-		it('calls window.open with the given path and _blank target', () => {
-			openInNewTab('/dashboard');
-			expect(window.open).toHaveBeenCalledWith('/dashboard', '_blank');
+		describe('at basePath="/"', () => {
+			let m: NavigationModule;
+			beforeEach(() => {
+				window.open = jest.fn();
+				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('handles full URLs', () => {
-			openInNewTab('https://example.com/page');
-			expect(window.open).toHaveBeenCalledWith(
-				'https://example.com/page',
-				'_blank',
-			);
-		});
+		describe('at basePath="/signoz/"', () => {
+			let m: NavigationModule;
+			beforeEach(() => {
+				window.open = jest.fn();
+				m = loadNavigationModule('/signoz/');
+			});
 
-		it('handles paths with query strings', () => {
-			openInNewTab('/alerts?tab=AlertRules&relativeTime=30m');
-			expect(window.open).toHaveBeenCalledWith(
-				'/alerts?tab=AlertRules&relativeTime=30m',
-				'_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');
+			});
 		});
 	});
 });

frontend/src/utils/basePath.ts

@@ -0,0 +1,50 @@
+// 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))
+	);
+}

frontend/src/utils/navigation.ts

@@ -1,6 +1,5 @@
-/**
- * Opens the given path in a new browser tab.
- */
+import { withBasePath } from 'utils/basePath';
+
 export const openInNewTab = (path: string): void => {
-	window.open(path, '_blank');
+	window.open(withBasePath(path), '_blank');
 };

frontend/vite.config.ts

@@ -10,6 +10,18 @@ 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',
@@ -32,6 +44,7 @@ export default defineConfig(
 		const plugins = [
 			tsconfigPaths(),
 			rawMarkdownPlugin(),
+			devBasePathPlugin(),
 			react(),
 			createHtmlPlugin({
 				inject: {
@@ -124,6 +137,7 @@ 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',