chore: fixed tooltipplugin test

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

@@ -10,7 +10,15 @@ import { useBarChartStacking } from '../../hooks/useBarChartStacking';
 import { BarChartProps } from '../types';
 
 export default function BarChart(props: BarChartProps): JSX.Element {
-	const { children, isStackedBarChart, config, data, ...rest } = props;
+	const {
+		children,
+		isStackedBarChart,
+		renderTooltip: customRenderTooltip,
+		config,
+		data,
+		pinnedTooltipElement,
+		...rest
+	} = props;
 
 	const chartData = useBarChartStacking({
 		data,
@@ -20,16 +28,27 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
+			if (customRenderTooltip) {
+				return customRenderTooltip(props);
+			}
 			const tooltipProps: BarTooltipProps = {
 				...props,
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
 				isStackedBarChart: isStackedBarChart,
+				pinnedTooltipElement,
 			};
 			return <BarChartTooltip {...tooltipProps} />;
 		},
-		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision, isStackedBarChart],
+		[
+			customRenderTooltip,
+			rest.timezone,
+			rest.yAxisUnit,
+			rest.decimalPrecision,
+			isStackedBarChart,
+			pinnedTooltipElement,
+		],
 	);
 
 	return (

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

@@ -13,6 +13,7 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 		children,
 		renderTooltip: customRenderTooltip,
 		isQueriesMerged,
+		pinnedTooltipElement,
 		...rest
 	} = props;
 
@@ -26,10 +27,17 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
+				pinnedTooltipElement,
 			};
 			return <HistogramTooltip {...tooltipProps} />;
 		},
-		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+		[
+			customRenderTooltip,
+			pinnedTooltipElement,
+			rest.timezone,
+			rest.yAxisUnit,
+			rest.decimalPrecision,
+		],
 	);
 
 	return (

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

@@ -9,7 +9,12 @@ import {
 import { TimeSeriesChartProps } from '../types';
 
 export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
-	const { children, renderTooltip: customRenderTooltip, ...rest } = props;
+	const {
+		children,
+		renderTooltip: customRenderTooltip,
+		pinnedTooltipElement,
+		...rest
+	} = props;
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
@@ -21,10 +26,17 @@ export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
+				pinnedTooltipElement,
 			};
 			return <TimeSeriesTooltip {...tooltipProps} />;
 		},
-		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+		[
+			customRenderTooltip,
+			pinnedTooltipElement,
+			rest.timezone,
+			rest.yAxisUnit,
+			rest.decimalPrecision,
+		],
 	);
 
 	return (

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

@@ -1,17 +1,22 @@
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import {
+	DashboardCursorSync,
+	TooltipClickData,
+} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 
 interface BaseChartProps {
 	width: number;
 	height: number;
 	showTooltip?: boolean;
 	showLegend?: boolean;
-	timezone: string;
+	timezone?: Timezone;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
+	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
 	renderTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import {
 	Button,
@@ -6,7 +6,7 @@ import {
 	Input,
 	Menu,
 	Popover,
-	Tooltip,
+	Skeleton,
 	Typography,
 } from 'antd';
 import { ColumnsType } from 'antd/es/table';
@@ -15,7 +15,7 @@ import { useGetMetricAttributes } from 'api/generated/services/metrics';
 import { ResizeTable } from 'components/ResizeTable';
 import { DataType } from 'container/LogDetailedView/TableView';
 import { useNotifications } from 'hooks/useNotifications';
-import { Check, Copy, Info, Search, SquareArrowOutUpRight } from 'lucide-react';
+import { Compass, Copy, Search } from 'lucide-react';
 
 import { PANEL_TYPES } from '../../../constants/queryBuilder';
 import ROUTES from '../../../constants/routes';
@@ -30,8 +30,6 @@ import {
 import { getMetricDetailsQuery } from './utils';
 
 const ALL_ATTRIBUTES_KEY = 'all-attributes';
-const INITIAL_VISIBLE_COUNT = 5;
-const COPY_FEEDBACK_DURATION_MS = 1500;
 
 function AllAttributesEmptyText({
 	isErrorAttributes,
@@ -55,27 +53,16 @@ export function AllAttributesValue({
 	filterValue,
 	goToMetricsExploreWithAppliedAttribute,
 }: AllAttributesValueProps): JSX.Element {
+	const [visibleIndex, setVisibleIndex] = useState(5);
 	const [attributePopoverKey, setAttributePopoverKey] = useState<string | null>(
 		null,
 	);
-	const [allValuesOpen, setAllValuesOpen] = useState(false);
-	const [allValuesSearch, setAllValuesSearch] = useState('');
-	const [copiedValue, setCopiedValue] = useState<string | null>(null);
 	const [, copyToClipboard] = useCopyToClipboard();
 	const { notifications } = useNotifications();
-	const copyTimerRef = useRef<ReturnType<typeof setTimeout>>();
 
-	const handleCopyWithFeedback = useCallback(
-		(value: string): void => {
-			copyToClipboard(value);
-			setCopiedValue(value);
-			clearTimeout(copyTimerRef.current);
-			copyTimerRef.current = setTimeout(() => {
-				setCopiedValue(null);
-			}, COPY_FEEDBACK_DURATION_MS);
-		},
-		[copyToClipboard],
-	);
+	const handleShowMore = (): void => {
+		setVisibleIndex(visibleIndex + 5);
+	};
 
 	const handleMenuItemClick = useCallback(
 		(key: string, attribute: string): void => {
@@ -83,10 +70,10 @@ export function AllAttributesValue({
 				case 'open-in-explorer':
 					goToMetricsExploreWithAppliedAttribute(filterKey, attribute);
 					break;
-				case 'copy-value':
-					handleCopyWithFeedback(attribute);
+				case 'copy-attribute':
+					copyToClipboard(attribute);
 					notifications.success({
-						message: 'Value copied!',
+						message: 'Attribute copied!',
 					});
 					break;
 				default:
@@ -97,7 +84,7 @@ export function AllAttributesValue({
 		[
 			goToMetricsExploreWithAppliedAttribute,
 			filterKey,
-			handleCopyWithFeedback,
+			copyToClipboard,
 			notifications,
 		],
 	);
@@ -107,14 +94,14 @@ export function AllAttributesValue({
 			<Menu
 				items={[
 					{
-						icon: <SquareArrowOutUpRight size={14} />,
-						label: 'Open in Metric Explorer',
+						icon: <Compass size={16} />,
+						label: 'Open in Explorer',
 						key: 'open-in-explorer',
 					},
 					{
-						icon: <Copy size={14} />,
-						label: 'Copy Value',
-						key: 'copy-value',
+						icon: <Copy size={16} />,
+						label: 'Copy Attribute',
+						key: 'copy-attribute',
 					},
 				]}
 				onClick={(info): void => {
@@ -124,75 +111,9 @@ export function AllAttributesValue({
 		),
 		[handleMenuItemClick],
 	);
-
-	const filteredAllValues = useMemo(
-		() =>
-			allValuesSearch
-				? filterValue.filter((v) =>
-						v.toLowerCase().includes(allValuesSearch.toLowerCase()),
-				  )
-				: filterValue,
-		[filterValue, allValuesSearch],
-	);
-
-	const allValuesPopoverContent = (
-		<div className="all-values-popover">
-			<Input
-				placeholder="Search values"
-				size="small"
-				prefix={<Search size={12} />}
-				value={allValuesSearch}
-				onChange={(e): void => setAllValuesSearch(e.target.value)}
-				allowClear
-			/>
-			<div className="all-values-list">
-				{allValuesOpen &&
-					filteredAllValues.map((attribute) => {
-						const isCopied = copiedValue === attribute;
-						return (
-							<div key={attribute} className="all-values-item">
-								<Typography.Text ellipsis className="all-values-item-text">
-									{attribute}
-								</Typography.Text>
-								<div className="all-values-item-actions">
-									<Tooltip title={isCopied ? 'Copied!' : 'Copy value'}>
-										<Button
-											type="text"
-											size="small"
-											className={isCopied ? 'copy-success' : ''}
-											icon={isCopied ? <Check size={12} /> : <Copy size={12} />}
-											onClick={(): void => {
-												handleCopyWithFeedback(attribute);
-											}}
-										/>
-									</Tooltip>
-									<Tooltip title="Open in Metric Explorer">
-										<Button
-											type="text"
-											size="small"
-											icon={<SquareArrowOutUpRight size={12} />}
-											onClick={(): void => {
-												goToMetricsExploreWithAppliedAttribute(filterKey, attribute);
-												setAllValuesOpen(false);
-											}}
-										/>
-									</Tooltip>
-								</div>
-							</div>
-						);
-					})}
-				{allValuesOpen && filteredAllValues.length === 0 && (
-					<Typography.Text type="secondary" className="all-values-empty">
-						No values found
-					</Typography.Text>
-				)}
-			</div>
-		</div>
-	);
-
 	return (
 		<div className="all-attributes-value">
-			{filterValue.slice(0, INITIAL_VISIBLE_COUNT).map((attribute) => (
+			{filterValue.slice(0, visibleIndex).map((attribute) => (
 				<Popover
 					key={attribute}
 					content={attributePopoverContent(attribute)}
@@ -211,24 +132,10 @@ export function AllAttributesValue({
 					</Button>
 				</Popover>
 			))}
-			{filterValue.length > INITIAL_VISIBLE_COUNT && (
-				<Popover
-					content={allValuesPopoverContent}
-					trigger="click"
-					open={allValuesOpen}
-					onOpenChange={(open): void => {
-						setAllValuesOpen(open);
-						if (!open) {
-							setAllValuesSearch('');
-							setCopiedValue(null);
-						}
-					}}
-					overlayClassName="all-values-popover-overlay"
-				>
-					<Button type="text" className="all-values-button">
-						All values ({filterValue.length})
-					</Button>
-				</Popover>
+			{visibleIndex < filterValue.length && (
+				<Button type="text" onClick={handleShowMore}>
+					Show More
+				</Button>
 			)}
 		</div>
 	);
@@ -237,30 +144,18 @@ export function AllAttributesValue({
 function AllAttributes({
 	metricName,
 	metricType,
-	minTime,
-	maxTime,
 }: AllAttributesProps): JSX.Element {
 	const [searchString, setSearchString] = useState('');
 	const [activeKey, setActiveKey] = useState<string[]>([ALL_ATTRIBUTES_KEY]);
-	const [keyPopoverOpen, setKeyPopoverOpen] = useState<string | null>(null);
-	const [copiedKey, setCopiedKey] = useState<string | null>(null);
-	const [, copyToClipboard] = useCopyToClipboard();
-	const copyTimerRef = useRef<ReturnType<typeof setTimeout>>();
 
 	const {
 		data: attributesData,
 		isLoading: isLoadingAttributes,
 		isError: isErrorAttributes,
 		refetch: refetchAttributes,
-	} = useGetMetricAttributes(
-		{
-			metricName,
-		},
-		{
-			start: minTime ? Math.floor(minTime / 1000000) : undefined,
-			end: maxTime ? Math.floor(maxTime / 1000000) : undefined,
-		},
-	);
+	} = useGetMetricAttributes({
+		metricName,
+	});
 
 	const attributes = useMemo(() => attributesData?.data.attributes ?? [], [
 		attributesData,
@@ -269,14 +164,12 @@ function AllAttributes({
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
 	const goToMetricsExplorerwithAppliedSpaceAggregation = useCallback(
-		(groupBy: string, valueCount?: number) => {
-			const limit = valueCount && valueCount > 250 ? 100 : undefined;
+		(groupBy: string) => {
 			const compositeQuery = getMetricDetailsQuery(
 				metricName,
 				metricType,
 				undefined,
 				groupBy,
-				limit,
 			);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
@@ -323,28 +216,6 @@ function AllAttributes({
 		[metricName, metricType, handleExplorerTabChange],
 	);
 
-	const handleKeyMenuItemClick = useCallback(
-		(menuKey: string, attributeKey: string, valueCount?: number): void => {
-			switch (menuKey) {
-				case 'open-in-explorer':
-					goToMetricsExplorerwithAppliedSpaceAggregation(attributeKey, valueCount);
-					break;
-				case 'copy-key':
-					copyToClipboard(attributeKey);
-					setCopiedKey(attributeKey);
-					clearTimeout(copyTimerRef.current);
-					copyTimerRef.current = setTimeout(() => {
-						setCopiedKey(null);
-					}, COPY_FEEDBACK_DURATION_MS);
-					break;
-				default:
-					break;
-			}
-			setKeyPopoverOpen(null);
-		},
-		[goToMetricsExplorerwithAppliedSpaceAggregation, copyToClipboard],
-	);
-
 	const filteredAttributes = useMemo(
 		() =>
 			attributes.filter(
@@ -383,57 +254,21 @@ function AllAttributes({
 				width: 50,
 				align: 'left',
 				className: 'metric-metadata-key',
-				render: (field: { label: string; contribution: number }): JSX.Element => {
-					const isCopied = copiedKey === field.label;
-					return (
-						<div className="all-attributes-key">
-							<Popover
-								content={
-									<Menu
-										items={[
-											{
-												icon: <SquareArrowOutUpRight size={14} />,
-												label: 'Open in Metric Explorer',
-												key: 'open-in-explorer',
-											},
-											{
-												icon: <Copy size={14} />,
-												label: 'Copy Key',
-												key: 'copy-key',
-											},
-										]}
-										onClick={(info): void => {
-											handleKeyMenuItemClick(info.key, field.label, field.contribution);
-										}}
-									/>
-								}
-								trigger="click"
-								placement="right"
-								overlayClassName="attribute-key-popover-overlay"
-								open={keyPopoverOpen === field.label}
-								onOpenChange={(open): void => {
-									if (!open) {
-										setKeyPopoverOpen(null);
-									} else {
-										setKeyPopoverOpen(field.label);
-									}
-								}}
-							>
-								<Button type="text">
-									<Typography.Text>{field.label}</Typography.Text>
-								</Button>
-							</Popover>
-							{isCopied && (
-								<span className="copy-feedback">
-									<Check size={12} />
-								</span>
-							)}
-							<Typography.Text className="all-attributes-contribution">
-								{field.contribution}
-							</Typography.Text>
-						</div>
-					);
-				},
+				render: (field: { label: string; contribution: number }): JSX.Element => (
+					<div className="all-attributes-key">
+						<Button
+							type="text"
+							onClick={(): void =>
+								goToMetricsExplorerwithAppliedSpaceAggregation(field.label)
+							}
+						>
+							<Typography.Text>{field.label}</Typography.Text>
+						</Button>
+						<Typography.Text className="all-attributes-contribution">
+							{field.contribution}
+						</Typography.Text>
+					</div>
+				),
 			},
 			{
 				title: 'Value',
@@ -456,9 +291,7 @@ function AllAttributes({
 		],
 		[
 			goToMetricsExploreWithAppliedAttribute,
-			handleKeyMenuItemClick,
-			keyPopoverOpen,
-			copiedKey,
+			goToMetricsExplorerwithAppliedSpaceAggregation,
 		],
 	);
 
@@ -467,12 +300,7 @@ function AllAttributes({
 			{
 				label: (
 					<div className="metrics-accordion-header">
-						<div className="all-attributes-header-title">
-							<Typography.Text>All Attributes</Typography.Text>
-							<Tooltip title="Showing attributes for the selected time range">
-								<Info size={14} />
-							</Tooltip>
-						</div>
+						<Typography.Text>All Attributes</Typography.Text>
 						<Input
 							className="all-attributes-search-input"
 							placeholder="Search"
@@ -501,9 +329,7 @@ function AllAttributes({
 						className="metrics-accordion-content all-attributes-content"
 						scroll={{ y: 600 }}
 						locale={{
-							emptyText: isLoadingAttributes ? (
-								' '
-							) : (
+							emptyText: (
 								<AllAttributesEmptyText
 									isErrorAttributes={isErrorAttributes}
 									refetchAttributes={refetchAttributes}
@@ -524,6 +350,14 @@ function AllAttributes({
 		],
 	);
 
+	if (isLoadingAttributes) {
+		return (
+			<div className="all-attributes-skeleton-container">
+				<Skeleton active paragraph={{ rows: 8 }} />
+			</div>
+		);
+	}
+
 	return (
 		<Collapse
 			bordered

frontend/src/container/MetricsExplorer/MetricDetails/Highlights.tsx

@@ -1,5 +1,5 @@
 import { Color } from '@signozhq/design-tokens';
-import { Button, Spin, Tooltip, Typography } from 'antd';
+import { Button, Skeleton, Tooltip, Typography } from 'antd';
 import { useGetMetricHighlights } from 'api/generated/services/metrics';
 import { InfoIcon } from 'lucide-react';
 
@@ -39,6 +39,17 @@ function Highlights({ metricName }: HighlightsProps): JSX.Element {
 		metricHighlights?.lastReceived,
 	);
 
+	if (isLoadingMetricHighlights) {
+		return (
+			<div
+				className="metric-details-content-grid"
+				data-testid="metric-highlights-loading-state"
+			>
+				<Skeleton title={false} paragraph={{ rows: 2 }} active />
+			</div>
+		);
+	}
+
 	if (isErrorMetricHighlights) {
 		return (
 			<div className="metric-details-content-grid">
@@ -78,41 +89,32 @@ function Highlights({ metricName }: HighlightsProps): JSX.Element {
 				</Typography.Text>
 			</div>
 			<div className="values-row">
-				{isLoadingMetricHighlights ? (
-					<div className="metric-highlights-loading-inline">
-						<Spin size="small" />
-						<Typography.Text type="secondary">Loading metric stats</Typography.Text>
-					</div>
-				) : (
-					<>
-						<Typography.Text
-							className="metric-details-grid-value"
-							data-testid="metric-highlights-data-points"
-						>
-							<Tooltip title={metricHighlights?.dataPoints?.toLocaleString()}>
-								{formatNumberIntoHumanReadableFormat(metricHighlights?.dataPoints ?? 0)}
-							</Tooltip>
-						</Typography.Text>
-						<Typography.Text
-							className="metric-details-grid-value"
-							data-testid="metric-highlights-time-series-total"
-						>
-							<Tooltip
-								title="Active time series are those that have received data points in the last 1
-							hour."
-								placement="top"
-							>
-								<span>{`${timeSeriesTotal} total ⎯ ${timeSeriesActive} active`}</span>
-							</Tooltip>
-						</Typography.Text>
-						<Typography.Text
-							className="metric-details-grid-value"
-							data-testid="metric-highlights-last-received"
-						>
-							<Tooltip title={lastReceivedText}>{lastReceivedText}</Tooltip>
-						</Typography.Text>
-					</>
-				)}
+				<Typography.Text
+					className="metric-details-grid-value"
+					data-testid="metric-highlights-data-points"
+				>
+					<Tooltip title={metricHighlights?.dataPoints?.toLocaleString()}>
+						{formatNumberIntoHumanReadableFormat(metricHighlights?.dataPoints ?? 0)}
+					</Tooltip>
+				</Typography.Text>
+				<Typography.Text
+					className="metric-details-grid-value"
+					data-testid="metric-highlights-time-series-total"
+				>
+					<Tooltip
+						title="Active time series are those that have received data points in the last 1
+					hour."
+						placement="top"
+					>
+						<span>{`${timeSeriesTotal} total ⎯ ${timeSeriesActive} active`}</span>
+					</Tooltip>
+				</Typography.Text>
+				<Typography.Text
+					className="metric-details-grid-value"
+					data-testid="metric-highlights-last-received"
+				>
+					<Tooltip title={lastReceivedText}>{lastReceivedText}</Tooltip>
+				</Typography.Text>
 			</div>
 		</div>
 	);

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { Button, Collapse, Input, Select, Spin, Typography } from 'antd';
+import { Button, Collapse, Input, Select, Skeleton, Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import logEvent from 'api/common/logEvent';
 import {
@@ -355,15 +355,11 @@ function Metadata({
 				label: (
 					<div className="metrics-accordion-header metrics-metadata-header">
 						<Typography.Text>Metadata</Typography.Text>
-						{!isLoadingMetricMetadata && actionButton}
+						{actionButton}
 					</div>
 				),
 				key: 'metric-metadata',
-				children: isLoadingMetricMetadata ? (
-					<div className="metrics-accordion-loading-state">
-						<Spin size="small" />
-					</div>
-				) : isErrorMetricMetadata ? (
+				children: isErrorMetricMetadata ? (
 					<div className="metric-metadata-error-state">
 						<MetricDetailsErrorState
 							refetch={refetchMetricMetadata}
@@ -385,13 +381,20 @@ function Metadata({
 		[
 			actionButton,
 			columns,
-			isLoadingMetricMetadata,
 			isErrorMetricMetadata,
 			refetchMetricMetadata,
 			tableData,
 		],
 	);
 
+	if (isLoadingMetricMetadata) {
+		return (
+			<div className="metrics-metadata-skeleton-container">
+				<Skeleton active paragraph={{ rows: 8 }} />
+			</div>
+		);
+	}
+
 	return (
 		<Collapse
 			bordered

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss

@@ -52,13 +52,6 @@
 				align-items: center;
 			}
 
-			.metric-highlights-loading-inline {
-				grid-column: 1 / -1;
-				display: flex;
-				align-items: center;
-				gap: 8px;
-			}
-
 			.metric-highlights-error-state {
 				display: flex;
 				gap: 8px;
@@ -127,11 +120,12 @@
 			}
 		}
 
-		.metrics-accordion-loading-state {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			padding: 24px;
+		.metrics-metadata-skeleton-container {
+			height: 330px;
+		}
+
+		.all-attributes-skeleton-container {
+			height: 600px;
 		}
 
 		.metrics-accordion {
@@ -159,18 +153,6 @@
 				justify-content: space-between;
 				align-items: center;
 				height: 36px;
-
-				.all-attributes-header-title {
-					display: flex;
-					align-items: center;
-					gap: 6px;
-
-					.lucide-info {
-						cursor: pointer;
-						color: var(--bg-vanilla-400);
-					}
-				}
-
 				.ant-typography {
 					font-family: 'Geist Mono';
 					color: var(--bg-robin-400);
@@ -204,7 +186,6 @@
 					.all-attributes-key {
 						display: flex;
 						justify-content: space-between;
-						align-items: center;
 						.ant-btn {
 							.ant-typography:first-child {
 								font-family: 'Geist Mono';
@@ -212,15 +193,17 @@
 								background-color: transparent;
 							}
 						}
-						.copy-feedback {
-							display: inline-flex;
-							align-items: center;
-							color: var(--bg-forest-500);
-							animation: fade-in-out 1.5s ease-in-out;
-						}
 						.all-attributes-contribution {
 							font-family: 'Geist Mono';
 							color: var(--bg-vanilla-400);
+							background-color: rgba(171, 189, 255, 0.1);
+							height: 24px;
+							min-width: 24px;
+							border-radius: 50%;
+							text-align: center;
+							display: flex;
+							align-items: center;
+							justify-content: center;
 						}
 					}
 				}
@@ -276,8 +259,10 @@
 			}
 
 			.metric-metadata-key {
+				cursor: pointer;
 				padding-left: 10px;
 				vertical-align: middle;
+				text-align: center;
 				.field-renderer-container {
 					.label {
 						color: var(--bg-vanilla-400);
@@ -463,138 +448,3 @@
 	height: 100%;
 	width: 100%;
 }
-
-.attribute-key-popover-overlay {
-	.ant-popover-inner {
-		padding: 0 !important;
-		border-radius: 4px;
-		border: 1px solid var(--bg-slate-400);
-		background: linear-gradient(
-			139deg,
-			rgba(18, 19, 23, 0.8) 0%,
-			rgba(18, 19, 23, 0.9) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-	}
-
-	.ant-menu {
-		font-size: 12px;
-		background: transparent;
-
-		.ant-menu-item {
-			height: 32px;
-			line-height: 32px;
-			padding: 0 12px;
-			font-size: 12px;
-		}
-	}
-}
-
-.all-values-popover-overlay {
-	.ant-popover-inner {
-		padding: 0 !important;
-		border-radius: 4px;
-		border: 1px solid var(--bg-slate-400);
-		background: linear-gradient(
-			139deg,
-			rgba(18, 19, 23, 0.8) 0%,
-			rgba(18, 19, 23, 0.9) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-	}
-}
-
-.all-values-popover {
-	width: 320px;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: 12px;
-
-	.all-values-list {
-		max-height: 300px;
-		overflow-y: auto;
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-
-		&::-webkit-scrollbar {
-			width: 2px;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--bg-slate-300);
-			border-radius: 1px;
-		}
-	}
-
-	.all-values-item {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 4px 8px;
-		border-radius: 4px;
-		gap: 8px;
-
-		&:hover {
-			background: rgba(255, 255, 255, 0.04);
-		}
-
-		.all-values-item-text {
-			flex: 1;
-			min-width: 0;
-			font-family: 'Geist Mono';
-			font-size: 12px;
-		}
-
-		.all-values-item-actions {
-			display: flex;
-			gap: 2px;
-			flex-shrink: 0;
-
-			.copy-success {
-				color: var(--bg-forest-500);
-			}
-		}
-	}
-
-	.all-values-empty {
-		padding: 8px;
-		text-align: center;
-	}
-}
-
-.all-values-button {
-	color: var(--bg-robin-400) !important;
-}
-
-.lightMode {
-	.attribute-key-popover-overlay,
-	.all-values-popover-overlay {
-		.ant-popover-inner {
-			border: 1px solid var(--bg-vanilla-400);
-			background: var(--bg-vanilla-100) !important;
-		}
-	}
-}
-
-@keyframes fade-in-out {
-	0% {
-		opacity: 0;
-	}
-	15% {
-		opacity: 1;
-	}
-	85% {
-		opacity: 1;
-	}
-	100% {
-		opacity: 0;
-	}
-}

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx

@@ -1,14 +1,10 @@
 import { useCallback, useEffect, useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetMetricMetadata } from 'api/generated/services/metrics';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Compass, Crosshair, X } from 'lucide-react';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { PANEL_TYPES } from '../../../constants/queryBuilder';
 import ROUTES from '../../../constants/routes';
@@ -33,9 +29,6 @@ function MetricDetails({
 }: MetricDetailsProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
 
 	const {
 		data: metricMetadataResponse,
@@ -107,21 +100,6 @@ function MetricDetails({
 	const isActionButtonDisabled =
 		!metricName || isLoadingMetricMetadata || isErrorMetricMetadata;
 
-	const handleDrawerClose = useCallback(
-		(e: React.MouseEvent | React.KeyboardEvent): void => {
-			if ('key' in e && e.key === 'Escape') {
-				const openPopover = document.querySelector(
-					'.ant-popover:not(.ant-popover-hidden)',
-				);
-				if (openPopover) {
-					return;
-				}
-			}
-			onClose();
-		},
-		[onClose],
-	);
-
 	return (
 		<Drawer
 			width="60%"
@@ -159,7 +137,7 @@ function MetricDetails({
 				</div>
 			}
 			placement="right"
-			onClose={handleDrawerClose}
+			onClose={onClose}
 			open={isOpen}
 			style={{
 				overscrollBehavior: 'contain',
@@ -179,12 +157,7 @@ function MetricDetails({
 					isLoadingMetricMetadata={isLoadingMetricMetadata}
 					refetchMetricMetadata={refetchMetricMetadata}
 				/>
-				<AllAttributes
-					metricName={metricName}
-					metricType={metadata?.type}
-					minTime={minTime}
-					maxTime={maxTime}
-				/>
+				<AllAttributes metricName={metricName} metricType={metadata?.type} />
 			</div>
 		</Drawer>
 	);

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/AllAttributes.test.tsx

@@ -1,6 +1,8 @@
+import * as reactUseHooks from 'react-use';
 import { render, screen } from '@testing-library/react';
 import * as metricsExplorerHooks from 'api/generated/services/metrics';
 import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
+import * as useHandleExplorerTabChange from 'hooks/useHandleExplorerTabChange';
 import { userEvent } from 'tests/test-utils';
 
 import ROUTES from '../../../../constants/routes';
@@ -13,6 +15,17 @@ jest.mock('react-router-dom', () => ({
 		pathname: `${ROUTES.METRICS_EXPLORER}`,
 	}),
 }));
+const mockHandleExplorerTabChange = jest.fn();
+jest
+	.spyOn(useHandleExplorerTabChange, 'useHandleExplorerTabChange')
+	.mockReturnValue({
+		handleExplorerTabChange: mockHandleExplorerTabChange,
+	});
+
+const mockUseCopyToClipboard = jest.fn();
+jest
+	.spyOn(reactUseHooks, 'useCopyToClipboard')
+	.mockReturnValue([{ value: 'value1' }, mockUseCopyToClipboard] as any);
 
 const useGetMetricAttributesMock = jest.spyOn(
 	metricsExplorerHooks,
@@ -21,13 +34,12 @@ const useGetMetricAttributesMock = jest.spyOn(
 
 describe('AllAttributes', () => {
 	beforeEach(() => {
-		jest.clearAllMocks();
 		useGetMetricAttributesMock.mockReturnValue({
 			...getMockMetricAttributesData(),
 		});
 	});
 
-	it('renders attribute keys, values, and value counts from API data', () => {
+	it('renders attributes section with title', () => {
 		render(
 			<AllAttributes
 				metricName={MOCK_METRIC_NAME}
@@ -35,13 +47,39 @@ describe('AllAttributes', () => {
 			/>,
 		);
 
+		expect(screen.getByText('All Attributes')).toBeInTheDocument();
+	});
+
+	it('renders all attribute keys and values', () => {
+		render(
+			<AllAttributes
+				metricName={MOCK_METRIC_NAME}
+				metricType={MetrictypesTypeDTO.gauge}
+			/>,
+		);
+
+		// Check attribute keys are rendered
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 		expect(screen.getByText('attribute2')).toBeInTheDocument();
+
+		// Check attribute values are rendered
 		expect(screen.getByText('value1')).toBeInTheDocument();
 		expect(screen.getByText('value2')).toBeInTheDocument();
 		expect(screen.getByText('value3')).toBeInTheDocument();
 	});
 
+	it('renders value counts correctly', () => {
+		render(
+			<AllAttributes
+				metricName={MOCK_METRIC_NAME}
+				metricType={MetrictypesTypeDTO.gauge}
+			/>,
+		);
+
+		expect(screen.getByText('2')).toBeInTheDocument(); // For attribute1
+		expect(screen.getByText('1')).toBeInTheDocument(); // For attribute2
+	});
+
 	it('handles empty attributes array', () => {
 		useGetMetricAttributesMock.mockReturnValue({
 			...getMockMetricAttributesData({
@@ -62,7 +100,7 @@ describe('AllAttributes', () => {
 		expect(screen.getByText('No attributes found')).toBeInTheDocument();
 	});
 
-	it('clicking on an attribute key shows popover with Open in Metric Explorer option', async () => {
+	it('clicking on an attribute key opens the explorer with the attribute filter applied', async () => {
 		render(
 			<AllAttributes
 				metricName={MOCK_METRIC_NAME}
@@ -70,8 +108,7 @@ describe('AllAttributes', () => {
 			/>,
 		);
 		await userEvent.click(screen.getByText('attribute1'));
-		expect(screen.getByText('Open in Metric Explorer')).toBeInTheDocument();
-		expect(screen.getByText('Copy Key')).toBeInTheDocument();
+		expect(mockHandleExplorerTabChange).toHaveBeenCalled();
 	});
 
 	it('filters attributes based on search input', async () => {
@@ -86,66 +123,26 @@ describe('AllAttributes', () => {
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 		expect(screen.getByText('value1')).toBeInTheDocument();
 	});
-
-	it('shows error state when attribute fetching fails', () => {
-		useGetMetricAttributesMock.mockReturnValue({
-			...getMockMetricAttributesData(
-				{
-					data: {
-						attributes: [],
-						totalKeys: 0,
-					},
-				},
-				{
-					isError: true,
-				},
-			),
-		});
-		render(
-			<AllAttributes
-				metricName={MOCK_METRIC_NAME}
-				metricType={MetrictypesTypeDTO.gauge}
-			/>,
-		);
-
-		expect(
-			screen.getByText('Something went wrong while fetching attributes'),
-		).toBeInTheDocument();
-	});
-
-	it('does not show misleading empty text while loading', () => {
-		useGetMetricAttributesMock.mockReturnValue({
-			...getMockMetricAttributesData(
-				{
-					data: {
-						attributes: [],
-						totalKeys: 0,
-					},
-				},
-				{
-					isLoading: true,
-				},
-			),
-		});
-		render(
-			<AllAttributes
-				metricName={MOCK_METRIC_NAME}
-				metricType={MetrictypesTypeDTO.gauge}
-			/>,
-		);
-
-		expect(screen.queryByText('No attributes found')).not.toBeInTheDocument();
-	});
 });
 
 describe('AllAttributesValue', () => {
 	const mockGoToMetricsExploreWithAppliedAttribute = jest.fn();
 
-	beforeEach(() => {
-		jest.clearAllMocks();
+	it('renders all attribute values', () => {
+		render(
+			<AllAttributesValue
+				filterKey="attribute1"
+				filterValue={['value1', 'value2']}
+				goToMetricsExploreWithAppliedAttribute={
+					mockGoToMetricsExploreWithAppliedAttribute
+				}
+			/>,
+		);
+		expect(screen.getByText('value1')).toBeInTheDocument();
+		expect(screen.getByText('value2')).toBeInTheDocument();
 	});
 
-	it('shows All values button when there are more than 5 values', () => {
+	it('loads more attributes when show more button is clicked', async () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -156,59 +153,58 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.queryByText('value6')).not.toBeInTheDocument();
-		expect(screen.getByText('All values (6)')).toBeInTheDocument();
-	});
-
-	it('All values popover shows values beyond the initial 5', async () => {
-		const values = [
-			'value1',
-			'value2',
-			'value3',
-			'value4',
-			'value5',
-			'value6',
-			'value7',
-		];
-		render(
-			<AllAttributesValue
-				filterKey="attribute1"
-				filterValue={values}
-				goToMetricsExploreWithAppliedAttribute={
-					mockGoToMetricsExploreWithAppliedAttribute
-				}
-			/>,
-		);
-
-		await userEvent.click(screen.getByText('All values (7)'));
-
+		await userEvent.click(screen.getByText('Show More'));
 		expect(screen.getByText('value6')).toBeInTheDocument();
-		expect(screen.getByText('value7')).toBeInTheDocument();
 	});
 
-	it('All values popover search filters the value list', async () => {
-		const values = [
-			'alpha',
-			'bravo',
-			'charlie',
-			'delta',
-			'echo',
-			'fig-special',
-			'golf-target',
-		];
+	it('does not render show more button when there are no more attributes to show', () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
-				filterValue={values}
+				filterValue={['value1', 'value2']}
 				goToMetricsExploreWithAppliedAttribute={
 					mockGoToMetricsExploreWithAppliedAttribute
 				}
 			/>,
 		);
+		expect(screen.queryByText('Show More')).not.toBeInTheDocument();
+	});
 
-		await userEvent.click(screen.getByText('All values (7)'));
-		await userEvent.type(screen.getByPlaceholderText('Search values'), 'golf');
+	it('copy button should copy the attribute value to the clipboard', async () => {
+		render(
+			<AllAttributesValue
+				filterKey="attribute1"
+				filterValue={['value1', 'value2']}
+				goToMetricsExploreWithAppliedAttribute={
+					mockGoToMetricsExploreWithAppliedAttribute
+				}
+			/>,
+		);
+		expect(screen.getByText('value1')).toBeInTheDocument();
+		await userEvent.click(screen.getByText('value1'));
+		expect(screen.getByText('Copy Attribute')).toBeInTheDocument();
+		await userEvent.click(screen.getByText('Copy Attribute'));
+		expect(mockUseCopyToClipboard).toHaveBeenCalledWith('value1');
+	});
 
-		expect(screen.getByText('golf-target')).toBeInTheDocument();
-		expect(screen.queryByText('fig-special')).not.toBeInTheDocument();
+	it('explorer button should go to metrics explore with the attribute filter applied', async () => {
+		render(
+			<AllAttributesValue
+				filterKey="attribute1"
+				filterValue={['value1', 'value2']}
+				goToMetricsExploreWithAppliedAttribute={
+					mockGoToMetricsExploreWithAppliedAttribute
+				}
+			/>,
+		);
+		expect(screen.getByText('value1')).toBeInTheDocument();
+		await userEvent.click(screen.getByText('value1'));
+
+		expect(screen.getByText('Open in Explorer')).toBeInTheDocument();
+		await userEvent.click(screen.getByText('Open in Explorer'));
+		expect(mockGoToMetricsExploreWithAppliedAttribute).toHaveBeenCalledWith(
+			'attribute1',
+			'value1',
+		);
 	});
 });

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/Highlights.test.tsx

@@ -48,7 +48,7 @@ describe('Highlights', () => {
 		).toBeInTheDocument();
 	});
 
-	it('should show labels and loading text but not stale data values while loading', () => {
+	it('should render loading state when data is loading', () => {
 		useGetMetricHighlightsMock.mockReturnValue(
 			getMockMetricHighlightsData(
 				{},
@@ -60,19 +60,8 @@ describe('Highlights', () => {
 
 		render(<Highlights metricName={MOCK_METRIC_NAME} />);
 
-		expect(screen.getByText('SAMPLES')).toBeInTheDocument();
-		expect(screen.getByText('TIME SERIES')).toBeInTheDocument();
-		expect(screen.getByText('LAST RECEIVED')).toBeInTheDocument();
-		expect(screen.getByText('Loading metric stats')).toBeInTheDocument();
-
 		expect(
-			screen.queryByTestId('metric-highlights-data-points'),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByTestId('metric-highlights-time-series-total'),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByTestId('metric-highlights-last-received'),
-		).not.toBeInTheDocument();
+			screen.getByTestId('metric-highlights-loading-state'),
+		).toBeInTheDocument();
 	});
 });

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/Metadata.test.tsx

@@ -324,21 +324,6 @@ describe('Metadata', () => {
 		expect(editButton2).toBeInTheDocument();
 	});
 
-	it('should show section header but not edit controls while loading', () => {
-		render(
-			<Metadata
-				metricName={MOCK_METRIC_NAME}
-				metadata={null}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata
-				refetchMetricMetadata={mockRefetchMetricMetadata}
-			/>,
-		);
-
-		expect(screen.getByText('Metadata')).toBeInTheDocument();
-		expect(screen.queryByText('Edit')).not.toBeInTheDocument();
-	});
-
 	it('should not allow editing of unit if it is already set', async () => {
 		render(
 			<Metadata

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/MetricDetails.test.tsx

@@ -24,13 +24,6 @@ jest.mock('react-router-dom', () => ({
 		pathname: `${ROUTES.METRICS_EXPLORER}`,
 	}),
 }));
-jest.mock('react-redux', () => ({
-	...jest.requireActual('react-redux'),
-	useSelector: jest.fn().mockReturnValue({
-		maxTime: 1700000000000000000,
-		minTime: 1699900000000000000,
-	}),
-}));
 jest.mock('hooks/useSafeNavigate', () => ({
 	useSafeNavigate: (): any => ({
 		safeNavigate: jest.fn(),

frontend/src/container/MetricsExplorer/MetricDetails/types.ts

@@ -34,8 +34,6 @@ export interface MetadataProps {
 export interface AllAttributesProps {
 	metricName: string;
 	metricType: MetrictypesTypeDTO | undefined;
-	minTime?: number;
-	maxTime?: number;
 }
 
 export interface AllAttributesValueProps {

frontend/src/container/MetricsExplorer/MetricDetails/utils.tsx

@@ -87,7 +87,6 @@ export function getMetricDetailsQuery(
 	metricType: MetrictypesTypeDTO | undefined,
 	filter?: { key: string; value: string },
 	groupBy?: string,
-	limit?: number,
 ): Query {
 	let timeAggregation;
 	let spaceAggregation;
@@ -171,7 +170,6 @@ export function getMetricDetailsQuery(
 								},
 						  ]
 						: [],
-					...(limit ? { limit } : {}),
 				},
 			],
 			queryFormulas: [],

frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx

@@ -1,7 +1,9 @@
 import { useCallback } from 'react';
+import { Tooltip } from 'antd';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import { Info } from 'lucide-react';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { MetricsSearchProps } from './types';
@@ -24,17 +26,15 @@ function MetricsSearch({
 		onChange(currentQueryFilterExpression);
 	}, [currentQueryFilterExpression, onChange]);
 
-	const handleRunQuery = useCallback(
-		(expression: string): void => {
-			setCurrentQueryFilterExpression(expression);
-			onChange(expression);
-		},
-		[setCurrentQueryFilterExpression, onChange],
-	);
-
 	return (
 		<div className="metrics-search-container">
 			<div data-testid="qb-search-container" className="qb-search-container">
+				<Tooltip
+					title="Use filters to refine metrics based on attributes. Example: service_name=api - Shows all metrics associated with the API service"
+					placement="right"
+				>
+					<Info size={16} />
+				</Tooltip>
 				<QuerySearch
 					onChange={handleOnChange}
 					dataSource={DataSource.METRICS}
@@ -45,9 +45,8 @@ function MetricsSearch({
 							expression: currentQueryFilterExpression,
 						},
 					}}
-					onRun={handleRunQuery}
+					onRun={handleOnChange}
 					showFilterSuggestionsWithoutMetric
-					placeholder="Try metric_name CONTAINS 'http.server' to view all HTTP Server metrics being sent"
 				/>
 			</div>
 			<RunQueryBtn

frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss

@@ -37,7 +37,7 @@
 
 	.metrics-search-container {
 		display: flex;
-		gap: 8px;
+		gap: 16px;
 		align-items: center;
 
 		.metrics-search-options {
@@ -51,6 +51,10 @@
 			gap: 8px;
 			flex: 1;
 
+			.lucide-info {
+				cursor: pointer;
+			}
+
 			.query-builder-search-container {
 				width: 100%;
 			}
@@ -62,6 +66,8 @@
 			margin-left: -16px;
 			margin-right: -16px;
 
+			max-height: 500px;
+			overflow-y: auto;
 			.ant-table-thead > tr > th {
 				padding: 12px;
 				font-weight: 500;

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -15,7 +15,10 @@ import {
 	Querybuildertypesv5OrderByDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
+import {
+	convertExpressionToFilters,
+	convertFiltersToExpression,
+} from 'components/QueryBuilderV2/utils';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
 import NoLogs from 'container/NoLogs/NoLogs';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -58,7 +61,7 @@ function Summary(): JSX.Element {
 		heatmapView,
 		setHeatmapView,
 	] = useState<MetricsexplorertypesTreemapModeDTO>(
-		MetricsexplorertypesTreemapModeDTO.samples,
+		MetricsexplorertypesTreemapModeDTO.timeseries,
 	);
 
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
@@ -84,14 +87,7 @@ function Summary(): JSX.Element {
 	const [
 		currentQueryFilterExpression,
 		setCurrentQueryFilterExpression,
-	] = useState<string>('');
-
-	const [appliedFilterExpression, setAppliedFilterExpression] = useState('');
-
-	const queryFilterExpression = useMemo(
-		() => ({ expression: appliedFilterExpression }),
-		[appliedFilterExpression],
-	);
+	] = useState<string>(query?.filter?.expression || '');
 
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.TabChanged, {
@@ -104,6 +100,11 @@ function Summary(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
+	const queryFilterExpression = useMemo(() => {
+		const filters = query.filters || { items: [], op: 'AND' };
+		return convertFiltersToExpression(filters);
+	}, [query.filters]);
+
 	const metricsListQuery: MetricsexplorertypesStatsRequestDTO = useMemo(() => {
 		return {
 			start: convertNanoToMilliseconds(minTime),
@@ -186,7 +187,6 @@ function Summary(): JSX.Element {
 				},
 			});
 			setCurrentQueryFilterExpression(expression);
-			setAppliedFilterExpression(expression);
 			setCurrentPage(1);
 			if (expression) {
 				logEvent(MetricsExplorerEvents.FilterApplied, {

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

@@ -4,6 +4,7 @@ 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';
 
@@ -17,11 +18,22 @@ export default function Tooltip({
 	uPlotInstance,
 	timezone,
 	content,
+	isPinned,
 	showTooltipHeader = true,
+	pinnedTooltipElement,
+	clickData,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [listHeight, setListHeight] = useState(0);
 	const tooltipContent = content ?? [];
+	const { timezone: userTimezone } = useTimezone();
+
+	const resolvedTimezone = useMemo(() => {
+		if (!timezone) {
+			return userTimezone.value;
+		}
+		return timezone.value;
+	}, [timezone, userTimezone]);
 
 	const headerTitle = useMemo(() => {
 		if (!showTooltipHeader) {
@@ -33,10 +45,10 @@ export default function Tooltip({
 			return null;
 		}
 		return dayjs(data[0][cursorIdx] * 1000)
-			.tz(timezone)
+			.tz(resolvedTimezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [
-		timezone,
+		resolvedTimezone,
 		uPlotInstance.data,
 		uPlotInstance.cursor.idx,
 		showTooltipHeader,
@@ -63,39 +75,45 @@ export default function Tooltip({
 			)}
 			data-testid="uplot-tooltip-container"
 		>
-			{showTooltipHeader && (
-				<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
-					<span>{headerTitle}</span>
-				</div>
+			{isPinned && clickData ? (
+				pinnedTooltipElement?.(clickData)
+			) : (
+				<>
+					{showTooltipHeader && (
+						<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
+							<span>{headerTitle}</span>
+						</div>
+					)}
+					<div className="uplot-tooltip-list-container">
+						{tooltipContent.length > 0 ? (
+							<Virtuoso
+								className="uplot-tooltip-list"
+								data-testid="uplot-tooltip-list"
+								data={tooltipContent}
+								style={virtuosoStyle}
+								totalListHeightChanged={setListHeight}
+								itemContent={(_, item): JSX.Element => (
+									<div className="uplot-tooltip-item" data-testid="uplot-tooltip-item">
+										<div
+											className="uplot-tooltip-item-marker"
+											style={{ borderColor: item.color }}
+											data-is-legend-marker={true}
+											data-testid="uplot-tooltip-item-marker"
+										/>
+										<div
+											className="uplot-tooltip-item-content"
+											style={{ color: item.color, fontWeight: item.isActive ? 700 : 400 }}
+											data-testid="uplot-tooltip-item-content"
+										>
+											{item.label}: {item.tooltipValue}
+										</div>
+									</div>
+								)}
+							/>
+						) : null}
+					</div>
+				</>
 			)}
-			<div className="uplot-tooltip-list-container">
-				{tooltipContent.length > 0 ? (
-					<Virtuoso
-						className="uplot-tooltip-list"
-						data-testid="uplot-tooltip-list"
-						data={tooltipContent}
-						style={virtuosoStyle}
-						totalListHeightChanged={setListHeight}
-						itemContent={(_, item): JSX.Element => (
-							<div className="uplot-tooltip-item" data-testid="uplot-tooltip-item">
-								<div
-									className="uplot-tooltip-item-marker"
-									style={{ borderColor: item.color }}
-									data-is-legend-marker={true}
-									data-testid="uplot-tooltip-item-marker"
-								/>
-								<div
-									className="uplot-tooltip-item-content"
-									style={{ color: item.color, fontWeight: item.isActive ? 700 : 400 }}
-									data-testid="uplot-tooltip-item-content"
-								>
-									{item.label}: {item.tooltipValue}
-								</div>
-							</div>
-						)}
-					/>
-				) : null}
-			</div>
 		</div>
 	);
 }

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

@@ -6,6 +6,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { render, RenderResult, screen } from 'tests/test-utils';
 import uPlot from 'uplot';
 
+import type { TooltipClickData } from '../../../plugins/TooltipPlugin/types';
 import { TooltipContentItem } from '../../types';
 import Tooltip from '../Tooltip';
 
@@ -83,7 +84,7 @@ function createUPlotInstance(cursorIdx: number | null): uPlot {
 function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
 	const defaultProps: TooltipTestProps = {
 		uPlotInstance: createUPlotInstance(null),
-		timezone: 'UTC',
+		timezone: { value: 'UTC', name: 'UTC', offset: '0', searchIndex: '0' },
 		content: [],
 		showTooltipHeader: true,
 		// TooltipRenderArgs (not used directly in component but required by type)
@@ -92,6 +93,7 @@ function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
 		isPinned: false,
 		dismiss: jest.fn(),
 		viaSync: false,
+		clickData: null,
 	} as TooltipTestProps;
 
 	return render(
@@ -205,4 +207,43 @@ describe('Tooltip', () => {
 		// Falls back to content length: 2 items * 38px = 76px
 		expect(list).toHaveStyle({ height: '76px' });
 	});
+
+	it('renders pinned tooltip content when clickData is provided', () => {
+		const uPlotInstance = createUPlotInstance(0);
+
+		const clickData: TooltipClickData = {
+			xValue: 100,
+			yValue: 200,
+			focusedSeries: {
+				seriesIndex: 1,
+				seriesName: 'Series A',
+				value: 10,
+				color: '#ff0000',
+			},
+			clickedDataTimestamp: 100,
+			mouseX: 50,
+			mouseY: 60,
+			absoluteMouseX: 150,
+			absoluteMouseY: 160,
+		};
+
+		const pinnedTooltipElement = jest.fn(
+			(data: TooltipClickData): JSX.Element => (
+				<div data-testid="pinned-tooltip">{`Pinned at ${data.xValue}`}</div>
+			),
+		);
+
+		renderTooltip({
+			uPlotInstance,
+			isPinned: true,
+			clickData,
+			pinnedTooltipElement,
+			content: [createTooltipContent()],
+		});
+
+		expect(pinnedTooltipElement).toHaveBeenCalledWith(clickData);
+		expect(screen.getByTestId('pinned-tooltip')).toBeInTheDocument();
+		expect(screen.queryByTestId('uplot-tooltip-header')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('uplot-tooltip-list')).not.toBeInTheDocument();
+	});
 });

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

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import uPlot from 'uplot';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
+import { TooltipClickData } from '../plugins/TooltipPlugin/types';
 
 /**
  * Props for the Plot component
@@ -57,14 +59,16 @@ export interface TooltipRenderArgs {
 	isPinned: boolean;
 	dismiss: () => void;
 	viaSync: boolean;
+	clickData: TooltipClickData | null;
 }
 
 export interface BaseTooltipProps {
 	showTooltipHeader?: boolean;
-	timezone: string;
+	timezone?: Timezone;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	content?: TooltipContentItem[];
+	pinnedTooltipElement?: (clickData: TooltipClickData) => ReactNode;
 }
 
 export interface TimeSeriesTooltipProps

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 import { useLayoutEffect, 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 {
@@ -142,6 +143,7 @@ export default function TooltipPlugin({
 			const isPinnedBeforeDismiss = controller.pinned;
 			controller.pinned = false;
 			controller.hoverActive = false;
+			controller.clickData = null;
 			if (controller.plot) {
 				controller.plot.setCursor({ left: -10, top: -10 });
 			}
@@ -161,6 +163,7 @@ export default function TooltipPlugin({
 				isPinned: controller.pinned,
 				dismiss: dismissTooltip,
 				viaSync: controller.cursorDrivenBySync,
+				clickData: controller.clickData,
 			});
 		}
 
@@ -247,6 +250,26 @@ export default function TooltipPlugin({
 				!controller.pinned &&
 				controller.focusedSeriesIndex != null
 			) {
+				const xValue = u.posToVal(event.offsetX, 'x');
+				const yValue = u.posToVal(event.offsetY, 'y');
+				const focusedSeries = getFocusedSeriesAtPosition(event, u);
+
+				let clickedDataTimestamp = xValue;
+				if (focusedSeries) {
+					clickedDataTimestamp = u.data[0][u.posToIdx(event.offsetX)];
+				}
+
+				controller.clickData = {
+					xValue,
+					yValue,
+					focusedSeries,
+					clickedDataTimestamp,
+					mouseX: event.offsetX,
+					mouseY: event.offsetY,
+					absoluteMouseX: event.clientX,
+					absoluteMouseY: event.clientY,
+				};
+
 				setTimeout(() => {
 					controller.pinned = true;
 					scheduleRender(true);

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

@@ -26,6 +26,7 @@ export function createInitialControllerState(): TooltipControllerState {
 		windowWidth: window.innerWidth - WINDOW_OFFSET,
 		windowHeight: window.innerHeight - WINDOW_OFFSET,
 		pendingPinnedUpdate: false,
+		clickData: null,
 	};
 }
 

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

@@ -42,6 +42,22 @@ export interface TooltipPluginProps {
 	maxHeight?: number;
 }
 
+export interface TooltipClickData {
+	xValue: number;
+	yValue: number;
+	focusedSeries: {
+		seriesIndex: number;
+		seriesName: string;
+		value: number;
+		color: string;
+	} | null;
+	clickedDataTimestamp: number;
+	mouseX: number;
+	mouseY: number;
+	absoluteMouseX: number;
+	absoluteMouseY: number;
+}
+
 /**
  * Mutable, non-React state that drives tooltip behaviour:
  * - whether the tooltip is active / pinned
@@ -68,6 +84,9 @@ export interface TooltipControllerState {
 	windowWidth: number;
 	windowHeight: number;
 	pendingPinnedUpdate: boolean;
+
+	/** Data about the click that triggered the tooltip */
+	clickData: TooltipClickData | null;
 }
 
 /**

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

@@ -9,6 +9,12 @@ import { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
 import TooltipPlugin from '../TooltipPlugin/TooltipPlugin';
 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.
+jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
+	getFocusedSeriesAtPosition: jest.fn(() => null),
+}));
+
 // ---------------------------------------------------------------------------
 // Mock helpers
 // ---------------------------------------------------------------------------
@@ -55,11 +61,21 @@ function createFakePlot(): {
 	over: HTMLDivElement;
 	setCursor: jest.Mock<void, [uPlot.Cursor]>;
 	cursor: { event: Record<string, unknown> };
+	posToVal: jest.Mock<number, [value: number]>;
+	posToIdx: jest.Mock<number, []>;
+	data: [number[], number[]];
 } {
+	const over = document.createElement('div');
+
+	// Provide the minimal uPlot surface used by TooltipPlugin's pin logic.
 	return {
-		over: document.createElement('div'),
+		over,
 		setCursor: jest.fn(),
 		cursor: { event: {} },
+		// In real uPlot these map overlay coordinates to data-space values.
+		posToVal: jest.fn((value: number) => value),
+		posToIdx: jest.fn(() => 0),
+		data: [[0], [0]],
 	};
 }