feat(explorer): enable timeseries export in Logs, Traces and Metrics

Logs and Traces pass allowExport + onYAxisUnitChange and drop their external unit-filter headers (one header row: unit left, download right). Metrics passes allowExport only, per chart — its YAxisUnitSelector stays screen-level (persists to the metric, spans N charts). convertDataValueToMs now converts the raw V5 tree too, so Traces duration exports carry the ms values the chart shows instead of raw nanoseconds.

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -191,14 +191,6 @@
 				min-height: 0;
 				overflow-y: visible;
 
-				.time-series-view-container-header {
-					display: flex;
-					justify-content: flex-start;
-					align-items: center;
-					padding: 12px;
-					flex-shrink: 0;
-				}
-
 				.time-series-view {
 					flex-shrink: 0;
 					height: 65vh;

frontend/src/container/LogsExplorerViews/index.tsx

@@ -32,7 +32,6 @@ import {
 	getListQuery,
 	getQueryByPanelType,
 } from 'container/LogsExplorerViews/explorerUtils';
-import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
@@ -461,18 +460,17 @@ function LogsExplorerViewsContainer({
 					)}
 					{selectedPanelType === PANEL_TYPES.TIME_SERIES && !showLiveLogs && (
 						<div className="time-series-view-container">
-							<div className="time-series-view-container-header">
-								<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
-							</div>
 							<TimeSeriesView
 								isLoading={isLoading || isFetching}
 								data={data}
 								isError={isError}
 								error={error as APIError}
 								yAxisUnit={yAxisUnit}
+								onYAxisUnitChange={onUnitChange}
 								isFilterApplied={!isEmpty(listQuery?.filters?.items)}
 								dataSource={DataSource.LOGS}
 								setWarning={setWarning}
+								allowExport
 							/>
 						</div>
 					)}

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -311,6 +311,7 @@ function TimeSeries({
 									dataSource={DataSource.METRICS}
 									error={queries[index].error as APIError}
 									setWarning={setWarning}
+									allowExport
 								/>
 							</div>
 						);

frontend/src/container/TimeSeriesView/TimeSeriesView.styles.scss

@@ -3,6 +3,14 @@
 	min-height: 350px;
 	padding: 0px 12px;
 
+	&__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 12px 0;
+		flex-shrink: 0;
+	}
+
 	.ant-card-body {
 		height: 50vh;
 		min-height: 350px;

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -16,6 +16,7 @@ import Uplot from 'components/Uplot';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
+import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
 import { getLocalStorageGraphVisibilityState } from 'container/GridCardLayout/GridCard/utils';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsSearch';
@@ -41,11 +42,14 @@ import { SuccessResponse, Warning } from 'types/api';
 import { LegendPosition } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
+import TimeseriesExportMenu from './TimeseriesExportMenu';
+
 import './TimeSeriesView.styles.scss';
 
 function TimeSeriesView({
@@ -59,6 +63,8 @@ function TimeSeriesView({
 	setWarning,
 	panelType = PANEL_TYPES.TIME_SERIES,
 	stackBarChart = false,
+	allowExport = false,
+	onYAxisUnitChange,
 }: TimeSeriesViewProps): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 
@@ -244,10 +250,33 @@ function TimeSeriesView({
 		[baseChartOptions, stackedBands],
 	);
 
+	const showExport = allowExport && !!data?.rawV5Response;
+	const showHeader = showExport || !!onYAxisUnitChange;
+
 	return (
 		<div className="time-series-view">
 			{isError && error && <ErrorInPlace error={error as APIError} />}
 
+			{showHeader && (
+				<div className="time-series-view__header">
+					<div>
+						{onYAxisUnitChange && (
+							<BuilderUnitsFilter onChange={onYAxisUnitChange} yAxisUnit={yAxisUnit} />
+						)}
+					</div>
+					{showExport && data?.rawV5Response && (
+						<TimeseriesExportMenu
+							dataSource={dataSource}
+							yAxisUnit={yAxisUnit}
+							queryResponse={data.rawV5Response}
+							query={currentQuery}
+							legendMap={data.legendMap}
+							fileName={`${dataSource}-timeseries`}
+						/>
+					)}
+				</div>
+			)}
+
 			<div
 				className="graph-container"
 				style={{ height: '100%', width: '100%' }}
@@ -295,7 +324,11 @@ function TimeSeriesView({
 }
 
 interface TimeSeriesViewProps {
-	data?: SuccessResponse<MetricRangePayloadProps> & { warning?: Warning };
+	data?: SuccessResponse<MetricRangePayloadProps> & {
+		warning?: Warning;
+		rawV5Response?: QueryRangeResponseV5;
+		legendMap?: Record<string, string>;
+	};
 	yAxisUnit?: string;
 	isLoading: boolean;
 	isError: boolean;
@@ -305,6 +338,11 @@ interface TimeSeriesViewProps {
 	setWarning?: Dispatch<SetStateAction<Warning | undefined>>;
 	panelType?: PANEL_TYPES;
 	stackBarChart?: boolean;
+	// Opt-in: render the client-side export menu (Logs explorer for now).
+	allowExport?: boolean;
+	// Opt-in: render the y-axis unit selector in the header (views without their
+	// own selector, e.g. Logs). Metrics keeps its separate YAxisUnitSelector.
+	onYAxisUnitChange?: (value: string) => void;
 }
 
 TimeSeriesView.defaultProps = {

frontend/src/container/TimeSeriesView/TimeseriesExportMenu.styles.scss

@@ -0,0 +1,46 @@
+.timeseries-export-popover {
+	.ant-popover-inner {
+		border-radius: 4px;
+		background-color: var(--l2-background);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		padding: 0 8px 12px 8px;
+		margin: 6px 0;
+	}
+
+	.export-options-container {
+		width: 240px;
+		border-radius: 4px;
+
+		.title {
+			display: flex;
+			color: var(--l1-foreground);
+			font-family: Inter;
+			font-size: 11px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 18px;
+			letter-spacing: 0.88px;
+			text-transform: uppercase;
+			margin-bottom: 8px;
+		}
+
+		.export-format {
+			padding: 12px 4px;
+			display: flex;
+			flex-direction: column;
+
+			:global(.ant-radio-wrapper) {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 13px;
+			}
+		}
+
+		.export-button {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+}

frontend/src/container/TimeSeriesView/TimeseriesExportMenu.tsx

@@ -0,0 +1,106 @@
+import { Download, LoaderCircle } from '@signozhq/icons';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { Typography } from '@signozhq/ui/typography';
+import { Button, Popover, Tooltip } from 'antd';
+import { useClientExport } from 'hooks/useExportData/useClientExport';
+import { ExportFormat } from 'lib/exportData/types';
+import { useCallback, useMemo, useState } from 'react';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
+import { DataSource } from 'types/common/queryBuilder';
+
+import './TimeseriesExportMenu.styles.scss';
+
+interface TimeseriesExportMenuProps {
+	dataSource: DataSource;
+	queryResponse: QueryRangeResponseV5;
+	query?: Query;
+	yAxisUnit?: string;
+	legendMap?: Record<string, string>;
+	fileName?: string;
+}
+
+// Download menu for in-memory timeseries data (client-side serialization).
+// The raw/list backend export keeps its own menu in DownloadOptionsMenu.
+export default function TimeseriesExportMenu({
+	dataSource,
+	queryResponse,
+	query,
+	yAxisUnit,
+	legendMap,
+	fileName,
+}: TimeseriesExportMenuProps): JSX.Element {
+	const [exportFormat, setExportFormat] = useState<string>(ExportFormat.Csv);
+	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+
+	const { isExporting, handleExport: handleClientExport } = useClientExport({
+		response: queryResponse,
+		query,
+		yAxisUnit,
+		legendMap,
+		fileName,
+	});
+
+	const handleExport = useCallback((): void => {
+		setIsPopoverOpen(false);
+		handleClientExport({ format: exportFormat as ExportFormat });
+	}, [exportFormat, handleClientExport]);
+
+	const popoverContent = useMemo(
+		() => (
+			<div
+				className="export-options-container"
+				role="dialog"
+				aria-label="Export options"
+				aria-modal="true"
+			>
+				<div className="export-format">
+					<Typography.Text className="title">FORMAT</Typography.Text>
+					<RadioGroup value={exportFormat} onChange={setExportFormat}>
+						<RadioGroupItem value={ExportFormat.Csv}>csv</RadioGroupItem>
+						<RadioGroupItem value={ExportFormat.Jsonl}>jsonl</RadioGroupItem>
+					</RadioGroup>
+				</div>
+
+				<Button
+					type="primary"
+					icon={<Download size={16} />}
+					onClick={handleExport}
+					className="export-button"
+					disabled={isExporting}
+					loading={isExporting}
+				>
+					Export
+				</Button>
+			</div>
+		),
+		[exportFormat, isExporting, handleExport],
+	);
+
+	return (
+		<Popover
+			content={popoverContent}
+			trigger="click"
+			placement="bottomRight"
+			arrow={false}
+			open={isPopoverOpen}
+			onOpenChange={setIsPopoverOpen}
+			rootClassName="timeseries-export-popover"
+		>
+			<Tooltip title="Download" placement="top">
+				<Button
+					className="periscope-btn ghost"
+					icon={
+						isExporting ? (
+							<LoaderCircle size={14} className="animate-spin" />
+						) : (
+							<Download size={14} />
+						)
+					}
+					data-testid={`timeseries-export-${dataSource}`}
+					disabled={isExporting}
+				/>
+			</Tooltip>
+		</Popover>
+	);
+}

frontend/src/container/TimeSeriesView/__tests__/TimeSeriesView.test.tsx

@@ -0,0 +1,138 @@
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import store from 'store';
+import { DataSource } from 'types/common/queryBuilder';
+
+import TimeSeriesView from '../TimeSeriesView';
+
+jest.mock('components/Uplot', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="uplot-chart" />,
+}));
+
+jest.mock('../TimeseriesExportMenu', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="timeseries-export-menu" />,
+}));
+
+jest.mock('container/QueryBuilder/filters/BuilderUnitsFilter', () => ({
+	BuilderUnitsFilter: (): JSX.Element => (
+		<div data-testid="builder-units-filter" />
+	),
+}));
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): unknown => ({ currentQuery: null }),
+}));
+
+jest.mock('lib/uPlotLib/getUplotChartOptions', () => ({
+	getUPlotChartOptions: (): unknown => ({}),
+}));
+
+jest.mock('lib/uPlotLib/utils/getUplotChartData', () => ({
+	getUPlotChartData: (): number[][] => [
+		[1, 2],
+		[3, 4],
+	],
+}));
+
+jest.mock(
+	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
+	() => ({ stackSeries: (): unknown => ({ data: [], bands: [] }) }),
+);
+
+jest.mock('container/GridCardLayout/GridCard/utils', () => ({
+	getLocalStorageGraphVisibilityState: (): unknown => ({
+		graphVisibilityStates: [],
+	}),
+}));
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): unknown => ({ timezone: { value: 'UTC' } }),
+}));
+
+jest.mock('hooks/useDimensions', () => ({
+	useResizeObserver: (): unknown => ({ width: 800, height: 400 }),
+}));
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+const mockStore = configureStore([])({ ...store.getState() });
+
+const rawV5Response = {
+	type: 'time_series',
+	data: { results: [] },
+	meta: {},
+};
+
+function makeData(withRawV5: boolean): any {
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: { data: { result: [], resultType: '' } },
+		...(withRawV5 ? { rawV5Response, legendMap: {} } : {}),
+	};
+}
+
+function renderView(props: {
+	allowExport?: boolean;
+	withRawV5?: boolean;
+	onYAxisUnitChange?: (value: string) => void;
+}): ReturnType<typeof render> {
+	const { allowExport, withRawV5 = true, onYAxisUnitChange } = props;
+	return render(
+		<Provider store={mockStore}>
+			<MemoryRouter>
+				<TimeSeriesView
+					isLoading={false}
+					isError={false}
+					isFilterApplied
+					dataSource={DataSource.LOGS}
+					data={makeData(withRawV5)}
+					allowExport={allowExport}
+					onYAxisUnitChange={onYAxisUnitChange}
+				/>
+			</MemoryRouter>
+		</Provider>,
+	);
+}
+
+describe('TimeSeriesView header gating', () => {
+	it('renders the export menu when allowExport is set and raw V5 data is present', () => {
+		const { queryByTestId } = renderView({ allowExport: true });
+		expect(queryByTestId('timeseries-export-menu')).toBeInTheDocument();
+	});
+
+	it('renders no export menu without allowExport', () => {
+		const { queryByTestId } = renderView({});
+		expect(queryByTestId('timeseries-export-menu')).not.toBeInTheDocument();
+	});
+
+	it('renders no export menu when the raw V5 response is missing', () => {
+		const { queryByTestId } = renderView({ allowExport: true, withRawV5: false });
+		expect(queryByTestId('timeseries-export-menu')).not.toBeInTheDocument();
+	});
+
+	it('renders the unit selector only when onYAxisUnitChange is passed', () => {
+		const withUnit = renderView({ onYAxisUnitChange: jest.fn() });
+		expect(withUnit.queryByTestId('builder-units-filter')).toBeInTheDocument();
+		withUnit.unmount();
+
+		const withoutUnit = renderView({ allowExport: true });
+		expect(
+			withoutUnit.queryByTestId('builder-units-filter'),
+		).not.toBeInTheDocument();
+	});
+
+	it('renders no header row when neither export nor unit selector is enabled', () => {
+		const { container } = renderView({ withRawV5: false });
+		expect(container.querySelector('.time-series-view__header')).toBeNull();
+	});
+});

frontend/src/container/TimeSeriesView/__tests__/TimeseriesExportMenu.test.tsx

@@ -0,0 +1,84 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
+import { DataSource } from 'types/common/queryBuilder';
+
+import TimeseriesExportMenu from '../TimeseriesExportMenu';
+
+const mockHandleExport = jest.fn();
+let mockIsExporting = false;
+
+jest.mock('hooks/useExportData/useClientExport', () => ({
+	useClientExport: (): unknown => ({
+		isExporting: mockIsExporting,
+		handleExport: mockHandleExport,
+	}),
+}));
+
+const response = {
+	type: 'time_series',
+	data: { results: [] },
+	meta: {},
+} as unknown as QueryRangeResponseV5;
+
+const TEST_ID = `timeseries-export-${DataSource.LOGS}`;
+
+function renderMenu(): void {
+	render(
+		<TimeseriesExportMenu
+			dataSource={DataSource.LOGS}
+			queryResponse={response}
+			fileName="logs-timeseries"
+		/>,
+	);
+}
+
+describe('TimeseriesExportMenu', () => {
+	beforeEach(() => {
+		mockHandleExport.mockReset();
+		mockIsExporting = false;
+	});
+
+	it('renders the download trigger button', () => {
+		renderMenu();
+		expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+	});
+
+	it('shows only format options — no shape, row-count, or column controls', () => {
+		renderMenu();
+		fireEvent.click(screen.getByTestId(TEST_ID));
+
+		expect(screen.getByText('FORMAT')).toBeInTheDocument();
+		expect(screen.getByRole('radio', { name: 'csv' })).toBeInTheDocument();
+		expect(screen.getByRole('radio', { name: 'jsonl' })).toBeInTheDocument();
+
+		expect(screen.queryByText('Number of Rows')).not.toBeInTheDocument();
+		expect(screen.queryByText('Columns')).not.toBeInTheDocument();
+		expect(screen.queryByRole('radio', { name: 'long' })).not.toBeInTheDocument();
+		expect(screen.queryByRole('radio', { name: 'wide' })).not.toBeInTheDocument();
+	});
+
+	it('exports as csv by default', () => {
+		renderMenu();
+		fireEvent.click(screen.getByTestId(TEST_ID));
+		fireEvent.click(screen.getByText('Export'));
+
+		expect(mockHandleExport).toHaveBeenCalledTimes(1);
+		expect(mockHandleExport).toHaveBeenCalledWith({ format: 'csv' });
+	});
+
+	it('exports as jsonl when selected', () => {
+		renderMenu();
+		fireEvent.click(screen.getByTestId(TEST_ID));
+		fireEvent.click(screen.getByRole('radio', { name: 'jsonl' }));
+		fireEvent.click(screen.getByText('Export'));
+
+		expect(mockHandleExport).toHaveBeenCalledWith({ format: 'jsonl' });
+	});
+
+	it('disables the trigger while an export is in progress', () => {
+		mockIsExporting = true;
+		renderMenu();
+
+		expect(screen.getByTestId(TEST_ID)).toBeDisabled();
+	});
+});

frontend/src/container/TimeSeriesView/utils.ts

@@ -1,10 +1,41 @@
 import { SuccessResponse } from 'types/api/index';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { QueryRangeResponseV5, TimeSeriesData } from 'types/api/v5/queryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 
+type ConvertibleData = SuccessResponse<MetricRangePayloadProps> & {
+	rawV5Response?: QueryRangeResponseV5;
+};
+
+// Applies the same ns→ms conversion to the raw V5 tree, so client-side export
+// serializes the values the chart displays (not the original nanoseconds).
+function convertRawV5ValuesToMs(
+	response: QueryRangeResponseV5,
+): QueryRangeResponseV5 {
+	if (response.type !== 'time_series') {
+		return response;
+	}
+
+	const results = (response.data.results as TimeSeriesData[]).map((result) => ({
+		...result,
+		aggregations: (result.aggregations ?? []).map((bucket) => ({
+			...bucket,
+			series: (bucket.series ?? []).map((series) => ({
+				...series,
+				values: (series.values ?? []).map((value) => ({
+					...value,
+					value: value.value / 1000000,
+				})),
+			})),
+		})),
+	}));
+
+	return { ...response, data: { ...response.data, results } };
+}
+
 export const convertDataValueToMs = (
-	data?: SuccessResponse<MetricRangePayloadProps>,
-): SuccessResponse<MetricRangePayloadProps> | undefined => {
+	data?: ConvertibleData,
+): ConvertibleData | undefined => {
 	const convertedData = data;
 
 	const convertedResult: QueryData[] = data?.payload?.data?.result
@@ -22,5 +53,11 @@ export const convertDataValueToMs = (
 		convertedData.payload.data.result = convertedResult;
 	}
 
+	if (convertedData?.rawV5Response) {
+		convertedData.rawV5Response = convertRawV5ValuesToMs(
+			convertedData.rawV5Response,
+		);
+	}
+
 	return convertedData;
 };

frontend/src/lib/dashboard/getQueryResults.ts

@@ -22,7 +22,11 @@ import { SuccessResponseV2, Warning } from 'types/api';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
-import { ExecStats, MetricRangePayloadV5 } from 'types/api/v5/queryRange';
+import {
+	ExecStats,
+	MetricRangePayloadV5,
+	QueryRangeResponseV5,
+} from 'types/api/v5/queryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
@@ -192,6 +196,8 @@ export async function GetMetricQueryRange(
 		| SuccessResponseV2<MetricRangePayloadV5>;
 	let warning: Warning | undefined;
 	let meta: ExecStats | undefined;
+	// Raw V5 response, kept before it's converted to legacy — powers client-side export.
+	let rawV5Response: QueryRangeResponseV5 | undefined;
 
 	const panelType = props.originalGraphType || props.graphType;
 
@@ -268,6 +274,8 @@ export async function GetMetricQueryRange(
 				endTime: props.end * 1000,
 			});
 
+			rawV5Response = publicResponse.data.data;
+
 			// Convert V5 response to legacy format for components
 			response = convertV5ResponseToLegacy(
 				{
@@ -288,6 +296,8 @@ export async function GetMetricQueryRange(
 				headers,
 			);
 
+			rawV5Response = v5Response.data.data;
+
 			// Convert V5 response to legacy format for components
 			response = convertV5ResponseToLegacy(
 				{
@@ -366,6 +376,8 @@ export async function GetMetricQueryRange(
 		...response,
 		warning,
 		meta,
+		rawV5Response,
+		legendMap,
 	};
 }
 

frontend/src/lib/exportData/__tests__/exportTimeseriesData.test.ts

@@ -118,6 +118,27 @@ describe('exportTimeseriesData', () => {
 		]);
 	});
 
+	it('omits display-only format ids (short/none) from headers', () => {
+		const data = [
+			makeQuery('A', [{ series: [makeSeries({ service: 'a' }, [[1000, 1]])] }]),
+		];
+
+		const long = exportTimeseriesData({
+			data,
+			shape: TimeseriesShape.Long,
+			yAxisUnit: 'short',
+		});
+		expect(long.headers[long.headers.length - 1]).toBe('value');
+
+		const wide = exportTimeseriesData({
+			data,
+			shape: TimeseriesShape.Wide,
+			yAxisUnit: 'none',
+			legendMap: { A: '{{service}}' },
+		});
+		expect(wide.headers).toStrictEqual(['timestamp', 'a']);
+	});
+
 	it('WIDE: appends the y-axis unit to every series header', () => {
 		const data = [
 			makeQuery('A', [{ series: [makeSeries({ service: 'a' }, [[1000, 1]])] }]),

frontend/src/lib/exportData/exportTimeseriesData.ts

@@ -112,10 +112,17 @@ function dedupeHeaders(names: string[]): string[] {
 	});
 }
 
+// Display-format ids, not physical units — meaningful on a chart axis
+// (compact-number formatting) but misleading in an export header.
+const DISPLAY_ONLY_UNITS = new Set(['short', 'none']);
+
 // Appends the y-axis unit to a header: `value` → `value (ms)`, `frontend` →
 // `frontend (ms)`. Shared by LONG's value column and every WIDE series column.
 function withUnit(header: string, yAxisUnit?: string): string {
-	return yAxisUnit ? `${header} (${yAxisUnit})` : header;
+	if (!yAxisUnit || DISPLAY_ONLY_UNITS.has(yAxisUnit)) {
+		return header;
+	}
+	return `${header} (${yAxisUnit})`;
 }
 
 function toIso(timestamp: number): string {

frontend/src/pages/TracesExplorer/TimeSeriesView/index.tsx

@@ -10,7 +10,6 @@ import { useSelector } from 'react-redux';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { BuilderUnitsFilter } from 'container/QueryBuilder/filters';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
@@ -116,9 +115,6 @@ function TimeSeriesViewContainer({
 
 	return (
 		<div className="trace-explorer-time-series-view-container">
-			<div className="trace-explorer-time-series-view-container-header">
-				<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
-			</div>
 			<TimeSeriesView
 				isFilterApplied={isFilterApplied}
 				isError={isError}
@@ -126,8 +122,10 @@ function TimeSeriesViewContainer({
 				isLoading={isLoading || isFetching}
 				data={responseData}
 				yAxisUnit={yAxisUnit}
+				onYAxisUnitChange={onUnitChange}
 				dataSource={dataSource}
 				setWarning={setWarning}
+				allowExport
 			/>
 		</div>
 	);

frontend/src/types/api/metrics/getQueryRange.ts

@@ -8,7 +8,11 @@ import {
 	IClickHouseQuery,
 	IPromQLQuery,
 } from '../queryBuilder/queryBuilderData';
-import { ExecStats, QueryRangeRequestV5 } from '../v5/queryRange';
+import {
+	ExecStats,
+	QueryRangeRequestV5,
+	QueryRangeResponseV5,
+} from '../v5/queryRange';
 import { QueryData, QueryDataV3 } from '../widgets/getQuery';
 
 export type QueryRangePayload = {
@@ -48,6 +52,9 @@ export interface MetricQueryRangeSuccessResponse extends SuccessResponse<
 > {
 	warning?: Warning;
 	meta?: ExecStats;
+	// Raw V5 response (pre-legacy-conversion) + per-query legend map, for client-side export.
+	rawV5Response?: QueryRangeResponseV5;
+	legendMap?: Record<string, string>;
 }
 
 export interface MetricRangePayloadV3 {