feat(metrics-explorer): explorer actions per chart

One chart per query renders a chart per split query, each with its own
download.. actions sit in that header with the chart's query, icon only
in the split layout. Nothing left in the explore header.

frontend/__mocks__/uplotMock.ts

@@ -48,7 +48,6 @@ const mockPaths = {
 const mockTzDate = jest.fn(
 	(date: Date, _timezone: string) => new Date(date.getTime()),
 );
-const mockOrient = jest.fn();
 
 // Mock uPlot constructor - this needs to be a proper constructor function
 function MockUPlot(
@@ -62,9 +61,6 @@ function MockUPlot(
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
-MockUPlot.orient = mockOrient;
-// Pinned so canvas-space maths in path builders is deterministic under jsdom.
-MockUPlot.pxRatio = 1;
 
 // Export the constructor as default
 export default MockUPlot;

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx

@@ -106,7 +106,7 @@ describe.each([
 		renderWithStore(dataSource);
 		const button = screen.getByTestId(testId);
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass('periscope-btn', 'ghost');
+		expect(button).toHaveAccessibleName('Download');
 	});
 
 	it('shows popover with export options when download button is clicked', () => {

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Button, Popover, Tooltip } from 'antd';
+import { Popover, Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useExportRawData } from 'hooks/useExportData/useServerExport';
-import { Download, LoaderCircle } from '@signozhq/icons';
+import { Download } from '@signozhq/icons';
 import { DataSource } from 'types/common/queryBuilder';
 
 import {
@@ -111,8 +112,9 @@ export default function DownloadOptionsMenu({
 				)}
 
 				<Button
-					type="primary"
-					icon={<Download size={16} />}
+					variant="solid"
+					color="primary"
+					prefix={<Download size={16} />}
 					onClick={handleExport}
 					className="export-button"
 					disabled={isDownloading}
@@ -144,16 +146,14 @@ export default function DownloadOptionsMenu({
 		>
 			<Tooltip title="Download" placement="top">
 				<Button
-					className="periscope-btn ghost"
-					icon={
-						isDownloading ? (
-							<LoaderCircle size={14} className="animate-spin" />
-						) : (
-							<Download size={14} />
-						)
-					}
+					variant="ghost"
+					color="secondary"
+					size="icon"
+					prefix={<Download size={14} />}
+					aria-label="Download"
 					data-testid={`periscope-btn-download-${dataSource}`}
 					disabled={isDownloading}
+					loading={isDownloading}
 				/>
 			</Tooltip>
 		</Popover>

frontend/src/container/ExplorerActions/AddToDashboardButton.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { Grid2X2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import logEvent from 'api/common/logEvent';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import ExportPanelContainer from 'container/ExportPanel/ExportPanelContainer';
+import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
+import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 } from 'uuid';
+
+import { EXPLORER_ACTION_EVENTS, getExportPanelType } from './utils';
+
+function AddToDashboardButton({
+	query,
+	sourcepage,
+	panelType,
+}: {
+	query: Query | null;
+	sourcepage: DataSource;
+	panelType?: PANEL_TYPES;
+}): JSX.Element {
+	const [queryToExport, setQueryToExport] = useState<Query | null>(null);
+	const { panelType: contextPanelType } = useQueryBuilder();
+	const { safeNavigate } = useSafeNavigate();
+	const getExportToDashboardLink = useGetExportToDashboardLink();
+
+	const open = (): void => {
+		if (!query) {
+			return;
+		}
+		void logEvent(EXPLORER_ACTION_EVENTS.addToDashboard, {
+			sourcepage,
+			panelType: contextPanelType,
+		});
+		setQueryToExport(query);
+	};
+
+	const handleExport = (
+		dashboard: ExportDashboard | null,
+		isNewDashboard?: boolean,
+	): void => {
+		if (!dashboard || !queryToExport) {
+			return;
+		}
+		const exportPanelType = panelType ?? getExportPanelType(contextPanelType);
+
+		void logEvent(EXPLORER_ACTION_EVENTS.exported, {
+			sourcepage,
+			panelType: exportPanelType,
+			isNewDashboard,
+			dashboardName: dashboard.title,
+		});
+
+		const link = getExportToDashboardLink({
+			query: queryToExport,
+			panelType: exportPanelType,
+			dashboardId: dashboard.id,
+			widgetId: v4(),
+		});
+		if (link) {
+			safeNavigate(link);
+		}
+	};
+
+	const button = (
+		<Button
+			variant="ghost"
+			color="secondary"
+			size="icon"
+			disabled={!query}
+			onClick={open}
+			prefix={<Grid2X2 size={16} />}
+			aria-label="Add to dashboard"
+			data-testid="explorer-add-to-dashboard"
+		/>
+	);
+
+	return (
+		<>
+			<TooltipSimple title="Add to dashboard">{button}</TooltipSimple>
+			<ExportPanelContainer
+				open={queryToExport !== null}
+				onClose={(): void => setQueryToExport(null)}
+				query={queryToExport}
+				onExport={handleExport}
+			/>
+		</>
+	);
+}
+
+export default AddToDashboardButton;

frontend/src/container/ExplorerActions/CreateAlertButton.tsx

@@ -0,0 +1,54 @@
+import { useHistory } from 'react-router-dom';
+import { ConciergeBell } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import logEvent from 'api/common/logEvent';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { EXPLORER_ACTION_EVENTS, getCreateAlertLink } from './utils';
+
+function CreateAlertButton({
+	query,
+	sourcepage,
+	iconOnly = false,
+}: {
+	query: Query | null;
+	sourcepage: DataSource;
+	iconOnly?: boolean;
+}): JSX.Element {
+	const history = useHistory();
+	const { panelType } = useQueryBuilder();
+
+	const createAlert = (): void => {
+		if (!query) {
+			return;
+		}
+		void logEvent(EXPLORER_ACTION_EVENTS.createAlert, { sourcepage, panelType });
+		history.push(getCreateAlertLink({ query, panelType }));
+	};
+
+	const button = (
+		<Button
+			variant="ghost"
+			color="secondary"
+			size={iconOnly ? 'icon' : 'md'}
+			disabled={!query}
+			onClick={createAlert}
+			prefix={<ConciergeBell size={16} />}
+			aria-label="Create an alert"
+			data-testid="explorer-create-alert"
+		>
+			{!iconOnly && 'Create an alert'}
+		</Button>
+	);
+
+	return iconOnly ? (
+		<TooltipSimple title="Create an alert">{button}</TooltipSimple>
+	) : (
+		button
+	);
+}
+
+export default CreateAlertButton;

frontend/src/container/ExplorerActions/ExplorerActions.tsx

@@ -0,0 +1,38 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import AddToDashboardButton from './AddToDashboardButton';
+import CreateAlertButton from './CreateAlertButton';
+
+function ExplorerActions({
+	query,
+	dashboardQuery = query,
+	sourcepage,
+	panelType,
+	iconOnly,
+}: {
+	query: Query | null;
+	// When the dashboard export differs from the alert one (traces list injects columns).
+	dashboardQuery?: Query | null;
+	sourcepage: DataSource;
+	panelType?: PANEL_TYPES;
+	iconOnly?: boolean;
+}): JSX.Element {
+	return (
+		<>
+			<CreateAlertButton
+				query={query}
+				sourcepage={sourcepage}
+				iconOnly={iconOnly}
+			/>
+			<AddToDashboardButton
+				query={dashboardQuery}
+				sourcepage={sourcepage}
+				panelType={panelType}
+			/>
+		</>
+	);
+}
+
+export default ExplorerActions;

frontend/src/container/ExplorerActions/__tests__/AddToDashboardButton.test.tsx

@@ -0,0 +1,317 @@
+import logEvent from 'api/common/logEvent';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	getExportQueryData as getLogsExportQuery,
+	getQueryByPanelType as getLogsQueryByPanelType,
+} from 'container/LogsExplorerViews/explorerUtils';
+import { OptionsQuery } from 'container/OptionsMenu/types';
+import {
+	getExportQueryData as getTracesExportQuery,
+	getQueryByPanelType as getTracesQueryByPanelType,
+} from 'container/TracesExplorer/explorerUtils';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { buildExportPanelLink } from 'pages/DashboardPage/DashboardContainer/PanelEditor/newPanelRoute';
+import { render, screen, userEvent } from 'tests/test-utils';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource, StringOperators } from 'types/common/queryBuilder';
+
+import AddToDashboardButton from '../AddToDashboardButton';
+import { EXPLORER_ACTION_EVENTS, getExportPanelType } from '../utils';
+
+const DASHBOARD = { id: 'dash-1', title: 'Dash 1' };
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: jest.fn(),
+}));
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: jest.fn(),
+}));
+jest.mock('uuid', () => ({ v4: (): string => 'widget-1' }));
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(() => Promise.resolve()),
+}));
+// The picker is the dialog's business; here it just hands a dashboard back.
+jest.mock('container/ExportPanel/ExportPanelContainer', () => ({
+	__esModule: true,
+	default: ({
+		open,
+		query,
+		onExport,
+	}: {
+		open: boolean;
+		query: Query | null;
+		onExport: (dashboard: { id: string; title: string }) => void;
+	}): JSX.Element | null =>
+		open ? (
+			<button
+				type="button"
+				data-testid="export-stub"
+				data-query={JSON.stringify(query)}
+				onClick={(): void => onExport({ id: 'dash-1', title: 'Dash 1' })}
+			>
+				export
+			</button>
+		) : null,
+}));
+
+const mockSafeNavigate = jest.fn();
+const mockedUseQueryBuilder = jest.mocked(useQueryBuilder);
+const mockedUseSafeNavigate = jest.mocked(useSafeNavigate);
+const mockedLogEvent = jest.mocked(logEvent);
+
+const FILTER = "service.name = 'frontend'";
+const COLUMNS = [{ name: 'service.name' }, { name: 'name' }];
+const options = { selectColumns: COLUMNS } as unknown as OptionsQuery;
+
+function stagedQuery(dataSource: DataSource, queryName = 'A'): Query {
+	const base = initialQueriesMap[dataSource];
+	return {
+		...base,
+		id: `query-${queryName}`,
+		builder: {
+			...base.builder,
+			queryData: [
+				{
+					...base.builder.queryData[0],
+					queryName,
+					aggregateOperator: StringOperators.COUNT,
+					filter: { expression: FILTER },
+					orderBy: [{ columnName: 'timestamp', order: 'asc' }],
+					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
+				},
+			],
+		},
+	} as Query;
+}
+
+function setPanelType(panelType: PANEL_TYPES): void {
+	mockedUseQueryBuilder.mockReturnValue({ panelType } as ReturnType<
+		typeof useQueryBuilder
+	>);
+}
+
+async function exportTo(
+	query: Query | null,
+	sourcepage: DataSource,
+	panelType: PANEL_TYPES,
+	panelTypeProp?: PANEL_TYPES,
+): Promise<void> {
+	setPanelType(panelType);
+	render(
+		<AddToDashboardButton
+			query={query}
+			sourcepage={sourcepage}
+			panelType={panelTypeProp}
+		/>,
+	);
+	const user = userEvent.setup();
+	await user.click(screen.getByTestId('explorer-add-to-dashboard'));
+	await user.click(screen.getByTestId('export-stub'));
+}
+
+function expectedLink(query: Query, panelType: PANEL_TYPES): string | null {
+	return buildExportPanelLink({
+		query,
+		panelType,
+		dashboardId: DASHBOARD.id,
+	});
+}
+
+describe('AddToDashboardButton', () => {
+	beforeEach(() => {
+		mockSafeNavigate.mockReset();
+		mockedLogEvent.mockClear();
+		mockedUseSafeNavigate.mockReturnValue({ safeNavigate: mockSafeNavigate });
+	});
+
+	it('is disabled without a query and the picker stays closed', () => {
+		setPanelType(PANEL_TYPES.LIST);
+		render(<AddToDashboardButton query={null} sourcepage={DataSource.LOGS} />);
+
+		expect(screen.getByTestId('explorer-add-to-dashboard')).toBeDisabled();
+		expect(screen.queryByTestId('export-stub')).not.toBeInTheDocument();
+	});
+
+	it('hands the picker the same query it will export', async () => {
+		const query = stagedQuery(DataSource.LOGS);
+		setPanelType(PANEL_TYPES.TIME_SERIES);
+		render(<AddToDashboardButton query={query} sourcepage={DataSource.LOGS} />);
+
+		await userEvent
+			.setup()
+			.click(screen.getByTestId('explorer-add-to-dashboard'));
+
+		expect(screen.getByTestId('export-stub')).toHaveAttribute(
+			'data-query',
+			JSON.stringify(query),
+		);
+	});
+
+	it('logs open and success with the source page', async () => {
+		const query = stagedQuery(DataSource.TRACES);
+
+		await exportTo(query, DataSource.TRACES, PANEL_TYPES.TABLE);
+
+		expect(mockedLogEvent).toHaveBeenCalledWith(
+			EXPLORER_ACTION_EVENTS.addToDashboard,
+			{
+				sourcepage: DataSource.TRACES,
+				panelType: PANEL_TYPES.TABLE,
+			},
+		);
+		expect(mockedLogEvent).toHaveBeenCalledWith(EXPLORER_ACTION_EVENTS.exported, {
+			sourcepage: DataSource.TRACES,
+			panelType: PANEL_TYPES.TABLE,
+			isNewDashboard: undefined,
+			dashboardName: DASHBOARD.title,
+		});
+	});
+
+	it('a panel type from the page wins over the fold of the context one', async () => {
+		const query = stagedQuery(DataSource.METRICS);
+
+		// context says list, the page says time series
+		await exportTo(
+			query,
+			DataSource.METRICS,
+			PANEL_TYPES.LIST,
+			PANEL_TYPES.TIME_SERIES,
+		);
+
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expectedLink(query, PANEL_TYPES.TIME_SERIES),
+		);
+	});
+
+	describe('logs, the query the page hands over per view', () => {
+		const staged = stagedQuery(DataSource.LOGS);
+
+		it('list: the list request shaping with timestamp desc, panel type list', async () => {
+			const listRequest = getLogsQueryByPanelType(staged, PANEL_TYPES.LIST, {
+				page: 1,
+				pageSize: 100,
+				filters: { items: [], op: 'AND' },
+				filter: { expression: FILTER },
+			});
+			const exportQuery = getLogsExportQuery(
+				listRequest,
+				PANEL_TYPES.LIST,
+			) as Query;
+
+			await exportTo(exportQuery, DataSource.LOGS, PANEL_TYPES.LIST);
+
+			expect(exportQuery.builder.queryData[0].orderBy).toStrictEqual([
+				{ columnName: 'timestamp', order: 'desc' },
+			]);
+			expect(mockSafeNavigate).toHaveBeenCalledWith(
+				expectedLink(exportQuery, PANEL_TYPES.LIST),
+			);
+		});
+
+		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
+			'%s: staged query untouched, same panel type',
+			async (panelType) => {
+				const exportQuery = getLogsExportQuery(staged, panelType) as Query;
+
+				await exportTo(exportQuery, DataSource.LOGS, panelType);
+
+				expect(exportQuery).toBe(staged);
+				expect(mockSafeNavigate).toHaveBeenCalledWith(
+					expectedLink(staged, panelType),
+				);
+			},
+		);
+	});
+
+	describe('traces, the query the page hands over per view', () => {
+		const staged = stagedQuery(DataSource.TRACES);
+
+		it('list: list shaping plus the selected columns, panel type list', async () => {
+			const exportQuery = getTracesExportQuery(
+				getTracesQueryByPanelType(staged, PANEL_TYPES.LIST),
+				getExportPanelType(PANEL_TYPES.LIST),
+				options,
+			);
+
+			await exportTo(exportQuery, DataSource.TRACES, PANEL_TYPES.LIST);
+
+			const [queryData] = exportQuery.builder.queryData;
+			expect(queryData.selectColumns).toStrictEqual(COLUMNS);
+			expect(queryData.groupBy).toStrictEqual([]);
+			expect(mockSafeNavigate).toHaveBeenCalledWith(
+				expectedLink(exportQuery, PANEL_TYPES.LIST),
+			);
+		});
+
+		it('trace: list shaping, no columns, panel type folds to time series', async () => {
+			const exportQuery = getTracesExportQuery(
+				getTracesQueryByPanelType(staged, PANEL_TYPES.TRACE),
+				getExportPanelType(PANEL_TYPES.TRACE),
+				options,
+			);
+
+			await exportTo(exportQuery, DataSource.TRACES, PANEL_TYPES.TRACE);
+
+			expect(exportQuery.builder.queryData[0].selectColumns).toBeUndefined();
+			expect(mockSafeNavigate).toHaveBeenCalledWith(
+				expectedLink(exportQuery, PANEL_TYPES.TIME_SERIES),
+			);
+		});
+
+		// Same as the alert: the list / trace order lives in ListView state and the
+		// page shapes the export without it, so the panel query has no order by.
+		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
+			'%s: order by is not carried into the panel query',
+			async (panelType) => {
+				expect(staged.builder.queryData[0].orderBy).toHaveLength(1);
+				const exportQuery = getTracesExportQuery(
+					getTracesQueryByPanelType(staged, panelType),
+					getExportPanelType(panelType),
+					options,
+				);
+
+				await exportTo(exportQuery, DataSource.TRACES, panelType);
+
+				expect(exportQuery.builder.queryData[0].orderBy).toStrictEqual([]);
+				expect(mockSafeNavigate).toHaveBeenCalledWith(
+					expectedLink(exportQuery, getExportPanelType(panelType)),
+				);
+			},
+		);
+
+		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
+			'%s: staged query untouched, same panel type',
+			async (panelType) => {
+				const exportQuery = getTracesExportQuery(
+					getTracesQueryByPanelType(staged, panelType),
+					getExportPanelType(panelType),
+					options,
+				);
+
+				await exportTo(exportQuery, DataSource.TRACES, panelType);
+
+				expect(exportQuery).toBe(staged);
+				expect(mockSafeNavigate).toHaveBeenCalledWith(
+					expectedLink(staged, panelType),
+				);
+			},
+		);
+	});
+
+	it('metrics: the chart query as is, panel type time series from the page', async () => {
+		const query = stagedQuery(DataSource.METRICS);
+
+		await exportTo(
+			query,
+			DataSource.METRICS,
+			PANEL_TYPES.TIME_SERIES,
+			PANEL_TYPES.TIME_SERIES,
+		);
+
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expectedLink(query, PANEL_TYPES.TIME_SERIES),
+		);
+	});
+});

frontend/src/container/ExplorerActions/__tests__/CreateAlertButton.test.tsx

@@ -0,0 +1,224 @@
+import { useHistory } from 'react-router-dom';
+import logEvent from 'api/common/logEvent';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import {
+	getExportQueryData as getLogsExportQuery,
+	getQueryByPanelType as getLogsQueryByPanelType,
+} from 'container/LogsExplorerViews/explorerUtils';
+import { getQueryByPanelType as getTracesQueryByPanelType } from 'container/TracesExplorer/explorerUtils';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { render, screen, userEvent } from 'tests/test-utils';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource, StringOperators } from 'types/common/queryBuilder';
+
+import CreateAlertButton from '../CreateAlertButton';
+import { EXPLORER_ACTION_EVENTS } from '../utils';
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useHistory: jest.fn(),
+}));
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: jest.fn(),
+}));
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(() => Promise.resolve()),
+}));
+
+const mockPush = jest.fn();
+const mockedUseHistory = jest.mocked(useHistory);
+const mockedUseQueryBuilder = jest.mocked(useQueryBuilder);
+const mockedLogEvent = jest.mocked(logEvent);
+
+const FILTER = "service.name = 'frontend'";
+const ORDER_BY = [{ columnName: 'timestamp', order: 'asc' }];
+
+function stagedQuery(
+	dataSource: DataSource,
+	aggregateOperator: StringOperators,
+	queryName = 'A',
+): Query {
+	const base = initialQueriesMap[dataSource];
+	return {
+		...base,
+		id: `query-${queryName}`,
+		builder: {
+			...base.builder,
+			queryData: [
+				{
+					...base.builder.queryData[0],
+					queryName,
+					aggregateOperator,
+					filter: { expression: FILTER },
+					orderBy: ORDER_BY,
+					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
+				},
+			],
+		},
+	} as Query;
+}
+
+function pushedQuery(): Query {
+	expect(mockPush).toHaveBeenCalledTimes(1);
+	const [path, search] = (mockPush.mock.calls[0][0] as string).split('?');
+	expect(path).toBe(ROUTES.ALERTS_NEW);
+	const raw = new URLSearchParams(search).get(QueryParams.compositeQuery);
+	return JSON.parse(raw as string);
+}
+
+function setPanelType(panelType: PANEL_TYPES): void {
+	mockedUseQueryBuilder.mockReturnValue({ panelType } as ReturnType<
+		typeof useQueryBuilder
+	>);
+}
+
+async function clickCreateAlert(
+	query: Query | null,
+	sourcepage: DataSource,
+	panelType: PANEL_TYPES,
+): Promise<void> {
+	setPanelType(panelType);
+	render(<CreateAlertButton query={query} sourcepage={sourcepage} />);
+	await userEvent.setup().click(screen.getByTestId('explorer-create-alert'));
+}
+
+describe('CreateAlertButton', () => {
+	beforeEach(() => {
+		mockPush.mockReset();
+		mockedLogEvent.mockClear();
+		mockedUseHistory.mockReturnValue({ push: mockPush } as unknown as ReturnType<
+			typeof useHistory
+		>);
+	});
+
+	it('is disabled and does nothing without a query', async () => {
+		await clickCreateAlert(null, DataSource.LOGS, PANEL_TYPES.LIST);
+
+		expect(screen.getByTestId('explorer-create-alert')).toBeDisabled();
+		expect(mockPush).not.toHaveBeenCalled();
+	});
+
+	it('logs one event with the source page', async () => {
+		const query = stagedQuery(DataSource.TRACES, StringOperators.COUNT);
+
+		await clickCreateAlert(query, DataSource.TRACES, PANEL_TYPES.TIME_SERIES);
+
+		expect(mockedLogEvent).toHaveBeenCalledWith(
+			EXPLORER_ACTION_EVENTS.createAlert,
+			{
+				sourcepage: DataSource.TRACES,
+				panelType: PANEL_TYPES.TIME_SERIES,
+			},
+		);
+	});
+
+	describe('logs, the query the page hands over per view', () => {
+		const staged = stagedQuery(DataSource.LOGS, StringOperators.NOOP);
+
+		it('list: count aggregation, no order by, filter and pagination as the page sent them', async () => {
+			const listRequest = getLogsQueryByPanelType(staged, PANEL_TYPES.LIST, {
+				page: 1,
+				pageSize: 100,
+				filters: { items: [], op: 'AND' },
+				filter: { expression: FILTER },
+			});
+			const exportQuery = getLogsExportQuery(
+				listRequest,
+				PANEL_TYPES.LIST,
+			) as Query;
+
+			await clickCreateAlert(exportQuery, DataSource.LOGS, PANEL_TYPES.LIST);
+
+			const [queryData] = pushedQuery().builder.queryData;
+			expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
+			expect(queryData.orderBy).toStrictEqual([]);
+			expect(queryData.groupBy).toStrictEqual([]);
+			expect(queryData.filter).toStrictEqual({ expression: FILTER });
+			expect(queryData.pageSize).toBe(100);
+		});
+
+		it('time series: staged query as is, order by and group by kept', async () => {
+			const tsStaged = stagedQuery(DataSource.LOGS, StringOperators.COUNT);
+			const exportQuery = getLogsExportQuery(
+				tsStaged,
+				PANEL_TYPES.TIME_SERIES,
+			) as Query;
+
+			await clickCreateAlert(
+				exportQuery,
+				DataSource.LOGS,
+				PANEL_TYPES.TIME_SERIES,
+			);
+
+			const [queryData] = pushedQuery().builder.queryData;
+			expect(queryData).toStrictEqual(tsStaged.builder.queryData[0]);
+		});
+
+		it('table: staged query as is', async () => {
+			const tableStaged = stagedQuery(DataSource.LOGS, StringOperators.COUNT);
+			const exportQuery = getLogsExportQuery(
+				tableStaged,
+				PANEL_TYPES.TABLE,
+			) as Query;
+
+			await clickCreateAlert(exportQuery, DataSource.LOGS, PANEL_TYPES.TABLE);
+
+			expect(pushedQuery().builder).toStrictEqual(tableStaged.builder);
+		});
+	});
+
+	describe('traces, the query the page hands over per view', () => {
+		const staged = stagedQuery(DataSource.TRACES, StringOperators.NOOP);
+
+		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
+			'%s: count aggregation, group by cleared by the list shaping, filter kept',
+			async (panelType) => {
+				const exportQuery = getTracesQueryByPanelType(staged, panelType);
+
+				await clickCreateAlert(exportQuery, DataSource.TRACES, panelType);
+
+				const [queryData] = pushedQuery().builder.queryData;
+				expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
+				expect(queryData.groupBy).toStrictEqual([]);
+				expect(queryData.filter).toStrictEqual({ expression: FILTER });
+			},
+		);
+
+		// The list / trace views keep their order in ListView state, and the page
+		// shapes the export without it, so the alert never sees an order by.
+		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
+			'%s: order by is not carried, even when the staged query has one',
+			async (panelType) => {
+				expect(staged.builder.queryData[0].orderBy).toStrictEqual(ORDER_BY);
+				const exportQuery = getTracesQueryByPanelType(staged, panelType);
+
+				await clickCreateAlert(exportQuery, DataSource.TRACES, panelType);
+
+				expect(pushedQuery().builder.queryData[0].orderBy).toStrictEqual([]);
+			},
+		);
+
+		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
+			'%s: staged query as is',
+			async (panelType) => {
+				const aggStaged = stagedQuery(DataSource.TRACES, StringOperators.COUNT);
+				const exportQuery = getTracesQueryByPanelType(aggStaged, panelType);
+
+				await clickCreateAlert(exportQuery, DataSource.TRACES, panelType);
+
+				expect(pushedQuery().builder).toStrictEqual(aggStaged.builder);
+			},
+		);
+	});
+
+	it('metrics: the chart query as is', async () => {
+		const query = stagedQuery(DataSource.METRICS, StringOperators.COUNT);
+
+		await clickCreateAlert(query, DataSource.METRICS, PANEL_TYPES.TIME_SERIES);
+
+		expect(pushedQuery().builder).toStrictEqual(query.builder);
+	});
+});

frontend/src/container/ExplorerActions/__tests__/utils.test.ts

@@ -0,0 +1,144 @@
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { StringOperators } from 'types/common/queryBuilder';
+
+import { getCreateAlertLink, getExportPanelType } from '../utils';
+
+function withFirstQuery(
+	base: Query,
+	overrides: Partial<Query['builder']['queryData'][number]>,
+): Query {
+	return {
+		...base,
+		builder: {
+			...base.builder,
+			queryData: [{ ...base.builder.queryData[0], ...overrides }],
+		},
+	};
+}
+
+function decodeQuery(link: string): Query {
+	const search = link.split('?')[1];
+	const raw = new URLSearchParams(search).get(QueryParams.compositeQuery);
+	return JSON.parse(raw as string);
+}
+
+describe('getExportPanelType', () => {
+	it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE, PANEL_TYPES.LIST])(
+		'keeps %s',
+		(panelType) => {
+			expect(getExportPanelType(panelType)).toBe(panelType);
+		},
+	);
+
+	it.each([PANEL_TYPES.BAR, PANEL_TYPES.PIE, PANEL_TYPES.TRACE, null])(
+		'folds %s to time series',
+		(panelType) => {
+			expect(getExportPanelType(panelType)).toBe(PANEL_TYPES.TIME_SERIES);
+		},
+	);
+});
+
+describe('getCreateAlertLink', () => {
+	const orderBy = [{ columnName: 'timestamp', order: 'desc' }];
+
+	it('points at the new alert route with the query in the url', () => {
+		const query = initialQueriesMap.traces;
+		const link = getCreateAlertLink({
+			query,
+			panelType: PANEL_TYPES.TIME_SERIES,
+		});
+
+		expect(link.startsWith(`${ROUTES.ALERTS_NEW}?`)).toBe(true);
+		expect(decodeQuery(link)).toStrictEqual(query);
+	});
+
+	it('logs list: noop becomes count and order by is dropped', () => {
+		const query = withFirstQuery(initialQueriesMap.logs, {
+			aggregateOperator: StringOperators.NOOP,
+			orderBy,
+		});
+
+		const [queryData] = decodeQuery(
+			getCreateAlertLink({
+				query,
+				panelType: PANEL_TYPES.LIST,
+			}),
+		).builder.queryData;
+
+		expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
+		expect(queryData.orderBy).toStrictEqual([]);
+	});
+
+	it('logs time series keeps order by', () => {
+		const query = withFirstQuery(initialQueriesMap.logs, {
+			aggregateOperator: StringOperators.COUNT,
+			orderBy,
+		});
+
+		const [queryData] = decodeQuery(
+			getCreateAlertLink({
+				query,
+				panelType: PANEL_TYPES.TIME_SERIES,
+			}),
+		).builder.queryData;
+
+		expect(queryData.orderBy).toStrictEqual(orderBy);
+	});
+
+	it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
+		'%s drops order by whatever the source',
+		(panelType) => {
+			const query = withFirstQuery(initialQueriesMap.traces, {
+				aggregateOperator: StringOperators.NOOP,
+				orderBy,
+			});
+
+			const [queryData] = decodeQuery(getCreateAlertLink({ query, panelType }))
+				.builder.queryData;
+
+			expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
+			expect(queryData.orderBy).toStrictEqual([]);
+		},
+	);
+
+	it('converts a noop on any query, not only the first', () => {
+		const first = initialQueriesMap.logs.builder.queryData[0];
+		const query: Query = {
+			...initialQueriesMap.logs,
+			builder: {
+				...initialQueriesMap.logs.builder,
+				queryData: [
+					{ ...first, aggregateOperator: StringOperators.COUNT },
+					{ ...first, queryName: 'B', aggregateOperator: StringOperators.NOOP },
+				],
+			},
+		};
+
+		const operators = decodeQuery(
+			getCreateAlertLink({ query, panelType: PANEL_TYPES.TIME_SERIES }),
+		).builder.queryData.map((item) => item.aggregateOperator);
+
+		expect(operators).toStrictEqual([
+			StringOperators.COUNT,
+			StringOperators.COUNT,
+		]);
+	});
+
+	it('does not mutate the query it is given', () => {
+		const query = withFirstQuery(initialQueriesMap.logs, {
+			aggregateOperator: StringOperators.NOOP,
+			orderBy,
+		});
+		const snapshot = JSON.stringify(query);
+
+		getCreateAlertLink({
+			query,
+			panelType: PANEL_TYPES.LIST,
+		});
+
+		expect(JSON.stringify(query)).toBe(snapshot);
+	});
+});

frontend/src/container/ExplorerActions/utils.ts

@@ -0,0 +1,46 @@
+import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { cloneDeep } from 'lodash-es';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { StringOperators } from 'types/common/queryBuilder';
+
+export const EXPLORER_ACTION_EVENTS = {
+	createAlert: 'Explorer: Create alert clicked',
+	addToDashboard: 'Explorer: Add to dashboard clicked',
+	exported: 'Explorer: Add to dashboard successful',
+} as const;
+
+export function getExportPanelType(panelType: PANEL_TYPES | null): PANEL_TYPES {
+	return panelType && AVAILABLE_EXPORT_PANEL_TYPES.includes(panelType)
+		? panelType
+		: PANEL_TYPES.TIME_SERIES;
+}
+
+// Alerts need an aggregation, and list style views carry an order the alert
+// cannot use.
+export function getCreateAlertLink({
+	query,
+	panelType,
+}: {
+	query: Query;
+	panelType: PANEL_TYPES | null;
+}): string {
+	const isListStyle =
+		panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE;
+
+	const alertQuery = cloneDeep(query);
+	alertQuery.builder.queryData = alertQuery.builder.queryData.map((item) => ({
+		...item,
+		aggregateOperator:
+			item.aggregateOperator === StringOperators.NOOP
+				? StringOperators.COUNT
+				: item.aggregateOperator,
+		orderBy: isListStyle ? [] : item.orderBy,
+	}));
+
+	return `${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
+		JSON.stringify(alertQuery),
+	)}`;
+}

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
@@ -6,7 +6,6 @@ import FieldsSelector from 'components/FieldsSelector';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { LOGS_REQUIRED_COLUMNS } from 'container/OptionsMenu/constants';
 import { ArrowUp10, Minus } from '@signozhq/icons';
@@ -14,18 +13,18 @@ import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 function LogsActionsContainer({
 	listQuery,
-	selectedPanelType,
 	showFrequencyChart,
 	handleToggleFrequencyChart,
 	orderBy,
 	setOrderBy,
+	explorerActions,
 }: {
 	listQuery: any;
-	selectedPanelType: PANEL_TYPES;
 	showFrequencyChart: boolean;
 	handleToggleFrequencyChart: () => void;
 	orderBy: string;
 	setOrderBy: (value: string) => void;
+	explorerActions: ReactNode;
 }): JSX.Element {
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@@ -60,48 +59,43 @@ function LogsActionsContainer({
 		<div className="logs-actions-container">
 			<div className="tab-options">
 				<div className="tab-options-left">
-					{selectedPanelType === PANEL_TYPES.LIST && (
-						<div className="frequency-chart-view-controller">
-							<Typography>Frequency chart</Typography>
-							<Switch
-								value={showFrequencyChart}
-								defaultValue
-								onChange={handleToggleFrequencyChart}
-							/>
-						</div>
-					)}
+					<div className="frequency-chart-view-controller">
+						<Typography>Frequency chart</Typography>
+						<Switch
+							value={showFrequencyChart}
+							defaultValue
+							onChange={handleToggleFrequencyChart}
+						/>
+					</div>
 				</div>
 
 				<div className="tab-options-right">
-					{selectedPanelType === PANEL_TYPES.LIST && (
-						<>
-							<div className="order-by-container">
-								<div className="order-by-label">
-									Order by <Minus size={14} /> <ArrowUp10 size={14} />
-								</div>
+					{explorerActions}
+					<div className="order-by-container">
+						<div className="order-by-label">
+							Order by <Minus size={14} /> <ArrowUp10 size={14} />
+						</div>
 
-								<ListViewOrderBy
-									value={orderBy}
-									onChange={(value): void => setOrderBy(value)}
-									dataSource={DataSource.LOGS}
-								/>
-							</div>
-							<div className="download-options-container">
-								<DownloadOptionsMenu
-									dataSource={DataSource.LOGS}
-									selectedColumns={options?.selectColumns}
-								/>
-							</div>
-							<div className="format-options-container">
-								<LogsFormatOptionsMenu
-									items={formatItems}
-									selectedOptionFormat={options.format}
-									config={config}
-									onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
-								/>
-							</div>
-						</>
-					)}
+						<ListViewOrderBy
+							value={orderBy}
+							onChange={(value): void => setOrderBy(value)}
+							dataSource={DataSource.LOGS}
+						/>
+					</div>
+					<div className="download-options-container">
+						<DownloadOptionsMenu
+							dataSource={DataSource.LOGS}
+							selectedColumns={options?.selectColumns}
+						/>
+					</div>
+					<div className="format-options-container">
+						<LogsFormatOptionsMenu
+							items={formatItems}
+							selectedOptionFormat={options.format}
+							config={config}
+							onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
+						/>
+					</div>
 				</div>
 			</div>
 			{config.fieldsSelector && (

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

@@ -187,6 +187,7 @@
 					display: flex;
 					justify-content: flex-end;
 					align-items: center;
+					gap: 8px;
 					padding: 12px;
 					flex-shrink: 0;
 				}

frontend/src/container/LogsExplorerViews/index.tsx

@@ -37,6 +37,7 @@ import {
 	getListQuery,
 	getQueryByPanelType,
 } from 'container/LogsExplorerViews/explorerUtils';
+import ExplorerActions from 'container/ExplorerActions/ExplorerActions';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
@@ -140,6 +141,10 @@ function LogsExplorerViewsContainer({
 		[selectedPanelType, requestData],
 	);
 
+	const explorerActions = (
+		<ExplorerActions query={exportDefaultQuery} sourcepage={DataSource.LOGS} />
+	);
+
 	const {
 		data: listChartData,
 		isFetching: isFetchingListChartData,
@@ -416,14 +421,14 @@ function LogsExplorerViewsContainer({
 	return (
 		<div className="logs-explorer-views-container">
 			<div className="logs-explorer-views-types">
-				{!showLiveLogs && (
+				{!showLiveLogs && selectedPanelType === PANEL_TYPES.LIST && (
 					<LogsActionsContainer
 						listQuery={listQuery}
-						selectedPanelType={selectedPanelType}
 						showFrequencyChart={showFrequencyChart}
 						handleToggleFrequencyChart={handleToggleFrequencyChart}
 						orderBy={orderBy}
 						setOrderBy={setOrderBy}
+						explorerActions={explorerActions}
 					/>
 				)}
 
@@ -474,21 +479,23 @@ function LogsExplorerViewsContainer({
 								dataSource={DataSource.LOGS}
 								setWarning={setWarning}
 								allowExport
+								headerActions={explorerActions}
 							/>
 						</div>
 					)}
 					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
 						<div className="table-view-container">
-							{data && !isError && (
-								<div className="table-view-container-header">
+							<div className="table-view-container-header">
+								{explorerActions}
+								{data && !isError && (
 									<ExportMenu
 										dataSource={DataSource.LOGS}
 										data={data}
 										query={stagedQuery || initialQueriesMap.metrics}
 										fileName="logs-table"
 									/>
-								</div>
-							)}
+								)}
+							</div>
 							<LogsExplorerTable
 								data={
 									(data?.payload?.data?.newResult?.data?.result ||

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

@@ -394,6 +394,7 @@ function Explorer(): JSX.Element {
 						setYAxisUnit={setYAxisUnit}
 						showYAxisUnitSelector={showYAxisUnitSelector}
 						isCancelled={isCancelled}
+						exportDefaultQuery={exportDefaultQuery}
 					/>
 				</div>
 			</div>

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

@@ -19,6 +19,7 @@ import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import ExplorerActions from 'container/ExplorerActions/ExplorerActions';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -51,6 +52,7 @@ function TimeSeries({
 	showYAxisUnitSelector,
 	metrics,
 	isCancelled = false,
+	exportDefaultQuery,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -272,6 +274,9 @@ function TimeSeries({
 							metricName;
 
 						const currentYAxisUnit = yAxisUnit || metricUnit;
+						const exportQuery = changeLayoutForOneChartPerQuery
+							? queryPayloads[index]
+							: exportDefaultQuery;
 
 						return (
 							<div
@@ -312,6 +317,14 @@ function TimeSeries({
 									error={queries[index].error as APIError}
 									setWarning={setWarning}
 									allowExport
+									headerActions={
+										<ExplorerActions
+											query={stagedQuery ? exportQuery : null}
+											sourcepage={DataSource.METRICS}
+											panelType={PANEL_TYPES.TIME_SERIES}
+											iconOnly={changeLayoutForOneChartPerQuery}
+										/>
+									}
 								/>
 							</div>
 						);

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

@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { render, screen } from '@testing-library/react';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 import {
 	MetrictypesTemporalityDTO,
 	MetrictypesTypeDTO,
@@ -146,9 +147,11 @@ function renderExplorer(): void {
 		<QueryClientProvider client={queryClient}>
 			<MemoryRouter>
 				<Provider store={store}>
-					<ErrorModalProvider>
-						<Explorer />
-					</ErrorModalProvider>
+					<TooltipProvider>
+						<ErrorModalProvider>
+							<Explorer />
+						</ErrorModalProvider>
+					</TooltipProvider>
 				</Provider>
 			</MemoryRouter>
 		</QueryClientProvider>,

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as metricsExplorerHooks from 'api/generated/services/metrics';
+import { initialQueriesMap } from 'constants/queryBuilder';
 
 import TimeSeries from '../TimeSeries';
 import { TimeSeriesProps } from '../types';
@@ -71,6 +72,7 @@ function renderTimeSeries(
 			yAxisUnit="count"
 			setYAxisUnit={mockSetYAxisUnit}
 			showYAxisUnitSelector={false}
+			exportDefaultQuery={initialQueriesMap.metrics}
 			{...overrides}
 		/>,
 	);

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

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { Warning } from 'types/api';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 export interface TimeSeriesProps {
 	onFetchingStateChange?: (isFetching: boolean) => void;
@@ -17,4 +18,5 @@ export interface TimeSeriesProps {
 	setYAxisUnit: (unit: string) => void;
 	showYAxisUnitSelector: boolean;
 	isCancelled?: boolean;
+	exportDefaultQuery: Query;
 }

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

@@ -11,6 +11,12 @@
 		flex-shrink: 0;
 	}
 
+	&__header-actions {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
 	.ant-card-body {
 		height: 50vh;
 		min-height: 350px;

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -1,5 +1,6 @@
 import {
 	Dispatch,
+	ReactNode,
 	SetStateAction,
 	useCallback,
 	useEffect,
@@ -66,6 +67,7 @@ function TimeSeriesView({
 	allowExport = false,
 	exportFileName,
 	onYAxisUnitChange,
+	headerActions,
 }: TimeSeriesViewProps): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 
@@ -252,7 +254,7 @@ function TimeSeriesView({
 	);
 
 	const showExport = allowExport && !!data?.rawV5Response;
-	const showHeader = showExport || !!onYAxisUnitChange;
+	const showHeader = showExport || !!onYAxisUnitChange || !!headerActions;
 
 	return (
 		<div className="time-series-view">
@@ -265,15 +267,18 @@ function TimeSeriesView({
 							<BuilderUnitsFilter onChange={onYAxisUnitChange} yAxisUnit={yAxisUnit} />
 						)}
 					</div>
-					{showExport && data?.rawV5Response && (
-						<ExportMenu
-							dataSource={dataSource}
-							yAxisUnit={yAxisUnit}
-							data={data}
-							query={currentQuery}
-							fileName={exportFileName ?? `${dataSource}-timeseries`}
-						/>
-					)}
+					<div className="time-series-view__header-actions">
+						{headerActions}
+						{showExport && data?.rawV5Response && (
+							<ExportMenu
+								dataSource={dataSource}
+								yAxisUnit={yAxisUnit}
+								data={data}
+								query={currentQuery}
+								fileName={exportFileName ?? `${dataSource}-timeseries`}
+							/>
+						)}
+					</div>
 				</div>
 			)}
 
@@ -344,6 +349,8 @@ interface TimeSeriesViewProps {
 	// 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;
+	// Rendered in the header ahead of the export menu.
+	headerActions?: ReactNode;
 }
 
 TimeSeriesView.defaultProps = {

frontend/src/container/TracesExplorer/ListView/index.tsx

@@ -2,6 +2,7 @@ import {
 	Dispatch,
 	memo,
 	MutableRefObject,
+	ReactNode,
 	SetStateAction,
 	useCallback,
 	useEffect,
@@ -55,6 +56,7 @@ interface ListViewProps {
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
 	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
 	queryKeyRef?: MutableRefObject<any>;
+	headerActions?: ReactNode;
 }
 
 function ListView({
@@ -62,6 +64,7 @@ function ListView({
 	setWarning,
 	setIsLoadingQueries,
 	queryKeyRef,
+	headerActions,
 }: ListViewProps): JSX.Element {
 	const { stagedQuery, panelType: panelTypeFromQueryBuilder } =
 		useQueryBuilder();
@@ -227,6 +230,7 @@ function ListView({
 	return (
 		<div className={styles.container}>
 			<div className="trace-explorer-controls">
+				{headerActions}
 				<div className="order-by-container">
 					<div className="order-by-label">
 						Order by <Minus size={14} /> <ArrowUp10 size={14} />
@@ -272,6 +276,7 @@ function ListView({
 
 ListView.defaultProps = {
 	queryKeyRef: undefined,
+	headerActions: undefined,
 };
 
 export default memo(ListView);

frontend/src/container/TracesExplorer/TableView/TableView.styles.scss

@@ -2,6 +2,7 @@
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;
+	gap: 8px;
 	padding: 12px;
 	flex-shrink: 0;
 }

frontend/src/container/TracesExplorer/TableView/index.tsx

@@ -2,6 +2,7 @@ import {
 	Dispatch,
 	memo,
 	MutableRefObject,
+	ReactNode,
 	SetStateAction,
 	useEffect,
 	useMemo,
@@ -30,10 +31,12 @@ function TableView({
 	setWarning,
 	setIsLoadingQueries,
 	queryKeyRef,
+	headerActions,
 }: {
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
 	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
 	queryKeyRef?: MutableRefObject<any>;
+	headerActions?: ReactNode;
 }): JSX.Element {
 	const { stagedQuery, panelType } = useQueryBuilder();
 
@@ -101,14 +104,17 @@ function TableView({
 	return (
 		<Space.Compact block direction="vertical">
 			{isError && error && <ErrorInPlace error={error as APIError} />}
-			{!isError && data && (
+			{!isError && (
 				<div className="traces-table-view-header">
-					<ExportMenu
-						dataSource={DataSource.TRACES}
-						data={data}
-						query={stagedQuery || initialQueriesMap.traces}
-						fileName="traces-table"
-					/>
+					{headerActions}
+					{data && (
+						<ExportMenu
+							dataSource={DataSource.TRACES}
+							data={data}
+							query={stagedQuery || initialQueriesMap.traces}
+							fileName="traces-table"
+						/>
+					)}
 				</div>
 			)}
 			{!isError && (
@@ -125,6 +131,7 @@ function TableView({
 
 TableView.defaultProps = {
 	queryKeyRef: undefined,
+	headerActions: undefined,
 };
 
 export default memo(TableView);

frontend/src/container/TracesExplorer/TracesView/index.tsx

@@ -2,6 +2,7 @@ import {
 	Dispatch,
 	memo,
 	MutableRefObject,
+	ReactNode,
 	SetStateAction,
 	useEffect,
 	useMemo,
@@ -40,6 +41,7 @@ interface TracesViewProps {
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
 	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
 	queryKeyRef?: MutableRefObject<any>;
+	headerActions?: ReactNode;
 }
 
 function TracesView({
@@ -47,6 +49,7 @@ function TracesView({
 	setWarning,
 	setIsLoadingQueries,
 	queryKeyRef,
+	headerActions,
 }: TracesViewProps): JSX.Element {
 	const { stagedQuery, panelType } = useQueryBuilder();
 
@@ -155,6 +158,7 @@ function TracesView({
 				</Typography>
 
 				<div className="trace-explorer-controls">
+					{headerActions}
 					<DownloadOptionsMenu
 						dataSource={DataSource.TRACES}
 						panelType={PANEL_TYPES.TRACE}
@@ -187,6 +191,7 @@ function TracesView({
 
 TracesView.defaultProps = {
 	queryKeyRef: undefined,
+	headerActions: undefined,
 };
 
 export default memo(TracesView);

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

@@ -1,100 +0,0 @@
-// Surface matches the shared Tooltip: same tokens, same radius, no shadow.
-// Padding lives on the sections so a footer can reach the container edges.
-.container {
-	font-family: 'Inter';
-	font-size: 12px;
-	background: var(--l2-background);
-	-webkit-font-smoothing: antialiased;
-	color: var(--l2-foreground);
-	border-radius: 6px;
-	border: 1px solid var(--l2-border);
-	display: flex;
-	flex-direction: column;
-	min-width: 200px;
-
-	&.pinned {
-		border-color: var(--ring);
-	}
-}
-
-.divider {
-	display: block;
-	width: 100%;
-	height: 1px;
-	background-color: var(--l2-border);
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	padding: var(--spacing-3) var(--spacing-4);
-}
-
-// Matches the legend row's marker.
-.marker {
-	width: 10px;
-	height: 10px;
-	border-radius: var(--radius);
-	flex-shrink: 0;
-}
-
-.title {
-	flex: 1;
-	min-width: 0;
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	font-weight: 600;
-	color: var(--text-vanilla-100);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.status {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-1);
-	font-size: 11px;
-	color: var(--text-vanilla-400);
-	flex-shrink: 0;
-}
-
-.rows {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-1);
-	padding: var(--spacing-3) var(--spacing-4);
-}
-
-.row {
-	display: flex;
-	align-items: baseline;
-	justify-content: space-between;
-	gap: var(--spacing-4);
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	font-variant-numeric: tabular-nums;
-	color: var(--text-vanilla-100);
-}
-
-// The group values name the point; the channels are what it says.
-.rowMuted {
-	color: var(--text-vanilla-400);
-}
-
-.rowLabel {
-	flex: 1;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.rowValue {
-	flex: 0 0 auto;
-	max-width: 60%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}

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

@@ -1,111 +0,0 @@
-import { useMemo } from 'react';
-import cx from 'classnames';
-import { Pin } from '@signozhq/icons';
-
-import { ScatterTooltipProps } from '../types';
-import { buildChannelRows, resolveHoveredPoint } from './scatterTooltipContent';
-
-import Styles from './ScatterTooltip.module.scss';
-
-/**
- * One point, its channels, then the group values that name it. Purpose-built
- * rather than composed from the shared `Tooltip`, whose list is one row per
- * series at a shared x; a scatter point has no such neighbours.
- */
-export default function ScatterTooltip({
-	uPlotInstance,
-	dataIndexes,
-	seriesIndex,
-	channels,
-	resolvePointLabels,
-	decimalPrecision,
-	isPinned,
-	dismiss,
-	renderTooltipFooter,
-}: ScatterTooltipProps): JSX.Element | null {
-	const point = useMemo(
-		() => resolveHoveredPoint(uPlotInstance, seriesIndex, dataIndexes),
-		[uPlotInstance, seriesIndex, dataIndexes],
-	);
-
-	const rows = useMemo(
-		() => (point ? buildChannelRows(point, channels, decimalPrecision) : []),
-		[point, channels, decimalPrecision],
-	);
-
-	const labels = useMemo(
-		() =>
-			point
-				? (resolvePointLabels?.(point.seriesIndex, point.dataIndex) ?? [])
-				: [],
-		[point, resolvePointLabels],
-	);
-
-	if (!point) {
-		return null;
-	}
-
-	return (
-		<div
-			className={cx(Styles.container, { [Styles.pinned]: isPinned })}
-			data-pinned={isPinned}
-			data-testid="scatter-tooltip"
-		>
-			<div className={Styles.header}>
-				<span className={Styles.marker} style={{ backgroundColor: point.color }} />
-				<span
-					className={Styles.title}
-					title={point.label}
-					data-testid="scatter-tooltip-title"
-				>
-					{point.label}
-				</span>
-				{isPinned && (
-					<span className={Styles.status} data-testid="scatter-tooltip-status">
-						<Pin size={12} />
-						<span>Pinned</span>
-					</span>
-				)}
-			</div>
-
-			<span className={Styles.divider} />
-
-			<div className={Styles.rows}>
-				{rows.map((row) => (
-					<div
-						key={row.label}
-						className={Styles.row}
-						data-testid="scatter-tooltip-row"
-					>
-						<span className={Styles.rowLabel}>{row.label}</span>
-						<span className={Styles.rowValue}>{row.value}</span>
-					</div>
-				))}
-			</div>
-
-			{labels.length > 0 && (
-				<>
-					<span className={Styles.divider} />
-					<div className={Styles.rows}>
-						{labels.map((label) => (
-							<div
-								key={label.key}
-								className={cx(Styles.row, Styles.rowMuted)}
-								data-testid="scatter-tooltip-label"
-							>
-								<span className={Styles.rowLabel} title={label.key}>
-									{label.key}
-								</span>
-								<span className={Styles.rowValue} title={label.value}>
-									{label.value}
-								</span>
-							</div>
-						))}
-					</div>
-				</>
-			)}
-
-			{renderTooltipFooter?.({ isPinned, dismiss })}
-		</div>
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/scatterTooltipContent.test.ts

@@ -1,94 +0,0 @@
-import type uPlot from 'uplot';
-
-import {
-	buildChannelRows,
-	resolveHoveredPoint,
-	ScatterHoveredPoint,
-} from '../scatterTooltipContent';
-
-jest.mock('components/Graph/yAxisConfig', () => ({
-	getToolTipValue: jest.fn((value: number | string, unit?: string) =>
-		`${value} ${unit ?? ''}`.trim(),
-	),
-}));
-
-const plot = {
-	data: [
-		null,
-		[
-			[10, 20],
-			[100, 200],
-			[5, null],
-		],
-		[[30], [300]],
-	],
-	series: [
-		{},
-		{ label: 'cart', stroke: '#ff0000' },
-		{ label: 'checkout', stroke: (): string => '#00ff00' },
-	],
-} as unknown as uPlot;
-
-describe('resolveHoveredPoint', () => {
-	it('reads the focused series at its own data index', () => {
-		expect(resolveHoveredPoint(plot, 1, [null, 1, null])).toStrictEqual({
-			seriesIndex: 1,
-			dataIndex: 1,
-			label: 'cart',
-			color: '#ff0000',
-			x: 20,
-			y: 200,
-			size: null,
-		});
-	});
-
-	it('carries the size column when present and resolves function strokes', () => {
-		expect(resolveHoveredPoint(plot, 1, [null, 0, null])?.size).toBe(5);
-		expect(resolveHoveredPoint(plot, 2, [null, null, 0])).toMatchObject({
-			label: 'checkout',
-			color: '#00ff00',
-			size: null,
-		});
-	});
-
-	it('is null without a focused series or an index for it', () => {
-		expect(resolveHoveredPoint(plot, null, [null, 0, null])).toBeNull();
-		expect(resolveHoveredPoint(plot, 0, [0, 0, null])).toBeNull();
-		expect(resolveHoveredPoint(plot, 1, [null, null, null])).toBeNull();
-	});
-});
-
-describe('buildChannelRows', () => {
-	const point: ScatterHoveredPoint = {
-		seriesIndex: 1,
-		dataIndex: 0,
-		label: 'cart',
-		color: '#f00',
-		x: 12,
-		y: 340,
-		size: 7,
-	};
-
-	it('formats x and y with their own units', () => {
-		const rows = buildChannelRows(point, {
-			x: { label: 'Throughput', unit: 'reqps' },
-			y: { label: 'p99', unit: 'ms' },
-		});
-
-		expect(rows).toStrictEqual([
-			{ label: 'Throughput', value: '12 reqps' },
-			{ label: 'p99', value: '340 ms' },
-		]);
-	});
-
-	it('adds the size row only when the channel is mapped and the point has one', () => {
-		const channels = {
-			x: { label: 'x' },
-			y: { label: 'y' },
-			size: { label: 'Errors' },
-		};
-
-		expect(buildChannelRows(point, channels)).toHaveLength(3);
-		expect(buildChannelRows({ ...point, size: null }, channels)).toHaveLength(2);
-	});
-});

frontend/src/lib/uPlotV2/components/Tooltip/scatterTooltipContent.ts

@@ -1,90 +0,0 @@
-import { PrecisionOption } from 'components/Graph/types';
-import { getToolTipValue } from 'components/Graph/yAxisConfig';
-import type uPlot from 'uplot';
-
-import type {
-	ScatterChannel,
-	ScatterChannels,
-	ScatterSeriesData,
-} from '../../plugins/ScatterPlugin/types';
-import { resolveSeriesColor } from './utils';
-
-export interface ScatterHoveredPoint {
-	seriesIndex: number;
-	dataIndex: number;
-	label: string;
-	color: string;
-	x: number;
-	y: number;
-	size: number | null;
-}
-
-export interface ScatterTooltipRow {
-	label: string;
-	value: string;
-}
-
-/** The point the cursor resolved to: the focused series' own index into its columns. */
-export function resolveHoveredPoint(
-	u: uPlot,
-	seriesIndex: number | null,
-	dataIndexes: Array<number | null>,
-): ScatterHoveredPoint | null {
-	if (seriesIndex == null || seriesIndex < 1) {
-		return null;
-	}
-	const dataIndex = dataIndexes[seriesIndex];
-	const series = u.series[seriesIndex];
-	const columns = u.data[seriesIndex] as unknown as
-		| ScatterSeriesData
-		| undefined;
-	if (dataIndex == null || !series || !columns) {
-		return null;
-	}
-	const x = columns[0][dataIndex];
-	const y = columns[1][dataIndex];
-	if (x == null || y == null) {
-		return null;
-	}
-	return {
-		seriesIndex,
-		dataIndex,
-		label: String(series.label ?? ''),
-		color: resolveSeriesColor(series.stroke, u, seriesIndex),
-		x,
-		y,
-		size: columns[2]?.[dataIndex] ?? null,
-	};
-}
-
-function formatChannel(
-	value: number,
-	channel: ScatterChannel,
-	decimalPrecision?: PrecisionOption,
-): string {
-	return getToolTipValue(value, channel.unit, decimalPrecision);
-}
-
-export function buildChannelRows(
-	point: ScatterHoveredPoint,
-	channels: ScatterChannels,
-	decimalPrecision?: PrecisionOption,
-): ScatterTooltipRow[] {
-	const rows: ScatterTooltipRow[] = [
-		{
-			label: channels.x.label,
-			value: formatChannel(point.x, channels.x, decimalPrecision),
-		},
-		{
-			label: channels.y.label,
-			value: formatChannel(point.y, channels.y, decimalPrecision),
-		},
-	];
-	if (channels.size && point.size != null) {
-		rows.push({
-			label: channels.size.label,
-			value: formatChannel(point.size, channels.size, decimalPrecision),
-		});
-	}
-	return rows;
-}

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

@@ -5,10 +5,6 @@ import uPlot from 'uplot';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { LegendItem } from '../config/types';
-import type {
-	ScatterChannels,
-	ScatterPointLabel,
-} from '../plugins/ScatterPlugin/types';
 import { SyncTooltipFilterMode } from '../plugins/TooltipPlugin/types';
 
 /**
@@ -107,17 +103,6 @@ export interface BarTooltipProps extends BaseTooltipProps, TooltipRenderArgs {
 export interface HistogramTooltipProps
 	extends BaseTooltipProps, TooltipRenderArgs {}
 
-/** Not part of `TooltipProps`: it describes one point's channels, not a series list. */
-export interface ScatterTooltipProps
-	extends BaseTooltipProps, TooltipRenderArgs {
-	channels: ScatterChannels;
-	/** The group values behind a point, e.g. `service.name` → `cart`. */
-	resolvePointLabels?: (
-		seriesIndex: number,
-		dataIndex: number,
-	) => ScatterPointLabel[];
-}
-
 export type TooltipProps =
 	| TimeSeriesTooltipProps
 	| BarTooltipProps

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

@@ -58,49 +58,32 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 	}
 
 	/**
-	 * Build values formatter for X-axis: time, or a value axis when a unit or
-	 * precision is given (scatter). Neither leaves uPlot's numeric default.
+	 * Build values formatter for X-axis (time)
 	 */
 	private buildXAxisValuesFormatter(): uPlot.Axis.Values | undefined {
-		const { isTimeAxis, yAxisUnit, decimalPrecision } = this.props;
+		const { isTimeAxis } = this.props;
 
 		if (isTimeAxis) {
 			return uPlotXAxisValuesFormat as uPlot.Axis.Values;
 		}
 
-		if (yAxisUnit !== undefined || decimalPrecision !== undefined) {
-			return this.buildValueAxisFormatter();
-		}
-
 		return undefined;
 	}
 
 	/**
-	 * Build values formatter for a value axis (values with units). A split outside
-	 * the scale's range gets no label: uPlot's arcsinh splits always include
-	 * ±threshold, and it would draw that label past the plot's edge.
+	 * Build values formatter for Y-axis (values with units)
 	 */
-	private buildValueAxisFormatter(): uPlot.Axis.Values {
-		const { yAxisUnit, decimalPrecision, scaleKey } = this.props;
+	private buildYAxisValuesFormatter(): uPlot.Axis.Values {
+		const { yAxisUnit, decimalPrecision } = this.props;
 
-		return (u, t): string[] => {
-			const scale = u?.scales?.[scaleKey];
-			const min = scale?.min ?? -Infinity;
-			const max = scale?.max ?? Infinity;
-			return t.map((v) => {
-				if (
-					v === null ||
-					v === undefined ||
-					Number.isNaN(v) ||
-					v < min ||
-					v > max
-				) {
+		return (_, t): string[] =>
+			t.map((v) => {
+				if (v === null || v === undefined || Number.isNaN(v)) {
 					return '';
 				}
 				const value = getToolTipValue(v.toString(), yAxisUnit, decimalPrecision);
 				return `${value}`;
 			});
-		};
 	}
 
 	/**
@@ -118,7 +101,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		return scaleKey === 'x'
 			? this.buildXAxisValuesFormatter()
 			: scaleKey === 'y'
-				? this.buildValueAxisFormatter()
+				? this.buildYAxisValuesFormatter()
 				: undefined;
 	}
 

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

@@ -19,7 +19,6 @@ import {
 	ConfigBuilder,
 	ConfigBuilderProps,
 	LegendItem,
-	PlotMode,
 	SelectionPreferencesSource,
 	StackMode,
 } from './types';
@@ -66,8 +65,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	private stackMode: StackMode = StackMode.None;
 
-	private mode: PlotMode = PlotMode.Aligned;
-
 	private cursor: Cursor | undefined;
 
 	private hooks: Hooks.Arrays = {};
@@ -163,15 +160,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		return this.stackMode;
 	}
 
-	/** Faceted series carry their own x column each; see `SeriesProps.facets`. */
-	setMode(mode: PlotMode): void {
-		this.mode = mode;
-	}
-
-	getMode(): PlotMode {
-		return this.mode;
-	}
-
 	/**
 	 * Add or merge a scale configuration
 	 */
@@ -524,10 +512,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			{} as Record<string, uPlot.Scale>,
 		);
 
-		if (this.mode === PlotMode.Faceted) {
-			config.mode = this.mode as number as uPlot.Mode;
-		}
-
 		config.hooks = this.hooks;
 		config.select = this.select;
 

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

@@ -93,7 +93,6 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 			time,
 			distr,
 			logBase,
-			asinhThreshold: this.props.asinhThreshold,
 		});
 
 		const { rangeConfig, hardMinOnly, hardMaxOnly, hasFixedRange } =

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

@@ -87,8 +87,6 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			lineConfig.fill = finalFillColor;
 		} else if (this.props.drawStyle === DrawStyle.Histogram) {
 			lineConfig.fill = `${finalFillColor}40`;
-		} else if (this.props.drawStyle === DrawStyle.Scatter) {
-			lineConfig.fill = `${finalFillColor}${toAlphaHex(resolveFillOpacity(fillOpacity))}`;
 		} else if (fillMode && fillMode !== FillMode.None) {
 			const resolvedOpacity = resolveFillOpacity(fillOpacity);
 			if (fillMode === FillMode.Solid) {
@@ -124,8 +122,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			return { paths: pathBuilder };
 		}
 
-		// Scatter without a `pathBuilder` has nothing to draw its discs with.
-		if (drawStyle === DrawStyle.Points || drawStyle === DrawStyle.Scatter) {
+		if (drawStyle === DrawStyle.Points) {
 			return { paths: (): null => null };
 		}
 
@@ -197,10 +194,6 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 		if (drawStyle === DrawStyle.Points) {
 			return true;
 		}
-		// The discs are the series path; uPlot's own points would double-draw them.
-		if (drawStyle === DrawStyle.Scatter) {
-			return false;
-		}
 		return !!showPoints;
 	}
 
@@ -225,7 +218,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 	}
 
 	getConfig(): ExtendedSeries {
-		const { scaleKey, label, spanGaps, show = true, metric, facets } = this.props;
+		const { scaleKey, label, spanGaps, show = true, metric } = this.props;
 
 		const resolvedLineColor = this.getLineColor();
 
@@ -253,7 +246,6 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			...pathConfig,
 			points: Object.keys(pointsConfig).length > 0 ? pointsConfig : undefined,
 			metric,
-			...(facets && { facets }),
 		};
 	}
 }

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

@@ -376,51 +376,3 @@ describe('UPlotAxisBuilder', () => {
 		expect(config.values).toBeDefined();
 	});
 });
-
-describe('UPlotAxisBuilder value x axis', () => {
-	it('formats a non-time x axis with its unit', () => {
-		(getToolTipValue as jest.Mock).mockReturnValue('1.2K req/s');
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'x', isTimeAxis: false, yAxisUnit: 'reqps' }),
-		).getConfig();
-
-		const values = (config.values as uPlot.Axis.DynamicValues)(
-			{} as uPlot,
-			[1200],
-			0,
-			0,
-			0,
-		);
-
-		expect(values).toStrictEqual(['1.2K req/s']);
-		expect(getToolTipValue).toHaveBeenCalledWith('1200', 'reqps', undefined);
-	});
-
-	it('leaves a non-time x axis to uPlot when nothing says how to format it', () => {
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'x', isTimeAxis: false }),
-		).getConfig();
-
-		expect(config.values).toBeUndefined();
-	});
-});
-
-describe('UPlotAxisBuilder out-of-range splits', () => {
-	it('leaves a split the scale cannot place unlabelled', () => {
-		(getToolTipValue as jest.Mock).mockImplementation((v: string) => `${v} ms`);
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'y', yAxisUnit: 'ms' }),
-		).getConfig();
-		const u = { scales: { y: { min: 0, max: 1000 } } } as unknown as uPlot;
-
-		const values = (config.values as uPlot.Axis.DynamicValues)(
-			u,
-			[-10, 0, 500, 5000],
-			0,
-			0,
-			0,
-		);
-
-		expect(values).toStrictEqual(['', '0 ms', '500 ms', '']);
-	});
-});

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

@@ -5,12 +5,7 @@ import {
 	STEP_INTERVAL_MULTIPLIER,
 } from '../../constants';
 import type { SeriesProps } from '../types';
-import {
-	DrawStyle,
-	PlotMode,
-	SelectionPreferencesSource,
-	StackMode,
-} from '../types';
+import { DrawStyle, SelectionPreferencesSource, StackMode } from '../types';
 import { UPlotConfigBuilder } from '../UPlotConfigBuilder';
 
 // Mock only the real boundary that hits localStorage
@@ -656,15 +651,3 @@ describe('UPlotConfigBuilder stacking', () => {
 		expect(builder.getConfig().bands).toStrictEqual([{ series: [1, 3] }]);
 	});
 });
-
-describe('UPlotConfigBuilder plot mode', () => {
-	it('leaves mode unset for aligned data and emits 2 when faceted', () => {
-		const aligned = new UPlotConfigBuilder({ id: 'aligned' });
-		expect(aligned.getConfig().mode).toBeUndefined();
-
-		const faceted = new UPlotConfigBuilder({ id: 'faceted' });
-		faceted.setMode(PlotMode.Faceted);
-		expect(faceted.getMode()).toBe(PlotMode.Faceted);
-		expect(faceted.getConfig().mode).toBe(2);
-	});
-});

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

@@ -399,39 +399,3 @@ describe('UPlotSeriesBuilder', () => {
 		expect(builder.getConfig().fill).toBeUndefined();
 	});
 });
-
-describe('UPlotSeriesBuilder scatter', () => {
-	it('draws through the given path builder and hides uPlot points', () => {
-		const pathBuilder = jest.fn();
-		const config = new UPlotSeriesBuilder(
-			createBaseProps({
-				drawStyle: DrawStyle.Scatter,
-				pathBuilder,
-				facets: [{ scale: 'x' }, { scale: 'y' }],
-				lineColor: '#ff0000',
-				fillOpacity: 0.5,
-				lineWidth: 1,
-				pointSize: 8,
-			}),
-		).getConfig();
-
-		expect(config.paths).toBe(pathBuilder);
-		expect(config.facets).toStrictEqual([{ scale: 'x' }, { scale: 'y' }]);
-		expect(config.points?.show).toBe(false);
-		expect(config.points?.size).toBe(8);
-		expect(config.stroke).toBe('#ff0000');
-		expect(config.width).toBe(1);
-		expect(config.fill).toBe('#ff000080');
-	});
-
-	it('draws nothing without a path builder', () => {
-		const config = new UPlotSeriesBuilder(
-			createBaseProps({ drawStyle: DrawStyle.Scatter }),
-		).getConfig();
-
-		expect(
-			(config.paths as uPlot.Series.PathBuilder)({} as uPlot, 1, 0, 0),
-		).toBeNull();
-		expect(config.facets).toBeUndefined();
-	});
-});

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

@@ -88,8 +88,7 @@ export interface AxisProps {
 	isDarkMode?: boolean;
 	/** Axis is on a log scale — thins the grid lines to keep dense decades readable. */
 	isLogScale?: boolean;
-	/** Unit the value ticks are formatted in (`spec.formatting.unit`). Named for the
-	 *  y axis, the only value axis until scatter; a non-time x axis reads it too. */
+	/** Unit the y axis ticks are formatted in (`spec.formatting.unit`). */
 	yAxisUnit?: string;
 	/**
 	 * X axis carries timestamps, so its ticks format as dates/times. Declared by the caller
@@ -108,15 +107,6 @@ export interface AxisProps {
 export enum DistributionType {
 	Linear = 'linear',
 	Logarithmic = 'logarithmic',
-	/** arcsinh: linear within ±`asinhThreshold`, logarithmic beyond. Takes zero and
-	 *  negatives, which a plain log cannot place. */
-	SymmetricLog = 'symlog',
-}
-
-/** uPlot's data layout: one shared x per chart, or per-series x/y columns. */
-export enum PlotMode {
-	Aligned = 1,
-	Faceted = 2,
 }
 
 export interface ScaleProps {
@@ -133,8 +123,6 @@ export interface ScaleProps {
 	auto?: boolean;
 	logBase?: uPlot.Scale.LogBase;
 	distribution?: DistributionType;
-	/** Half-width of a `SymmetricLog` scale's linear band around zero. Default 1. */
-	asinhThreshold?: number;
 }
 
 export enum DisconnectedValuesMode {
@@ -156,8 +144,6 @@ export enum DrawStyle {
 	Points = 'points',
 	Bar = 'bar',
 	Histogram = 'histogram',
-	/** Faceted (mode 2) discs at per-series x/y, drawn by the caller's `pathBuilder`. */
-	Scatter = 'scatter',
 }
 
 export enum LineInterpolation {
@@ -241,8 +227,6 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	isDarkMode?: boolean;
 	stepInterval?: number;
 	metric?: { [key: string]: string };
-	/** Mode 2 only: the scales the series' own x and y columns are read against. */
-	facets?: Series.Facet[];
 }
 
 export interface LegendItem {

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/__tests__/geometry.test.ts

@@ -1,114 +0,0 @@
-import type uPlot from 'uplot';
-
-import { Quadtree } from '../../../utils/quadtree';
-import {
-	resolveHit,
-	resolvePointDiameter,
-	resolveSizeDomain,
-} from '../geometry';
-import { ScatterHit, ScatterPointSize } from '../types';
-
-const POINT_SIZE: ScatterPointSize = { fixed: 6, min: 4, max: 20 };
-
-const asData = (columns: unknown[]): uPlot.AlignedData =>
-	columns as unknown as uPlot.AlignedData;
-
-describe('resolveSizeDomain', () => {
-	it('spans the size columns of every series, skipping nulls', () => {
-		const data = asData([
-			null,
-			[
-				[1, 2],
-				[1, 2],
-				[10, null],
-			],
-			[[3], [3], [40]],
-		]);
-
-		expect(resolveSizeDomain(data)).toStrictEqual({ min: 10, max: 40 });
-	});
-
-	it('is null when no series carries sizes', () => {
-		expect(resolveSizeDomain(asData([null, [[1], [1]]]))).toBeNull();
-		expect(resolveSizeDomain(asData([null, [[1], [1], [null]]]))).toBeNull();
-	});
-});
-
-describe('resolvePointDiameter', () => {
-	it('uses the fixed diameter without a size or a domain', () => {
-		expect(resolvePointDiameter(null, { min: 0, max: 10 }, POINT_SIZE)).toBe(6);
-		expect(resolvePointDiameter(5, null, POINT_SIZE)).toBe(6);
-	});
-
-	it('maps the domain ends to min and max', () => {
-		const domain = { min: 0, max: 100 };
-		expect(resolvePointDiameter(0, domain, POINT_SIZE)).toBe(4);
-		expect(resolvePointDiameter(100, domain, POINT_SIZE)).toBe(20);
-	});
-
-	it('scales by area, not diameter', () => {
-		const midArea = (4 ** 2 + 20 ** 2) / 2;
-		expect(
-			resolvePointDiameter(50, { min: 0, max: 100 }, POINT_SIZE),
-		).toBeCloseTo(Math.sqrt(midArea));
-	});
-
-	it('clamps values outside the domain', () => {
-		const domain = { min: 10, max: 20 };
-		expect(resolvePointDiameter(-5, domain, POINT_SIZE)).toBe(4);
-		expect(resolvePointDiameter(500, domain, POINT_SIZE)).toBe(20);
-	});
-
-	it('uses the midpoint when every size is the same', () => {
-		expect(resolvePointDiameter(7, { min: 7, max: 7 }, POINT_SIZE)).toBe(12);
-	});
-});
-
-describe('resolveHit', () => {
-	const hit = (
-		seriesIndex: number,
-		dataIndex: number,
-		x: number,
-		y: number,
-		d: number,
-	): ScatterHit => ({ seriesIndex, dataIndex, x, y, w: d, h: d });
-
-	it('returns the disc under the cursor', () => {
-		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
-		tree.add(hit(1, 0, 10, 10, 6));
-		tree.add(hit(2, 3, 50, 50, 6));
-
-		expect(resolveHit(tree, 13, 13, 0)).toMatchObject({
-			seriesIndex: 1,
-			dataIndex: 0,
-		});
-		expect(resolveHit(tree, 52, 52, 0)).toMatchObject({
-			seriesIndex: 2,
-			dataIndex: 3,
-		});
-	});
-
-	it('is null when the cursor is off every disc', () => {
-		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
-		tree.add(hit(1, 0, 10, 10, 6));
-
-		expect(resolveHit(tree, 30, 30, 0)).toBeNull();
-	});
-
-	it('tolerance widens each disc', () => {
-		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
-		tree.add(hit(1, 0, 10, 10, 6));
-
-		expect(resolveHit(tree, 18, 13, 0)).toBeNull();
-		expect(resolveHit(tree, 18, 13, 3)).not.toBeNull();
-	});
-
-	it('prefers the disc whose centre is nearest when they overlap', () => {
-		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
-		tree.add(hit(1, 0, 10, 10, 10));
-		tree.add(hit(1, 1, 14, 10, 10));
-
-		expect(resolveHit(tree, 13, 15, 0)?.dataIndex).toBe(0);
-		expect(resolveHit(tree, 21, 15, 0)?.dataIndex).toBe(1);
-	});
-});

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/__tests__/scatterPlugin.test.ts

@@ -1,248 +0,0 @@
-import uPlot from 'uplot';
-
-import { PlotMode } from '../../../config/types';
-import { UPlotConfigBuilder } from '../../../config/UPlotConfigBuilder';
-import {
-	applyScatterPlugin,
-	createScatterPlugin,
-	SCATTER_FACETS,
-} from '../scatterPlugin';
-
-jest.mock('lib/visualization/panels/utils/legendVisibilityUtils', () => ({
-	getStoredSeriesVisibility: jest.fn(),
-}));
-
-/** jsdom has no Path2D; the builder only needs something that takes the calls. */
-class FakePath2D {
-	moveTo = jest.fn();
-	arc = jest.fn();
-}
-
-type OrientCallback = Parameters<typeof uPlot.orient>[2];
-
-interface FakePlotArgs {
-	series: Array<{ xs: number[]; ys: number[]; sizes?: Array<number | null> }>;
-	cursor?: { left: number; top: number };
-	scaleX?: { min: number; max: number };
-	scaleY?: { min: number; max: number };
-}
-
-/**
- * A 100×100 plot at the canvas origin with identity scales: value 10 draws at
- * pixel 10 on x, and at 100 − 10 on y (uPlot's y grows downward).
- */
-function createFakePlot({
-	series,
-	cursor = { left: -1, top: -1 },
-	scaleX = { min: 0, max: 100 },
-	scaleY = { min: 0, max: 100 },
-}: FakePlotArgs): uPlot {
-	const data = [
-		null,
-		...series.map((entry) =>
-			entry.sizes ? [entry.xs, entry.ys, entry.sizes] : [entry.xs, entry.ys],
-		),
-	];
-	return {
-		data,
-		series: [{}, ...series.map((_, index) => ({ label: `s${index + 1}` }))],
-		bbox: { left: 0, top: 0, width: 100, height: 100 },
-		cursor,
-		scales: { x: scaleX, y: scaleY },
-	} as unknown as uPlot;
-}
-
-/** Stands in for `uPlot.orient`: identity x, flipped y, an `arc` that records. */
-function orientWithIdentityScales(
-	u: uPlot,
-	seriesIdx: number,
-	cb: OrientCallback,
-): void {
-	const columns = (u.data as unknown as Array<number[][] | null>)[seriesIdx];
-	if (!columns) {
-		return;
-	}
-	const scaleX = (u.scales as unknown as Record<string, uPlot.Scale>).x;
-	const scaleY = (u.scales as unknown as Record<string, uPlot.Scale>).y;
-	const valToPosX = (value: number): number => value;
-	const valToPosY = (value: number): number => 100 - value;
-	// Real uPlot's `arc` helper forwards to the path; the test counts those calls.
-	const arc = (path: FakePath2D, ...args: number[]): void => {
-		path.arc(...args);
-	};
-	cb(
-		u.series[seriesIdx],
-		columns[0],
-		columns[1],
-		scaleX,
-		scaleY,
-		valToPosX as unknown as uPlot.ValToPos,
-		valToPosY as unknown as uPlot.ValToPos,
-		0,
-		0,
-		100,
-		100,
-		jest.fn() as never,
-		jest.fn() as never,
-		jest.fn() as never,
-		arc as never,
-		jest.fn() as never,
-	);
-}
-
-describe('createScatterPlugin', () => {
-	beforeAll(() => {
-		(globalThis as { Path2D?: unknown }).Path2D = FakePath2D;
-	});
-
-	beforeEach(() => {
-		(uPlot.orient as jest.Mock).mockImplementation(orientWithIdentityScales);
-	});
-
-	afterEach(() => {
-		(uPlot.orient as jest.Mock).mockReset();
-	});
-
-	function drawAll(
-		u: uPlot,
-		plugin: ReturnType<typeof createScatterPlugin>,
-	): void {
-		plugin.hooks.drawClear(u);
-		for (let seriesIdx = 1; seriesIdx < u.series.length; seriesIdx++) {
-			const columns = (u.data as unknown as number[][][])[seriesIdx];
-			plugin.pathBuilder(u, seriesIdx, 0, columns[0].length - 1);
-		}
-	}
-
-	/** Runs the cursor scan the way uPlot does: every data series, in order. */
-	function scan(
-		u: uPlot,
-		plugin: ReturnType<typeof createScatterPlugin>,
-	): Array<number | null> {
-		const dataIdx = plugin.cursor.dataIdx as NonNullable<uPlot.Cursor['dataIdx']>;
-		const indexes: Array<number | null> = [null];
-		for (let seriesIdx = 1; seriesIdx < u.series.length; seriesIdx++) {
-			indexes.push(dataIdx(u, seriesIdx, 0, 0));
-		}
-		return indexes;
-	}
-
-	it('returns one path that strokes and fills the same discs', () => {
-		const plugin = createScatterPlugin();
-		const u = createFakePlot({ series: [{ xs: [10, 20], ys: [10, 20] }] });
-		plugin.hooks.drawClear(u);
-
-		const paths = plugin.pathBuilder(u, 1, 0, 1) as uPlot.Series.Paths;
-
-		expect(paths.stroke).toBeInstanceOf(FakePath2D);
-		expect(paths.fill).toBe(paths.stroke);
-		expect((paths.fill as unknown as FakePath2D).arc).toHaveBeenCalledTimes(2);
-	});
-
-	it('resolves the hovered point to its own series and index', () => {
-		const plugin = createScatterPlugin({
-			pointSize: { fixed: 6, min: 4, max: 20 },
-		});
-		const u = createFakePlot({
-			series: [
-				{ xs: [10, 50], ys: [10, 50] },
-				{ xs: [80], ys: [80] },
-			],
-			// Over the second series' only point: x 80, y drawn at 100 − 80.
-			cursor: { left: 80, top: 20 },
-		});
-		drawAll(u, plugin);
-
-		expect(scan(u, plugin)).toStrictEqual([null, null, 0]);
-		expect(plugin.getHit()).toMatchObject({ seriesIndex: 2, dataIndex: 0 });
-	});
-
-	it('returns null for every series when the cursor is off the plot or off any disc', () => {
-		const plugin = createScatterPlugin();
-		const u = createFakePlot({
-			series: [{ xs: [10], ys: [10] }],
-			cursor: { left: -1, top: -1 },
-		});
-		drawAll(u, plugin);
-
-		expect(scan(u, plugin)).toStrictEqual([null, null]);
-
-		(u.cursor as { left: number; top: number }).left = 50;
-		(u.cursor as { left: number; top: number }).top = 50;
-		expect(scan(u, plugin)).toStrictEqual([null, null]);
-	});
-
-	it('skips points outside the visible scale range', () => {
-		const plugin = createScatterPlugin();
-		const u = createFakePlot({
-			series: [{ xs: [10, 500], ys: [10, 10] }],
-			cursor: { left: 10, top: 90 },
-		});
-		drawAll(u, plugin);
-
-		const paths = plugin.pathBuilder(u, 1, 0, 1) as uPlot.Series.Paths;
-		expect((paths.fill as unknown as FakePath2D).arc).toHaveBeenCalledTimes(1);
-		expect(scan(u, plugin)).toStrictEqual([null, 0]);
-	});
-
-	it('sizes the hover marker from the hit disc, in CSS pixels', () => {
-		const plugin = createScatterPlugin({
-			pointSize: { fixed: 8, min: 4, max: 20 },
-		});
-		const u = createFakePlot({
-			series: [{ xs: [10], ys: [10] }],
-			cursor: { left: 10, top: 90 },
-		});
-		drawAll(u, plugin);
-		scan(u, plugin);
-
-		const bbox = plugin.cursor.points?.bbox;
-		expect(bbox?.(u, 1)).toStrictEqual({ left: 6, top: 86, width: 8, height: 8 });
-		expect(bbox?.(u, 2)).toMatchObject({ width: 0, height: 0 });
-	});
-
-	it('drawClear drops cached paths on data series only', () => {
-		const plugin = createScatterPlugin();
-		const u = createFakePlot({ series: [{ xs: [1], ys: [1] }] });
-		const [xSeries, dataSeries] = u.series as Array<{ _paths?: unknown }>;
-		xSeries._paths = 'x';
-		dataSeries._paths = 'cached';
-
-		plugin.hooks.drawClear(u);
-
-		expect(xSeries._paths).toBe('x');
-		expect(dataSeries._paths).toBeNull();
-	});
-
-	it('focus distance is zero, so the hit series wins focus', () => {
-		const plugin = createScatterPlugin();
-		expect(plugin.cursor.focus?.dist?.({} as uPlot, 1, 0, 0, 0)).toBe(0);
-	});
-});
-
-describe('applyScatterPlugin', () => {
-	it('switches the builder to faceted mode and disables drag selection', () => {
-		const builder = new UPlotConfigBuilder({ id: 'scatter' });
-		const plugin = createScatterPlugin();
-
-		applyScatterPlugin(builder, plugin);
-		const config = builder.getConfig();
-
-		expect(builder.getMode()).toBe(PlotMode.Faceted);
-		expect(config.mode).toBe(2);
-		expect(config.cursor?.drag).toMatchObject({
-			x: false,
-			y: false,
-			setScale: false,
-		});
-		expect(config.hooks?.drawClear).toHaveLength(1);
-		expect(config.hooks?.destroy).toHaveLength(1);
-	});
-
-	it('facets read x and y against the shared scales', () => {
-		expect(SCATTER_FACETS).toStrictEqual([
-			{ scale: 'x', auto: true },
-			{ scale: 'y', auto: true },
-		]);
-	});
-});

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/geometry.ts

@@ -1,96 +0,0 @@
-import type uPlot from 'uplot';
-
-import type { Quadtree } from '../../utils/quadtree';
-import type { ScatterHit, ScatterPointSize, ScatterSeriesData } from './types';
-
-export interface SizeDomain {
-	min: number;
-	max: number;
-}
-
-/**
- * Extent of the size column across every series, so equal values draw equal
- * discs whichever group they belong to. `null` when nothing carries a size.
- */
-export function resolveSizeDomain(data: uPlot.AlignedData): SizeDomain | null {
-	let min = Infinity;
-	let max = -Infinity;
-	for (let seriesIndex = 1; seriesIndex < data.length; seriesIndex++) {
-		const sizes = (data[seriesIndex] as unknown as ScatterSeriesData)[2];
-		if (!sizes) {
-			continue;
-		}
-		for (const size of sizes) {
-			if (size == null || !Number.isFinite(size)) {
-				continue;
-			}
-			min = Math.min(min, size);
-			max = Math.max(max, size);
-		}
-	}
-	return min <= max ? { min, max } : null;
-}
-
-/**
- * Disc diameter for a size value. Area, not diameter, follows the value: a
- * point worth twice as much should look twice as big.
- */
-export function resolvePointDiameter(
-	size: number | null | undefined,
-	domain: SizeDomain | null,
-	pointSize: ScatterPointSize,
-): number {
-	if (size == null || domain == null || !Number.isFinite(size)) {
-		return pointSize.fixed;
-	}
-	if (domain.max === domain.min) {
-		return (pointSize.min + pointSize.max) / 2;
-	}
-	const t = Math.min(
-		1,
-		Math.max(0, (size - domain.min) / (domain.max - domain.min)),
-	);
-	const minArea = pointSize.min ** 2;
-	const maxArea = pointSize.max ** 2;
-	return Math.sqrt(minArea + (maxArea - minArea) * t);
-}
-
-/**
- * Nearest disc under the cursor, or `null`. Overlapping discs resolve to the one
- * whose centre is closest; `tolerance` widens every disc so thin points stay
- * hoverable.
- */
-export function resolveHit(
-	tree: Quadtree<ScatterHit>,
-	cx: number,
-	cy: number,
-	tolerance: number,
-): ScatterHit | null {
-	let best: ScatterHit | null = null;
-	let bestDistance = Infinity;
-
-	tree.get(
-		cx - tolerance,
-		cy - tolerance,
-		tolerance * 2,
-		tolerance * 2,
-		(hit) => {
-			const left = hit.x - tolerance;
-			const top = hit.y - tolerance;
-			const right = hit.x + hit.w + tolerance;
-			const bottom = hit.y + hit.h + tolerance;
-			if (cx < left || cx > right || cy < top || cy > bottom) {
-				return;
-			}
-			const dx = cx - (hit.x + hit.w / 2);
-			const dy = cy - (hit.y + hit.h / 2);
-			const distance = dx * dx + dy * dy;
-			if (distance < bestDistance) {
-				best = hit;
-				bestDistance = distance;
-			}
-		},
-	);
-
-	return best;
-}

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin.ts

@@ -1,206 +0,0 @@
-import uPlot, { Series } from 'uplot';
-
-import { DEFAULT_FOCUS_PROXIMITY_VALUE } from '../../constants';
-import { PlotMode } from '../../config/types';
-import type { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
-import { Quadtree } from '../../utils/quadtree';
-import {
-	resolveHit,
-	resolvePointDiameter,
-	resolveSizeDomain,
-	SizeDomain,
-} from './geometry';
-import {
-	DEFAULT_HOVER_TOLERANCE_PX,
-	DEFAULT_SCATTER_POINT_SIZE,
-	ScatterHit,
-	ScatterPluginOptions,
-	ScatterSeriesData,
-} from './types';
-
-/** Every scatter series reads its own x and y columns against the shared scales. */
-export const SCATTER_FACETS: Series.Facet[] = [
-	{ scale: 'x', auto: true },
-	{ scale: 'y', auto: true },
-];
-
-const HIDDEN_BBOX: uPlot.BBox = { left: -10, top: -10, width: 0, height: 0 };
-
-const TWO_PI = 2 * Math.PI;
-
-/** uPlot caches built paths on the series; the field is internal to it. */
-type SeriesWithPaths = Series & { _paths?: Series.Paths | null };
-
-export interface ScatterPlugin {
-	/** Draws every point of a series as one path and indexes the discs for hover. */
-	pathBuilder: Series.PathBuilder;
-	/** Hover by disc rather than by nearest x: mode 2 has no shared x to scan. */
-	cursor: uPlot.Cursor;
-	hooks: {
-		drawClear: (u: uPlot) => void;
-		destroy: (u: uPlot) => void;
-	};
-	getHit: () => ScatterHit | null;
-}
-
-export function createScatterPlugin({
-	pointSize = DEFAULT_SCATTER_POINT_SIZE,
-	hoverTolerance = DEFAULT_HOVER_TOLERANCE_PX,
-}: ScatterPluginOptions = {}): ScatterPlugin {
-	let tree: Quadtree<ScatterHit> | null = null;
-	let hit: ScatterHit | null = null;
-
-	// The domain spans every series, so it is resolved once per dataset rather than
-	// once per series path.
-	let cachedData: uPlot.AlignedData | null = null;
-	let cachedDomain: SizeDomain | null = null;
-
-	function getSizeDomain(u: uPlot): SizeDomain | null {
-		if (cachedData !== u.data) {
-			cachedDomain = resolveSizeDomain(u.data);
-			cachedData = u.data;
-		}
-		return cachedDomain;
-	}
-
-	const pathBuilder: Series.PathBuilder = (u, seriesIdx, idx0, idx1) => {
-		const path = new Path2D();
-		const sizes = (u.data[seriesIdx] as unknown as ScatterSeriesData)[2];
-		const domain = getSizeDomain(u);
-		const { pxRatio } = uPlot;
-
-		uPlot.orient(
-			u,
-			seriesIdx,
-			(
-				_series,
-				dataX,
-				dataY,
-				scaleX,
-				scaleY,
-				valToPosX,
-				valToPosY,
-				xOff,
-				yOff,
-				xDim,
-				yDim,
-				_moveTo,
-				_lineTo,
-				_rect,
-				arc,
-			) => {
-				const xMin = scaleX.min ?? -Infinity;
-				const xMax = scaleX.max ?? Infinity;
-				const yMin = scaleY.min ?? -Infinity;
-				const yMax = scaleY.max ?? Infinity;
-
-				for (let i = idx0; i <= idx1; i++) {
-					const x = dataX[i];
-					const y = dataY[i];
-					if (
-						x == null ||
-						y == null ||
-						x < xMin ||
-						x > xMax ||
-						y < yMin ||
-						y > yMax
-					) {
-						continue;
-					}
-
-					const diameter =
-						resolvePointDiameter(sizes?.[i], domain, pointSize) * pxRatio;
-					const radius = diameter / 2;
-					const cx = valToPosX(x, scaleX, xDim, xOff);
-					const cy = valToPosY(y, scaleY, yDim, yOff);
-
-					path.moveTo(cx + radius, cy);
-					arc(path, cx, cy, radius, 0, TWO_PI);
-
-					tree?.add({
-						x: cx - radius - u.bbox.left,
-						y: cy - radius - u.bbox.top,
-						w: diameter,
-						h: diameter,
-						seriesIndex: seriesIdx,
-						dataIndex: i,
-					});
-				}
-			},
-		);
-
-		return { stroke: path, fill: path, clip: null };
-	};
-
-	const cursor: uPlot.Cursor = {
-		// Selection would set the dashboard time range; neither axis is time here.
-		drag: { x: false, y: false, setScale: false },
-		dataIdx: (u, seriesIdx): number | null => {
-			// uPlot asks series 1..n in order on every cursor move; resolve once.
-			if (seriesIdx === 1) {
-				const { left = -1, top = -1 } = u.cursor;
-				const { pxRatio } = uPlot;
-				hit =
-					tree && left >= 0 && top >= 0
-						? resolveHit(
-								tree,
-								left * pxRatio,
-								top * pxRatio,
-								hoverTolerance * pxRatio,
-							)
-						: null;
-			}
-			return hit?.seriesIndex === seriesIdx ? hit.dataIndex : null;
-		},
-		points: {
-			bbox: (_u, seriesIdx): uPlot.BBox => {
-				if (hit?.seriesIndex !== seriesIdx) {
-					return HIDDEN_BBOX;
-				}
-				const { pxRatio } = uPlot;
-				return {
-					left: hit.x / pxRatio,
-					top: hit.y / pxRatio,
-					width: hit.w / pxRatio,
-					height: hit.h / pxRatio,
-				};
-			},
-		},
-		// uPlot only measures series that returned a data index, i.e. the hit one.
-		focus: { prox: DEFAULT_FOCUS_PROXIMITY_VALUE, dist: (): number => 0 },
-	};
-
-	return {
-		pathBuilder,
-		cursor,
-		hooks: {
-			drawClear: (u: uPlot): void => {
-				tree = new Quadtree<ScatterHit>(0, 0, u.bbox.width, u.bbox.height);
-				// The tree only knows what the path builder last drew, so cached paths
-				// must be rebuilt alongside it.
-				u.series.forEach((series, index) => {
-					if (index > 0) {
-						(series as SeriesWithPaths)._paths = null;
-					}
-				});
-			},
-			destroy: (): void => {
-				tree = null;
-				hit = null;
-				cachedData = null;
-				cachedDomain = null;
-			},
-		},
-		getHit: (): ScatterHit | null => hit,
-	};
-}
-
-export function applyScatterPlugin(
-	builder: UPlotConfigBuilder,
-	plugin: ScatterPlugin,
-): void {
-	builder.setMode(PlotMode.Faceted);
-	builder.setCursor(plugin.cursor);
-	builder.addHook('drawClear', plugin.hooks.drawClear);
-	builder.addHook('destroy', plugin.hooks.destroy);
-}

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

@@ -1,58 +0,0 @@
-import type { QuadtreeRect } from '../../utils/quadtree';
-
-/** Diameters in CSS pixels. `min`/`max` bound the area scale when a size column is mapped. */
-export interface ScatterPointSize {
-	fixed: number;
-	min: number;
-	max: number;
-}
-
-export const DEFAULT_SCATTER_POINT_SIZE: ScatterPointSize = {
-	fixed: 6,
-	min: 4,
-	max: 24,
-};
-
-/** CSS pixels around a point's disc that still register as a hover. */
-export const DEFAULT_HOVER_TOLERANCE_PX = 3;
-
-export interface ScatterPluginOptions {
-	pointSize?: ScatterPointSize;
-	hoverTolerance?: number;
-}
-
-/**
- * One faceted series: parallel columns, one point per index. Sizes are in the
- * caller's units and mapped to `pointSize` at draw time; `null` draws at `fixed`.
- */
-export type ScatterSeriesData = [
-	xs: number[],
-	ys: number[],
-	sizes?: Array<number | null>,
-];
-
-/** Mode-2 data: series 0 is uPlot's x placeholder and carries nothing. */
-export type ScatterChartData = [null, ...ScatterSeriesData[]];
-
-/** A drawn point's disc, in canvas pixels relative to the plot area. */
-export interface ScatterHit extends QuadtreeRect {
-	seriesIndex: number;
-	dataIndex: number;
-}
-
-export interface ScatterChannel {
-	label: string;
-	unit?: string;
-}
-
-/** What each visual channel plots, for the tooltip and axes. */
-export interface ScatterChannels {
-	x: ScatterChannel;
-	y: ScatterChannel;
-	size?: ScatterChannel;
-}
-
-export interface ScatterPointLabel {
-	key: string;
-	value: string;
-}

frontend/src/lib/uPlotV2/utils/__tests__/quadtree.test.ts

@@ -1,70 +0,0 @@
-import { Quadtree, QuadtreeRect } from '../quadtree';
-
-interface Item extends QuadtreeRect {
-	id: number;
-}
-
-function collect(
-	tree: Quadtree<Item>,
-	x: number,
-	y: number,
-	w: number,
-	h: number,
-): Set<number> {
-	const ids = new Set<number>();
-	tree.get(x, y, w, h, (item) => ids.add(item.id));
-	return ids;
-}
-
-describe('Quadtree', () => {
-	it('returns items in the queried region and not those far from it', () => {
-		const tree = new Quadtree<Item>(0, 0, 100, 100);
-		tree.add({ id: 1, x: 10, y: 10, w: 5, h: 5 });
-		tree.add({ id: 2, x: 80, y: 80, w: 5, h: 5 });
-
-		// Below the split threshold every item is visited; callers refine the hit.
-		expect(collect(tree, 9, 9, 8, 8)).toStrictEqual(new Set([1, 2]));
-	});
-
-	it('splits past the object limit and still finds every item', () => {
-		const tree = new Quadtree<Item>(0, 0, 100, 100);
-		const total = 50;
-		for (let id = 0; id < total; id++) {
-			tree.add({ id, x: (id % 10) * 10, y: Math.floor(id / 10) * 10, w: 4, h: 4 });
-		}
-
-		expect(collect(tree, 0, 0, 100, 100).size).toBe(total);
-	});
-
-	it('after a split, a query in one quadrant skips items confined to another', () => {
-		const tree = new Quadtree<Item>(0, 0, 100, 100);
-		for (let id = 0; id < 20; id++) {
-			// All in the north-west quadrant.
-			tree.add({ id, x: 1 + id, y: 1, w: 2, h: 2 });
-		}
-		tree.add({ id: 99, x: 90, y: 90, w: 2, h: 2 });
-
-		const northWest = collect(tree, 0, 0, 10, 10);
-		expect(northWest.has(99)).toBe(false);
-		expect(collect(tree, 85, 85, 10, 10).has(99)).toBe(true);
-	});
-
-	it('reports an item straddling the midline from either side', () => {
-		const tree = new Quadtree<Item>(0, 0, 100, 100);
-		for (let id = 0; id < 20; id++) {
-			tree.add({ id, x: 1, y: 1 + id, w: 2, h: 2 });
-		}
-		tree.add({ id: 99, x: 48, y: 48, w: 4, h: 4 });
-
-		expect(collect(tree, 40, 40, 5, 5).has(99)).toBe(true);
-		expect(collect(tree, 55, 55, 5, 5).has(99)).toBe(true);
-	});
-
-	it('clear empties the tree', () => {
-		const tree = new Quadtree<Item>(0, 0, 100, 100);
-		tree.add({ id: 1, x: 10, y: 10, w: 5, h: 5 });
-		tree.clear();
-
-		expect(collect(tree, 0, 0, 100, 100).size).toBe(0);
-	});
-});

frontend/src/lib/uPlotV2/utils/__tests__/scale.test.ts

@@ -195,40 +195,3 @@ describe('scale utils', () => {
 		});
 	});
 });
-
-describe('symmetric log scale', () => {
-	it('maps to uPlot arcsinh with the given linear threshold', () => {
-		expect(
-			scaleUtils.getDistributionConfig({
-				time: false,
-				distr: DistributionType.SymmetricLog,
-				asinhThreshold: 0.01,
-			}),
-		).toStrictEqual({ distr: 4, log: 10, asinh: 0.01 });
-
-		expect(
-			scaleUtils.getDistributionConfig({
-				time: false,
-				distr: DistributionType.SymmetricLog,
-			}).asinh,
-		).toBe(scaleUtils.DEFAULT_ASINH_THRESHOLD);
-	});
-
-	it('ranges a distr 4 scale through uPlot.rangeAsinh', () => {
-		const rangeAsinh = jest.fn(() => [-10, 1000] as uPlot.Range.MinMax);
-		Object.assign(uPlot, { rangeAsinh });
-
-		const rangeFn = scaleUtils.createRangeFunction({
-			rangeConfig: {} as uPlot.Range.Config,
-			hardMinOnly: false,
-			hardMaxOnly: false,
-			hasFixedRange: false,
-			min: null,
-			max: null,
-		});
-		const u = { scales: { y: { distr: 4, log: 10 } } } as unknown as uPlot;
-
-		expect(rangeFn(u, -3, 700, 'y')).toStrictEqual([-10, 1000]);
-		expect(rangeAsinh).toHaveBeenCalledWith(-3, 700, 10, true);
-	});
-});

frontend/src/lib/uPlotV2/utils/quadtree.ts

@@ -1,110 +0,0 @@
-export interface QuadtreeRect {
-	x: number;
-	y: number;
-	w: number;
-	h: number;
-}
-
-const MAX_OBJECTS = 10;
-const MAX_LEVELS = 4;
-
-/**
- * Spatial index over axis-aligned rectangles, for answering "what is under the
- * cursor" on charts whose marks have no shared x order to binary-search. An item
- * straddling a quadrant boundary lives in every quadrant it touches, so `get` can
- * report it more than once.
- */
-export class Quadtree<T extends QuadtreeRect = QuadtreeRect> {
-	private items: T[] = [];
-	private quadrants: Quadtree<T>[] | null = null;
-
-	constructor(
-		private readonly x: number,
-		private readonly y: number,
-		private readonly w: number,
-		private readonly h: number,
-		private readonly level = 0,
-	) {}
-
-	add(item: T): void {
-		if (this.quadrants) {
-			this.forEachQuadrant(item, (quadrant) => quadrant.add(item));
-			return;
-		}
-
-		this.items.push(item);
-
-		if (this.items.length > MAX_OBJECTS && this.level < MAX_LEVELS) {
-			this.split();
-			const items = this.items;
-			this.items = [];
-			for (const existing of items) {
-				this.forEachQuadrant(existing, (quadrant) => quadrant.add(existing));
-			}
-		}
-	}
-
-	/** Visits every item whose quadrant overlaps the rectangle; callers refine the test. */
-	get(
-		x: number,
-		y: number,
-		w: number,
-		h: number,
-		visit: (item: T) => void,
-	): void {
-		for (const item of this.items) {
-			visit(item);
-		}
-		if (this.quadrants) {
-			this.forEachQuadrant({ x, y, w, h }, (quadrant) =>
-				quadrant.get(x, y, w, h, visit),
-			);
-		}
-	}
-
-	clear(): void {
-		this.items = [];
-		this.quadrants = null;
-	}
-
-	private split(): void {
-		const w = this.w / 2;
-		const h = this.h / 2;
-		const level = this.level + 1;
-		// North-east, north-west, south-west, south-east.
-		this.quadrants = [
-			new Quadtree<T>(this.x + w, this.y, w, h, level),
-			new Quadtree<T>(this.x, this.y, w, h, level),
-			new Quadtree<T>(this.x, this.y + h, w, h, level),
-			new Quadtree<T>(this.x + w, this.y + h, w, h, level),
-		];
-	}
-
-	private forEachQuadrant(
-		rect: QuadtreeRect,
-		visit: (quadrant: Quadtree<T>) => void,
-	): void {
-		if (!this.quadrants) {
-			return;
-		}
-		const midX = this.x + this.w / 2;
-		const midY = this.y + this.h / 2;
-		const startsNorth = rect.y < midY;
-		const startsWest = rect.x < midX;
-		const endsEast = rect.x + rect.w > midX;
-		const endsSouth = rect.y + rect.h > midY;
-
-		if (startsNorth && endsEast) {
-			visit(this.quadrants[0]);
-		}
-		if (startsWest && startsNorth) {
-			visit(this.quadrants[1]);
-		}
-		if (startsWest && endsSouth) {
-			visit(this.quadrants[2]);
-		}
-		if (endsEast && endsSouth) {
-			visit(this.quadrants[3]);
-		}
-	}
-}

frontend/src/lib/uPlotV2/utils/scale.ts

@@ -58,23 +58,18 @@ function normalizeLogLimit(
 	return logBase ** exp;
 }
 
-export const DEFAULT_ASINH_THRESHOLD = 1;
-
 /**
- * Returns uPlot scale distribution options for a value axis.
- * Time scales get no distr/log; value scales get distr 1 (linear), 3 (log) or
- * 4 (arcsinh, uPlot's symmetric log) and log base 2 or 10.
+ * Returns uPlot scale distribution options for the Y axis.
+ * Time (X) scale gets no distr/log; Y scale gets distr 1 (linear) or 3 (log) and log base 2 or 10.
  */
 export function getDistributionConfig({
 	time,
 	distr,
 	logBase,
-	asinhThreshold,
 }: {
 	time: ScaleProps['time'];
 	distr?: DistributionType;
 	logBase?: number;
-	asinhThreshold?: number;
 }): Partial<Scale> {
 	if (time) {
 		return {};
@@ -82,14 +77,6 @@ export function getDistributionConfig({
 
 	const resolvedLogBase = (logBase ?? 10) === 2 ? 2 : 10;
 
-	if (distr === DistributionType.SymmetricLog) {
-		return {
-			distr: 4,
-			log: resolvedLogBase,
-			asinh: asinhThreshold ?? DEFAULT_ASINH_THRESHOLD,
-		};
-	}
-
 	return {
 		distr: distr === DistributionType.Logarithmic ? 3 : 1,
 		log: resolvedLogBase,
@@ -210,33 +197,6 @@ function getLogScaleRange(
 	);
 }
 
-/**
- * Computes the arcsinh-scale range using uPlot.rangeAsinh, which pads to whole
- * magnitudes on either side of zero and pins an edge that sits exactly on zero.
- */
-function getAsinhScaleRange(
-	minMax: Range.MinMax,
-	params: RangeFunctionParams,
-	dataMin: number | null,
-	dataMax: number | null,
-	logBase?: uPlot.Scale['log'],
-): Range.MinMax {
-	const { min, max } = params;
-	const resolvedMin = min ?? dataMin;
-	const resolvedMax = max ?? dataMax;
-
-	if (resolvedMin == null || resolvedMax == null) {
-		return minMax;
-	}
-
-	return uPlot.rangeAsinh(
-		resolvedMin,
-		resolvedMax,
-		(logBase ?? 10) as 2 | 10,
-		true,
-	);
-}
-
 /**
  * Snaps log-scale [min, max] to exact powers of logBase (nearest magnitude below/above).
  * If min and max would be equal after snapping, max is increased by one magnitude so the range is valid.
@@ -339,8 +299,6 @@ export function createRangeFunction(
 			minMax = getLogScaleRange(minMax, params, dataMin, dataMax, logBase);
 			const logFn = scale.log === 2 ? Math.log2 : Math.log10;
 			minMax = adjustLogRange(minMax, (logBase ?? 10) as number, logFn);
-		} else if (scale.distr === 4) {
-			minMax = getAsinhScaleRange(minMax, params, dataMin, dataMax, logBase);
 		}
 
 		minMax = applyHardLimits(minMax, params, scale.distr ?? 1);

frontend/src/lib/visualization/charts/Scatter/Scatter.stories.tsx

@@ -1,253 +0,0 @@
-import { useMemo, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import type { Threshold } from 'lib/uPlotV2/hooks/types';
-import type { ScatterPointLabel } from 'lib/uPlotV2/plugins/ScatterPlugin/types';
-
-import Scatter from './Scatter';
-import {
-	buildScatterConfig,
-	prepareScatterChartData,
-	ScatterSeries,
-} from './utils';
-
-const SERVICES = [
-	'frontend',
-	'cart',
-	'checkout',
-	'payment',
-	'shipping',
-	'currency',
-	'email',
-	'recommendation',
-	'ads',
-	'product-catalog',
-];
-
-type Shape = 'spread' | 'single' | 'sameX';
-
-interface ScatterStoryProps {
-	groups: number;
-	pointsPerGroup: number;
-	/** Adds an error-count size column. */
-	sized: boolean;
-	xLog: boolean;
-	yLog: boolean;
-	/** Zeroes a share of y values, which forces the symmetric log. */
-	withZeros: boolean;
-	shape: Shape;
-	thresholds: boolean;
-	pointSize: number;
-	/** 0–1. */
-	fillOpacity: number;
-	width: number;
-	height: number;
-}
-
-/** Deterministic, so a story renders the same points on every run. */
-function createRng(seed: number): () => number {
-	let state = seed >>> 0;
-	return (): number => {
-		state = (state * 1664525 + 1013904223) >>> 0;
-		return state / 2 ** 32;
-	};
-}
-
-function buildSeries({
-	groups,
-	pointsPerGroup,
-	sized,
-	withZeros,
-	shape,
-}: ScatterStoryProps): ScatterSeries[] {
-	const rng = createRng(42);
-	return Array.from({ length: groups }, (_, groupIndex) => {
-		const label = SERVICES[groupIndex % SERVICES.length];
-		// Each service sits in its own throughput/latency band, so groups are telling
-		// apart rather than one cloud.
-		const baseThroughput = 20 * 2 ** (groupIndex % 5);
-		const baseLatency = 40 + 60 * (groupIndex % 4);
-
-		const count = shape === 'single' ? 1 : pointsPerGroup;
-		const xs: number[] = [];
-		const ys: number[] = [];
-		const sizes: Array<number | null> = [];
-
-		for (let i = 0; i < count; i++) {
-			const throughput =
-				shape === 'sameX' ? baseThroughput : baseThroughput * (0.5 + rng() * 1.5);
-			// Latency grows with load, plus noise; the odd outlier keeps the axis honest.
-			const outlier = rng() < 0.03 ? 4 + rng() * 6 : 1;
-			let latency =
-				baseLatency *
-				(0.8 + (throughput / baseThroughput) * 0.4 + rng() * 0.3) *
-				outlier;
-			if (withZeros && rng() < 0.2) {
-				latency = 0;
-			}
-			xs.push(Number(throughput.toFixed(2)));
-			ys.push(Number(latency.toFixed(2)));
-			sizes.push(rng() < 0.1 ? null : Math.round(rng() * rng() * 500));
-		}
-
-		return sized ? { label, xs, ys, sizes } : { label, xs, ys };
-	});
-}
-
-const THRESHOLDS: Threshold[] = [
-	{
-		thresholdValue: 300,
-		thresholdUnit: 'ms',
-		thresholdColor: '#E5484D',
-		thresholdLabel: 'p99 SLO',
-	},
-];
-
-function ScatterStory(props: ScatterStoryProps): JSX.Element {
-	const {
-		xLog,
-		yLog,
-		sized,
-		thresholds,
-		pointSize,
-		fillOpacity,
-		width,
-		height,
-	} = props;
-	const isDarkMode = useIsDarkMode();
-	const [drawMs, setDrawMs] = useState<number | null>(null);
-
-	const series = useMemo(() => buildSeries(props), [props]);
-	const pointCount = series.reduce((sum, entry) => sum + entry.xs.length, 0);
-	const drawLabel = drawMs === null ? '—' : `${drawMs.toFixed(1)} ms`;
-
-	const config = useMemo(() => {
-		const builder = buildScatterConfig({
-			id: 'scatter-story',
-			series,
-			isDarkMode,
-			x: { unit: 'reqps', isLogScale: xLog },
-			y: { unit: 'ms', isLogScale: yLog },
-			pointSize: { fixed: pointSize, min: 4, max: pointSize * 4 },
-			fillOpacity,
-			thresholds: thresholds ? THRESHOLDS : undefined,
-		});
-		let started = 0;
-		builder.addHook('drawClear', (): void => {
-			started = performance.now();
-		});
-		builder.addHook('draw', (): void => {
-			setDrawMs(performance.now() - started);
-		});
-		return builder;
-	}, [series, isDarkMode, xLog, yLog, pointSize, fillOpacity, thresholds]);
-
-	const data = useMemo(() => prepareScatterChartData(series), [series]);
-
-	const resolvePointLabels = (
-		seriesIndex: number,
-		dataIndex: number,
-	): ScatterPointLabel[] => [
-		{ key: 'service.name', value: series[seriesIndex - 1]?.label ?? '' },
-		{
-			key: 'k8s.pod.name',
-			value: `pod-${dataIndex.toString().padStart(3, '0')}`,
-		},
-	];
-
-	return (
-		<div style={{ width, padding: 16 }}>
-			<Scatter
-				config={config}
-				data={data}
-				width={width}
-				height={height}
-				legendConfig={{ position: LegendPosition.BOTTOM }}
-				channels={{
-					x: { label: 'Throughput', unit: 'reqps' },
-					y: { label: 'p99 latency', unit: 'ms' },
-					...(sized && { size: { label: 'Errors', unit: 'short' } }),
-				}}
-				resolvePointLabels={resolvePointLabels}
-				canPinTooltip
-			/>
-			<p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, opacity: 0.7 }}>
-				{`${pointCount.toLocaleString()} points · last draw ${drawLabel}`}
-			</p>
-		</div>
-	);
-}
-
-const meta = {
-	title: 'Charts/Scatter',
-	component: ScatterStory,
-	parameters: { layout: 'padded' },
-	args: {
-		groups: 1,
-		pointsPerGroup: 10,
-		sized: false,
-		xLog: false,
-		yLog: false,
-		withZeros: false,
-		shape: 'spread',
-		thresholds: false,
-		pointSize: 6,
-		fillOpacity: 0.7,
-		width: 800,
-		height: 420,
-	},
-	argTypes: {
-		shape: { control: 'radio', options: ['spread', 'single', 'sameX'] },
-		fillOpacity: { control: { type: 'range', min: 0, max: 1, step: 0.05 } },
-		pointSize: { control: { type: 'range', min: 2, max: 16, step: 1 } },
-	},
-} satisfies Meta<ScatterStoryProps>;
-
-export default meta;
-
-type Story = StoryObj<ScatterStoryProps>;
-
-/** One service, ten points: axes formatted with units, hover picks the right point. */
-export const Basic: Story = {};
-
-/** Five services, one legend entry each; toggling a row hides its points. */
-export const Grouped: Story = {
-	args: { groups: 5, pointsPerGroup: 40 },
-};
-
-/** Error count as disc area, between the configured min and max diameters. */
-export const Sized: Story = {
-	args: { groups: 5, pointsPerGroup: 40, sized: true, pointSize: 5 },
-};
-
-/** Log x; a fifth of the latencies are 0, so y falls back to the symmetric log. */
-export const LogAxes: Story = {
-	args: {
-		groups: 5,
-		pointsPerGroup: 60,
-		xLog: true,
-		yLog: true,
-		withZeros: true,
-	},
-};
-
-/** A single point still gets a padded range rather than an empty plot. */
-export const SinglePoint: Story = {
-	args: { shape: 'single' },
-};
-
-/** Fifty points sharing one x collide on nothing: no shared x array to align. */
-export const SameX: Story = {
-	args: { groups: 3, pointsPerGroup: 50, shape: 'sameX' },
-};
-
-/** Horizontal line with label on the y axis; the scale stretches to include it. */
-export const Thresholds: Story = {
-	args: { groups: 3, pointsPerGroup: 40, thresholds: true },
-};
-
-/** Perf harness: raise `pointsPerGroup` and read the draw time under the chart. */
-export const Dense: Story = {
-	args: { groups: 5, pointsPerGroup: 1000, pointSize: 4, fillOpacity: 0.5 },
-};

frontend/src/lib/visualization/charts/Scatter/Scatter.tsx

@@ -1,65 +0,0 @@
-import { useCallback } from 'react';
-import ChartWrapper from 'lib/visualization/charts/ChartWrapper/ChartWrapper';
-import ScatterTooltip from 'lib/uPlotV2/components/Tooltip/ScatterTooltip';
-import {
-	ScatterTooltipProps,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-import uPlot from 'uplot';
-
-import { ScatterChartProps } from 'lib/visualization/charts/types';
-
-// Faceted uPlot reads series 1's facets at init, so a chart with no series cannot
-// mount; empty aligned data makes the shell show its no-data state instead.
-const EMPTY_ALIGNED_DATA: uPlot.AlignedData = [[]];
-
-export default function Scatter(props: ScatterChartProps): JSX.Element {
-	const {
-		children,
-		customTooltip,
-		channels,
-		resolvePointLabels,
-		pinnedTooltipElement,
-		...rest
-	} = props;
-
-	const renderTooltip = useCallback(
-		(args: TooltipRenderArgs): React.ReactNode => {
-			if (customTooltip) {
-				return customTooltip(args);
-			}
-			const tooltipProps: ScatterTooltipProps = {
-				...args,
-				id: rest.config.getId(),
-				channels,
-				resolvePointLabels,
-				decimalPrecision: rest.decimalPrecision,
-				canPinTooltip: rest.canPinTooltip,
-				renderTooltipFooter: rest.renderTooltipFooter,
-			};
-			return <ScatterTooltip {...tooltipProps} />;
-		},
-		[
-			customTooltip,
-			channels,
-			resolvePointLabels,
-			rest.config,
-			rest.decimalPrecision,
-			rest.canPinTooltip,
-			rest.renderTooltipFooter,
-		],
-	);
-
-	const hasSeries = rest.data.length > 1;
-
-	return (
-		<ChartWrapper
-			{...rest}
-			data={hasSeries ? rest.data : EMPTY_ALIGNED_DATA}
-			customTooltip={renderTooltip}
-			pinnedTooltipElement={pinnedTooltipElement}
-		>
-			{children}
-		</ChartWrapper>
-	);
-}

frontend/src/lib/visualization/charts/Scatter/__tests__/utils.test.ts

@@ -1,118 +0,0 @@
-import { DistributionType } from 'lib/uPlotV2/config/types';
-
-import {
-	buildScatterConfig,
-	prepareScatterChartData,
-	resolveAxisDistribution,
-	ScatterSeries,
-} from '../utils';
-
-jest.mock('lib/visualization/panels/utils/legendVisibilityUtils', () => ({
-	getStoredSeriesVisibility: jest.fn(),
-}));
-
-const SERIES: ScatterSeries[] = [
-	{ label: 'cart', xs: [10, 20], ys: [100, 200], sizes: [1, null] },
-	{ label: 'checkout', xs: [30], ys: [0] },
-];
-
-describe('prepareScatterChartData', () => {
-	it('lays series out as facets behind an empty x slot', () => {
-		expect(prepareScatterChartData(SERIES)).toStrictEqual([
-			null,
-			[
-				[10, 20],
-				[100, 200],
-				[1, null],
-			],
-			[[30], [0]],
-		]);
-	});
-});
-
-describe('resolveAxisDistribution', () => {
-	it('is linear unless log is asked for', () => {
-		expect(resolveAxisDistribution([0, 1], false)).toStrictEqual({
-			distribution: DistributionType.Linear,
-		});
-	});
-
-	it('is a plain log when every value is positive', () => {
-		expect(resolveAxisDistribution([1, 100], true)).toStrictEqual({
-			distribution: DistributionType.Logarithmic,
-		});
-	});
-
-	it('falls back to a symmetric log around the smallest magnitude when zero is present', () => {
-		expect(resolveAxisDistribution([0, 0.05, 300], true)).toStrictEqual({
-			distribution: DistributionType.SymmetricLog,
-			asinhThreshold: 0.01,
-		});
-	});
-
-	it('uses a unit threshold when nothing is positive', () => {
-		expect(resolveAxisDistribution([0, -5], true)).toStrictEqual({
-			distribution: DistributionType.SymmetricLog,
-			asinhThreshold: 1,
-		});
-	});
-});
-
-describe('buildScatterConfig', () => {
-	const build = (
-		overrides: Partial<Parameters<typeof buildScatterConfig>[0]> = {},
-	): ReturnType<typeof buildScatterConfig> =>
-		buildScatterConfig({
-			id: 'scatter',
-			series: SERIES,
-			isDarkMode: true,
-			x: { unit: 'reqps' },
-			y: { unit: 'ms', isLogScale: true },
-			...overrides,
-		});
-
-	it('emits a faceted plot with two value scales', () => {
-		const config = build().getConfig();
-
-		expect(config.mode).toBe(2);
-		expect(config.scales?.x).toMatchObject({ time: false, distr: 1 });
-		// The y column has a 0, so log becomes the symmetric variant.
-		expect(config.scales?.y).toMatchObject({ time: false, distr: 4 });
-	});
-
-	it('draws one faceted series per group with the plugin path builder', () => {
-		const config = build().getConfig();
-		const [, cart, checkout] = config.series ?? [];
-
-		expect(config.series).toHaveLength(3);
-		expect(cart).toMatchObject({
-			label: 'cart',
-			facets: [
-				{ scale: 'x', auto: true },
-				{ scale: 'y', auto: true },
-			],
-		});
-		expect(typeof cart?.paths).toBe('function');
-		expect(cart?.paths).toBe(checkout?.paths);
-		expect(cart?.points?.show).toBe(false);
-	});
-
-	it('formats both axes with their units', () => {
-		const config = build().getConfig();
-		const [xAxis, yAxis] = config.axes ?? [];
-
-		expect(xAxis).toMatchObject({ scale: 'x', side: 2, space: 90 });
-		expect(yAxis).toMatchObject({ scale: 'y', side: 3 });
-		expect(typeof xAxis?.values).toBe('function');
-		expect(typeof yAxis?.values).toBe('function');
-	});
-
-	it('registers a y threshold draw hook when thresholds are given', () => {
-		const config = build({
-			thresholds: [{ thresholdValue: 300, thresholdUnit: 'ms' }],
-		}).getConfig();
-
-		expect(config.hooks?.draw).toHaveLength(1);
-		expect(build().getConfig().hooks?.draw).toBeUndefined();
-	});
-});

frontend/src/lib/visualization/charts/Scatter/utils.ts

@@ -1,209 +0,0 @@
-import { PrecisionOption } from 'components/Graph/types';
-import {
-	DistributionType,
-	DrawStyle,
-	SelectionPreferencesSource,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { Threshold } from 'lib/uPlotV2/hooks/types';
-import {
-	applyScatterPlugin,
-	createScatterPlugin,
-	SCATTER_FACETS,
-} from 'lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin';
-import {
-	DEFAULT_SCATTER_POINT_SIZE,
-	ScatterChartData,
-	ScatterPointSize,
-	ScatterSeriesData,
-} from 'lib/uPlotV2/plugins/ScatterPlugin/types';
-import uPlot from 'uplot';
-
-/** Circle outline; the fill carries the colour. */
-const POINT_STROKE_WIDTH = 1;
-
-/** Unit-suffixed x labels are wider than uPlot's 50px default assumes. */
-const X_AXIS_TICK_SPACE_PX = 90;
-const X_AXIS_END_LABEL_PADDING_PX = 40;
-
-export interface ScatterSeries {
-	/** Group label, as the legend names it. */
-	label: string;
-	xs: number[];
-	ys: number[];
-	/** Optional third channel, in the caller's units. */
-	sizes?: Array<number | null>;
-}
-
-export interface ScatterAxisOptions {
-	unit?: string;
-	softMin?: number | null;
-	softMax?: number | null;
-	isLogScale?: boolean;
-}
-
-export interface BuildScatterConfigArgs {
-	id: string;
-	series: ScatterSeries[];
-	isDarkMode: boolean;
-	x: ScatterAxisOptions;
-	y: ScatterAxisOptions;
-	pointSize?: ScatterPointSize;
-	/** 0–1. */
-	fillOpacity?: number;
-	colorMapping?: Record<string, string>;
-	/** Drawn on the y axis. */
-	thresholds?: Threshold[];
-	decimalPrecision?: PrecisionOption;
-	selectionPreferencesSource?: SelectionPreferencesSource;
-	shouldSaveSelectionPreference?: boolean;
-}
-
-/** `[null, [xs, ys, sizes?], …]`: uPlot's faceted layout, series 0 empty. */
-export function prepareScatterChartData(
-	series: ScatterSeries[],
-): uPlot.AlignedData {
-	const data: ScatterChartData = [
-		null,
-		...series.map(
-			(entry): ScatterSeriesData =>
-				entry.sizes ? [entry.xs, entry.ys, entry.sizes] : [entry.xs, entry.ys],
-		),
-	];
-	return data as unknown as uPlot.AlignedData;
-}
-
-export interface AxisDistribution {
-	distribution: DistributionType;
-	asinhThreshold?: number;
-}
-
-/**
- * A log axis needs every value above zero; a rate that is sometimes 0 would drop
- * those points. Zero or negatives switch to a symmetric log whose linear band
- * ends at the smallest non-zero magnitude, so nothing is lost and the small
- * values still spread out.
- */
-export function resolveAxisDistribution(
-	values: number[],
-	isLogScale?: boolean,
-): AxisDistribution {
-	if (!isLogScale) {
-		return { distribution: DistributionType.Linear };
-	}
-	let minPositive = Infinity;
-	let needsSymmetric = false;
-	for (const value of values) {
-		if (!Number.isFinite(value)) {
-			continue;
-		}
-		if (value <= 0) {
-			needsSymmetric = true;
-		} else {
-			minPositive = Math.min(minPositive, value);
-		}
-	}
-	if (!needsSymmetric) {
-		return { distribution: DistributionType.Logarithmic };
-	}
-	const asinhThreshold = Number.isFinite(minPositive)
-		? 10 ** Math.floor(Math.log10(minPositive))
-		: 1;
-	return { distribution: DistributionType.SymmetricLog, asinhThreshold };
-}
-
-export function buildScatterConfig({
-	id,
-	series,
-	isDarkMode,
-	x,
-	y,
-	pointSize = DEFAULT_SCATTER_POINT_SIZE,
-	fillOpacity,
-	colorMapping = {},
-	thresholds,
-	decimalPrecision,
-	selectionPreferencesSource,
-	shouldSaveSelectionPreference,
-}: BuildScatterConfigArgs): UPlotConfigBuilder {
-	const builder = new UPlotConfigBuilder({
-		id,
-		selectionPreferencesSource,
-		shouldSaveSelectionPreference,
-	});
-
-	const plugin = createScatterPlugin({ pointSize });
-	applyScatterPlugin(builder, plugin);
-	// The last x label is centred on the plot's right edge; room for its unit.
-	builder.setPadding([16, X_AXIS_END_LABEL_PADDING_PX, 8, 8]);
-
-	const xDistribution = resolveAxisDistribution(
-		series.flatMap((entry) => entry.xs),
-		x.isLogScale,
-	);
-	const yDistribution = resolveAxisDistribution(
-		series.flatMap((entry) => entry.ys),
-		y.isLogScale,
-	);
-
-	const yThresholds =
-		thresholds && thresholds.length > 0
-			? { scaleKey: 'y', thresholds, yAxisUnit: y.unit }
-			: undefined;
-
-	builder.addScale({
-		scaleKey: 'x',
-		time: false,
-		softMin: x.softMin ?? undefined,
-		softMax: x.softMax ?? undefined,
-		...xDistribution,
-	});
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		softMin: y.softMin ?? undefined,
-		softMax: y.softMax ?? undefined,
-		thresholds: yThresholds,
-		...yDistribution,
-	});
-
-	builder.addAxis({
-		scaleKey: 'x',
-		side: 2,
-		isDarkMode,
-		isTimeAxis: false,
-		yAxisUnit: x.unit ?? '',
-		decimalPrecision,
-		isLogScale: xDistribution.distribution !== DistributionType.Linear,
-		space: X_AXIS_TICK_SPACE_PX,
-	});
-	builder.addAxis({
-		scaleKey: 'y',
-		side: 3,
-		isDarkMode,
-		yAxisUnit: y.unit ?? '',
-		decimalPrecision,
-		isLogScale: yDistribution.distribution !== DistributionType.Linear,
-	});
-
-	series.forEach((entry) => {
-		builder.addSeries({
-			scaleKey: 'y',
-			label: entry.label,
-			colorMapping,
-			drawStyle: DrawStyle.Scatter,
-			pathBuilder: plugin.pathBuilder,
-			facets: SCATTER_FACETS,
-			lineWidth: POINT_STROKE_WIDTH,
-			pointSize: pointSize.fixed,
-			fillOpacity,
-			isDarkMode,
-		});
-	});
-
-	if (yThresholds) {
-		builder.addThresholds(yThresholds);
-	}
-
-	return builder;
-}

frontend/src/lib/visualization/charts/types.ts

@@ -9,10 +9,6 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import type {
-	ScatterChannels,
-	ScatterPointLabel,
-} from 'lib/uPlotV2/plugins/ScatterPlugin/types';
 import {
 	DashboardCursorSync,
 	SyncTooltipFilterMode,
@@ -78,15 +74,6 @@ export interface HistogramChartProps extends ChartWrapperProps {
 	isQueriesMerged?: boolean;
 }
 
-/** `data` is mode-2 (`prepareScatterChartData`); `config` comes from `buildScatterConfig`. */
-export interface ScatterChartProps extends ChartWrapperProps {
-	channels: ScatterChannels;
-	resolvePointLabels?: (
-		seriesIndex: number,
-		dataIndex: number,
-	) => ScatterPointLabel[];
-}
-
 /**
  * One resolved pie/donut slice: a display label, its (already parsed) positive
  * numeric value, and the colour used for the arc + legend swatch.

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

@@ -1,6 +1,7 @@
 import {
 	Dispatch,
 	MutableRefObject,
+	ReactNode,
 	SetStateAction,
 	useEffect,
 	useMemo,
@@ -29,6 +30,7 @@ function TimeSeriesViewContainer({
 	setWarning,
 	setIsLoadingQueries,
 	queryKeyRef,
+	headerActions,
 }: TimeSeriesViewProps): JSX.Element {
 	const { stagedQuery, currentQuery, panelType } = useQueryBuilder();
 
@@ -126,6 +128,7 @@ function TimeSeriesViewContainer({
 				dataSource={dataSource}
 				setWarning={setWarning}
 				allowExport
+				headerActions={headerActions}
 			/>
 		</div>
 	);
@@ -137,11 +140,13 @@ interface TimeSeriesViewProps {
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
 	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
 	queryKeyRef?: MutableRefObject<any>;
+	headerActions?: ReactNode;
 }
 
 TimeSeriesViewContainer.defaultProps = {
 	dataSource: DataSource.TRACES,
 	queryKeyRef: undefined,
+	headerActions: undefined,
 };
 
 export default TimeSeriesViewContainer;

frontend/src/pages/TracesExplorer/index.tsx

@@ -13,6 +13,8 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
+import ExplorerActions from 'container/ExplorerActions/ExplorerActions';
+import { getExportPanelType } from 'container/ExplorerActions/utils';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
@@ -194,6 +196,24 @@ function TracesExplorer(): JSX.Element {
 		[stagedQuery, panelType],
 	);
 
+	const exportDashboardQuery = useMemo(
+		() =>
+			getExportQueryData(
+				exportDefaultQuery,
+				getExportPanelType(panelType),
+				options,
+			),
+		[exportDefaultQuery, panelType, options],
+	);
+
+	const explorerActions = (
+		<ExplorerActions
+			query={stagedQuery ? exportDefaultQuery : null}
+			dashboardQuery={stagedQuery ? exportDashboardQuery : null}
+			sourcepage={DataSource.TRACES}
+		/>
+	);
+
 	const handleExport = useCallback(
 		(dashboard: ExportDashboard | null, isNewDashboard?: boolean): void => {
 			if (!dashboard || !panelType) {
@@ -318,6 +338,7 @@ function TracesExplorer(): JSX.Element {
 									setWarning={setWarning}
 									setIsLoadingQueries={setIsLoadingQueries}
 									queryKeyRef={listQueryKeyRef}
+									headerActions={explorerActions}
 								/>
 							</div>
 						)}
@@ -329,6 +350,7 @@ function TracesExplorer(): JSX.Element {
 									setWarning={setWarning}
 									setIsLoadingQueries={setIsLoadingQueries}
 									queryKeyRef={listQueryKeyRef}
+									headerActions={explorerActions}
 								/>
 							</div>
 						)}
@@ -341,6 +363,7 @@ function TracesExplorer(): JSX.Element {
 									setWarning={setWarning}
 									setIsLoadingQueries={setIsLoadingQueries}
 									queryKeyRef={listQueryKeyRef}
+									headerActions={explorerActions}
 								/>
 							</div>
 						)}
@@ -351,6 +374,7 @@ function TracesExplorer(): JSX.Element {
 									setWarning={setWarning}
 									setIsLoadingQueries={setIsLoadingQueries}
 									queryKeyRef={listQueryKeyRef}
+									headerActions={explorerActions}
 								/>
 							</div>
 						)}