refactor(charts): trim scatter chart layer comments and dead code

Max/min decades let one outlier decide and never left linear with zeros.
Compare middle-half coverage instead, falling back to symlog.

.gitattributes

@@ -1,3 +1,4 @@
 *.css linguist-detectable=false
 *.stories.mocks.tsx linguist-generated=true
 **/__story_mockdata__/** linguist-generated=true
+tests/e2e/drivers/** linguist-generated=true

.github/workflows/e2eci.yaml

@@ -3,16 +3,44 @@ name: e2eci
 on:
   pull_request:
     types:
+      - opened
+      - synchronize
+      - reopened
       - labeled
   pull_request_target:
     types:
       - labeled
+  merge_group:
+    types:
+      - checks_requested
+
+concurrency:
+  group: e2eci-${{ github.event_name }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 
 jobs:
+  changes:
+    if: github.event_name != 'merge_group'
+    runs-on: ubuntu-latest
+    outputs:
+      e2e: ${{ steps.changes.outputs.e2e }}
+    steps:
+      - name: changes
+        id: changes
+        env:
+          GH_TOKEN: ${{ github.token }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          LABELED: ${{ contains(github.event.pull_request.labels.*.name, 'safe-to-e2e') }}
+        run: |
+          files=$(gh api "repos/$GITHUB_REPOSITORY/pulls/$PR_NUMBER/files" --paginate --jq '.[].filename')
+          if [ "$LABELED" = true ] || grep -qE '^(frontend|tests/e2e)/' <<< "$files"; then
+            echo "e2e=true" >> "$GITHUB_OUTPUT"
+          fi
   fmtlint:
+    needs: changes
     if: |
       ((github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-e2e')
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && needs.changes.outputs.e2e == 'true'
     runs-on: ubuntu-latest
     steps:
       - name: checkout
@@ -41,9 +69,10 @@ jobs:
         project:
           - chromium
         shard: [1, 2, 3, 4]
+    needs: changes
     if: |
       ((github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-e2e')
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && needs.changes.outputs.e2e == 'true'
     runs-on: ubuntu-latest
     timeout-minutes: 30
     steps:
@@ -152,3 +181,17 @@ jobs:
           name: playwright-artifacts-${{ matrix.project }}-${{ matrix.shard }}
           path: tests/e2e/artifacts/
           retention-days: 5
+  # Required status check. Fails when e2e was needed but did not pass,
+  # including fork and dependabot PRs still waiting on safe-to-test.
+  e2e:
+    if: always()
+    needs: [changes, fmtlint, test]
+    runs-on: ubuntu-latest
+    steps:
+      - name: verdict
+        if: |
+          github.event_name != 'merge_group' && (needs.changes.result != 'success' ||
+          (needs.changes.outputs.e2e == 'true' && (needs.fmtlint.result != 'success' || needs.test.result != 'success')))
+        run: |
+          echo "::error::e2e did not pass. Fork and dependabot PRs need the safe-to-test label."
+          exit 1

docs/api/openapi.yml

@@ -3702,6 +3702,13 @@ components:
           nullable: true
           type: number
       type: object
+    DashboardtypesAxisScale:
+      enum:
+      - auto
+      - linear
+      - log
+      - symlog
+      type: string
     DashboardtypesBarChartPanelSpec:
       properties:
         axes:
@@ -4444,6 +4451,7 @@ components:
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
           signoz/PieChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
+          signoz/ScatterPlotPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
           signoz/TablePanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
           signoz/TextPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
           signoz/TimeSeriesPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
@@ -4459,6 +4467,7 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -4472,6 +4481,7 @@ components:
       - signoz/ListPanel
       - signoz/TextPanel
       - signoz/HeatmapPanel
+      - signoz/ScatterPlotPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
       properties:
@@ -4557,6 +4567,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/ScatterPlotPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec:
       properties:
         kind:
@@ -4636,6 +4658,16 @@ components:
         visualization:
           $ref: '#/components/schemas/DashboardtypesBasicVisualization'
       type: object
+    DashboardtypesPointDiameter:
+      maximum: 40
+      minimum: 2
+      nullable: true
+      type: integer
+    DashboardtypesPointOpacity:
+      maximum: 1
+      minimum: 0.1
+      nullable: true
+      type: number
     DashboardtypesPostableDashboardV2:
       properties:
         generateName:
@@ -4824,6 +4856,104 @@ components:
       required:
       - queryValue
       type: object
+    DashboardtypesScatterPlotAxes:
+      properties:
+        x:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+        "y":
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+      type: object
+    DashboardtypesScatterPlotAxis:
+      properties:
+        label:
+          description: Axis title. Empty draws none.
+          type: string
+        scale:
+          $ref: '#/components/schemas/DashboardtypesAxisScale'
+        softMax:
+          nullable: true
+          type: number
+        softMin:
+          nullable: true
+          type: number
+      type: object
+    DashboardtypesScatterPlotChartAppearance:
+      properties:
+        points:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotPoints'
+      type: object
+    DashboardtypesScatterPlotDimensions:
+      properties:
+        colorBy:
+          description: Group-by label names (e.g. k8s.namespace.name) whose combined
+            values colour dots and drive the legend. Empty colours by every group-by
+            label.
+          items:
+            type: string
+          nullable: true
+          type: array
+        sizeBy:
+          description: Value column key that scales dot size. Empty draws every dot
+            at the default size.
+          type: string
+        x:
+          description: Value column key (queryName, or queryName.expression for a
+            multi-aggregation query) plotted on the x axis. Empty uses the first value
+            column.
+          type: string
+        "y":
+          description: Value column key plotted on the y axis. Empty uses the second
+            value column.
+          type: string
+      type: object
+    DashboardtypesScatterPlotPanelSpec:
+      properties:
+        axes:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxes'
+        chartAppearance:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotChartAppearance'
+        dimensions:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotDimensions'
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesTableFormatting'
+        legend:
+          $ref: '#/components/schemas/DashboardtypesLegend'
+        thresholds:
+          items:
+            $ref: '#/components/schemas/DashboardtypesScatterPlotThreshold'
+          nullable: true
+          type: array
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+      type: object
+    DashboardtypesScatterPlotPoints:
+      properties:
+        maxSize:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+        minSize:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+        opacity:
+          $ref: '#/components/schemas/DashboardtypesPointOpacity'
+        size:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+      type: object
+    DashboardtypesScatterPlotThreshold:
+      properties:
+        axis:
+          $ref: '#/components/schemas/DashboardtypesThresholdAxis'
+        color:
+          type: string
+        label:
+          type: string
+        unit:
+          type: string
+        value:
+          format: double
+          type: number
+      required:
+      - value
+      - color
+      type: object
     DashboardtypesSource:
       enum:
       - user
@@ -4937,6 +5067,11 @@ components:
       - value
       - name
       type: object
+    DashboardtypesThresholdAxis:
+      enum:
+      - x
+      - "y"
+      type: string
     DashboardtypesThresholdFormat:
       enum:
       - text

docs/contributing/tests/e2e.md

@@ -86,6 +86,9 @@ tests/
     ├── .env.local             # generated by bootstrap/setup.py (gitignored)
     ├── bootstrap/
     │   └── setup.py           # test_setup / test_teardown — pytest lifecycle
+    ├── drivers/               # the driver kit and one driver per feature
+    │   ├── kit.ts
+    │   └── routing.ts
     ├── fixtures/              # Playwright test fixtures (test.extend) only
     │   └── auth.ts
     ├── helpers/               # function helpers + the constants they share with tests
@@ -112,6 +115,24 @@ These two folders look similar but mean different things:
 
 Rule of thumb: if it's a `test.extend` fixture, put it in `fixtures/`. If it's a function you call explicitly (or a constant the function uses), put it in `helpers/`. If it's a static file the helpers read, put it in `testdata/`.
 
+### Drivers
+
+New suites use a driver rather than loose helpers. A driver is a function that closes over the page and returns the feature's actions and locators. `drivers/kit.ts` turns it into a fixture, so a spec imports one module and never passes a `page` around:
+
+```ts
+import { expect, PATH, test } from '../../drivers/routing';
+
+test('TC-09 RouteTab switches the url', async ({ routing }) => {
+	await routing.goto(PATH.metricsSummary);
+	await expect(routing.activeRouteTab(PATH.metricsSummary)).toBeVisible();
+});
+```
+
+- `driver(name, build)` adds a test-scoped fixture built on `authedPage`.
+- `seeded(name, open, close)` adds a worker-scoped seed. `open` and `close` run on a throwaway admin page.
+- A driver reuses helpers by calling them, never by reaching for another fixture.
+- `drivers/` is AI-owned: coding agents generate and maintain it with the specs, and `.gitattributes` collapses it in diffs.
+
 ### Extended fixtures
 
 For features needing complex setup (API-seeded data, ruler evaluation waits, cleanup), create domain-specific fixtures that extend `auth`. Group them in `fixtures/<domain>/`.

frontend/__mocks__/uplotMock.ts

@@ -57,6 +57,7 @@ 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(
@@ -70,6 +71,7 @@ function MockUPlot(
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
+MockUPlot.orient = mockOrient;
 // Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
 MockUPlot.pxRatio = 1;
 

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -72,6 +72,8 @@ interface CustomTimePickerProps {
 	maxTime: number;
 	/** When true, zoom-out button is hidden (e.g. in drawer/modal time selection) */
 	isModalTimeSelection?: boolean;
+	/** Lands on the trigger input. Not spread — the component takes no rest props. */
+	'data-testid'?: string;
 }
 
 function CustomTimePicker({
@@ -95,6 +97,7 @@ function CustomTimePicker({
 	minTime,
 	maxTime,
 	isModalTimeSelection = false,
+	'data-testid': dataTestId,
 }: CustomTimePickerProps): JSX.Element {
 	const [selectedTimePlaceholderValue, setSelectedTimePlaceholderValue] =
 		useState('Select / Enter Time Range');
@@ -596,6 +599,7 @@ function CustomTimePicker({
 				>
 					<Input
 						ref={inputRef}
+						data-testid={dataTestId}
 						autoComplete="off"
 						className={cx(
 							'timeSelection-input',
@@ -682,4 +686,5 @@ CustomTimePicker.defaultProps = {
 	onExitLiveLogs: noop,
 	showLiveLogs: false,
 	showRecentlyUsed: true,
+	'data-testid': undefined,
 };

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -180,6 +180,7 @@ function CustomTimePickerPopoverContent({
 						type="text"
 						className="time-btns"
 						key={option.label + option.value}
+						data-testid={`time-chip-${option.value}`}
 						onClick={(): void => {
 							handleExitLiveLogs();
 							onSelectHandler(option.label, option.value);
@@ -259,6 +260,7 @@ function CustomTimePickerPopoverContent({
 						<Button
 							type="text"
 							key={option.label + option.value}
+							data-testid={`time-option-${option.value}`}
 							onClick={(e: React.MouseEvent<HTMLButtonElement>): void => {
 								e.stopPropagation();
 								e.preventDefault();

frontend/src/components/NotFound/__snapshots__/NotFound.test.tsx.snap

@@ -98,6 +98,7 @@ exports[`Not Found page test should render Not Found page without errors 1`] = `
 
 <div
     class="c0"
+    data-testid="not-found"
   >
     <img
       alt="not-found"

frontend/src/components/NotFound/index.tsx

@@ -6,7 +6,7 @@ import { Button, Container, Text, TextContainer } from './styles';
 
 function NotFound({ text = defaultText }: Props): JSX.Element {
 	return (
-		<Container>
+		<Container data-testid="not-found">
 			<NotFoundImage />
 
 			<TextContainer>

frontend/src/components/TanStackTableView/TanStackRowCell.tsx

@@ -35,7 +35,8 @@ function TanStackRowCellInner<TData>({
 		<td
 			className={cx(tableStyles.tableCell, 'tanstack-cell-' + cell.column.id)}
 			data-single-column={hasSingleColumn || undefined}
-			onClick={onClick}
+			// While loading, rowData may be a placeholder ({ id: 'skeleton-N' }).
+			onClick={showSkeleton ? undefined : onClick}
 		>
 			{showSkeleton ? (
 				<Skeleton.Input

frontend/src/components/TanStackTableView/__tests__/TanStackTableView.test.tsx

@@ -91,6 +91,18 @@ describe('TanStackTableView Integration', () => {
 			expect(screen.getByRole('table')).toBeInTheDocument();
 		});
 
+		it('does not call onRowClick for skeleton rows', async () => {
+			const user = userEvent.setup();
+			const onRowClick = jest.fn();
+			renderTanStackTable({
+				props: { data: [], isLoading: true, onRowClick },
+			});
+
+			await user.click(screen.getAllByRole('cell')[0]);
+
+			expect(onRowClick).not.toHaveBeenCalled();
+		});
+
 		it('shows loading spinner for infinite scroll when loading', () => {
 			renderTanStackTable({
 				props: { isLoading: true, onEndReached: jest.fn() },

frontend/src/container/RolesSettings/CreateEditRolePage/CreateEditRolePage.tsx

@@ -314,7 +314,7 @@ function CreateEditRolePageContent(): JSX.Element {
 				cancelText="Keep editing"
 				onConfirm={confirmNavigation}
 				onCancel={cancelNavigation}
-				data-testid="discard-changes-dialog"
+				testId="discard-changes-dialog"
 			>
 				<Typography>
 					{isCreateMode

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

@@ -0,0 +1,98 @@
+// Sections own the padding so the footer spans edge to edge.
+.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);
+}
+
+.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

@@ -0,0 +1,107 @@
+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';
+
+/** Own component: the shared Tooltip lists one row per series at a shared x. */
+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

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,89 @@
+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;
+}
+
+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

@@ -6,6 +6,10 @@ import uPlot from 'uplot';
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { LegendItem } from '../config/types';
 import { HeatmapSeries, HeatmapYAxis } from '../plugins/HeatmapPlugin/types';
+import type {
+	ScatterChannels,
+	ScatterPointLabel,
+} from '../plugins/ScatterPlugin/types';
 import { SyncTooltipFilterMode } from '../plugins/TooltipPlugin/types';
 
 /**
@@ -119,6 +123,16 @@ export interface HeatmapTooltipProps
 	groupColor: string;
 }
 
+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

@@ -39,6 +39,16 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		};
 	}
 
+	/** Styled like the grid. */
+	private buildBorderConfig(
+		grid: uPlot.Axis.Grid | undefined,
+	): uPlot.Axis.Border | undefined {
+		if (this.props.showBorder === false || !grid || grid.show === false) {
+			return undefined;
+		}
+		return { show: true, stroke: grid.stroke, width: grid.width };
+	}
+
 	/**
 	 * Build ticks configuration
 	 */
@@ -57,33 +67,43 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		};
 	}
 
-	/**
-	 * Build values formatter for X-axis (time)
-	 */
+	/** Time ticks, or unit-formatted values when a unit/precision is set. */
 	private buildXAxisValuesFormatter(): uPlot.Axis.Values | undefined {
-		const { isTimeAxis } = this.props;
+		const { isTimeAxis, yAxisUnit, decimalPrecision } = this.props;
 
 		if (isTimeAxis) {
 			return uPlotXAxisValuesFormat as uPlot.Axis.Values;
 		}
 
+		if (yAxisUnit !== undefined || decimalPrecision !== undefined) {
+			return this.buildValueAxisFormatter();
+		}
+
 		return undefined;
 	}
 
-	/**
-	 * Build values formatter for Y-axis (values with units)
-	 */
-	private buildYAxisValuesFormatter(): uPlot.Axis.Values {
-		const { yAxisUnit, decimalPrecision } = this.props;
+	/** Blanks splits outside the scale; uPlot's asinh splits always include ±threshold. */
+	private buildValueAxisFormatter(): uPlot.Axis.Values {
+		const { yAxisUnit, decimalPrecision, scaleKey } = this.props;
 
-		return (_, t): string[] =>
-			t.map((v) => {
-				if (v === null || v === undefined || Number.isNaN(v)) {
+		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 '';
 				}
 				const value = getToolTipValue(v.toString(), yAxisUnit, decimalPrecision);
 				return `${value}`;
 			});
+		};
 	}
 
 	/**
@@ -101,7 +121,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		return scaleKey === 'x'
 			? this.buildXAxisValuesFormatter()
 			: scaleKey === 'y'
-				? this.buildYAxisValuesFormatter()
+				? this.buildValueAxisFormatter()
 				: undefined;
 	}
 
@@ -149,10 +169,12 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 			side = 2, // bottom by default
 			space,
 			splits,
+			filter,
 			gap = 5, // default gap is 5
 		} = this.props;
 
 		const grid = this.buildGridConfig();
+		const border = this.buildBorderConfig(grid);
 		const ticks = this.buildTicksConfig();
 		const values = this.buildValuesFormatter();
 		const size = this.buildSizeCalculator();
@@ -177,6 +199,9 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (ticks) {
 			axisConfig.ticks = ticks;
 		}
+		if (border) {
+			axisConfig.border = border;
+		}
 		if (values) {
 			axisConfig.values = values;
 		}
@@ -189,6 +214,9 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (space !== undefined) {
 			axisConfig.space = space;
 		}
+		if (filter) {
+			axisConfig.filter = filter;
+		}
 		if (size) {
 			axisConfig.size = size;
 		}

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

@@ -19,6 +19,7 @@ import {
 	ConfigBuilder,
 	ConfigBuilderProps,
 	LegendItem,
+	PlotMode,
 	SelectionPreferencesSource,
 	StackMode,
 } from './types';
@@ -65,6 +66,8 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	private stackMode: StackMode = StackMode.None;
 
+	private mode: PlotMode = PlotMode.Aligned;
+
 	private cursor: Cursor | undefined;
 
 	private hooks: Hooks.Arrays = {};
@@ -160,6 +163,10 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		return this.stackMode;
 	}
 
+	setMode(mode: PlotMode): void {
+		this.mode = mode;
+	}
+
 	/**
 	 * Add or merge a scale configuration
 	 */
@@ -512,6 +519,10 @@ 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

@@ -40,6 +40,7 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 			range,
 			thresholds,
 			logBase = 10,
+			asinhThreshold,
 			padMinBy = 0,
 			padMaxBy = 0.05,
 		} = this.props;
@@ -99,6 +100,7 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 			time,
 			distr,
 			logBase,
+			asinhThreshold,
 		});
 
 		const { rangeConfig, hardMinOnly, hardMaxOnly, hasFixedRange } =

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

@@ -87,6 +87,8 @@ 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) {
@@ -122,7 +124,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			return { paths: pathBuilder };
 		}
 
-		if (drawStyle === DrawStyle.Points) {
+		if (drawStyle === DrawStyle.Points || drawStyle === DrawStyle.Scatter) {
 			return { paths: (): null => null };
 		}
 
@@ -194,6 +196,10 @@ 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;
 	}
 
@@ -218,7 +224,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 	}
 
 	getConfig(): ExtendedSeries {
-		const { scaleKey, label, spanGaps, show = true, metric } = this.props;
+		const { scaleKey, label, spanGaps, show = true, metric, facets } = this.props;
 
 		const resolvedLineColor = this.getLineColor();
 
@@ -246,6 +252,7 @@ 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

@@ -120,6 +120,41 @@ describe('UPlotAxisBuilder', () => {
 		});
 	});
 
+	it('draws the axis line by default, styled like the grid', () => {
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ isDarkMode: true, grid: { width: 0.5 } }),
+		).getConfig();
+
+		expect(config.border).toStrictEqual({
+			show: true,
+			stroke: config.grid?.stroke,
+			width: 0.5,
+		});
+	});
+
+	it('leaves the axis line off when showBorder is false', () => {
+		expect(
+			new UPlotAxisBuilder(createAxisProps({ showBorder: false })).getConfig(),
+		).not.toHaveProperty('border');
+	});
+
+	it('leaves the axis line off when the grid is hidden', () => {
+		expect(
+			new UPlotAxisBuilder(createAxisProps({ grid: { show: false } })).getConfig(),
+		).not.toHaveProperty('border');
+	});
+
+	it('passes explicit splits and a label filter through to uPlot', () => {
+		const splits = jest.fn();
+		const filter = jest.fn();
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ splits, filter }),
+		).getConfig();
+
+		expect(config.splits).toBe(splits);
+		expect(config.filter).toBe(filter);
+	});
+
 	it('uses provided ticks config when present and falls back to defaults otherwise', () => {
 		const customTicks = { width: 1, show: false };
 		const withTicks = new UPlotAxisBuilder(
@@ -376,3 +411,51 @@ 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,7 +5,12 @@ import {
 	STEP_INTERVAL_MULTIPLIER,
 } from '../../constants';
 import type { SeriesProps } from '../types';
-import { DrawStyle, SelectionPreferencesSource, StackMode } from '../types';
+import {
+	DrawStyle,
+	PlotMode,
+	SelectionPreferencesSource,
+	StackMode,
+} from '../types';
 import { UPlotConfigBuilder } from '../UPlotConfigBuilder';
 
 // Mock only the real boundary that hits localStorage
@@ -651,3 +656,14 @@ 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.getConfig().mode).toBe(2);
+	});
+});

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

@@ -399,3 +399,39 @@ 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

@@ -78,8 +78,12 @@ export interface AxisProps {
 	};
 	/** Explicit tick formatter, replacing the scale's default (time / unit-formatted). */
 	values?: uPlot.Axis.Values;
-	/** Explicit axis splits, overriding the default tick calculation. */
+	/** Explicit tick positions, replacing uPlot's per-distribution default. */
 	splits?: uPlot.Axis.Splits;
+	/** Which splits get a label, replacing uPlot's per-distribution default. */
+	filter?: uPlot.Axis.Filter;
+	/** Draw the axis line along the plot edge, styled like the grid. Default true. */
+	showBorder?: boolean;
 	/** Pixels between the ticks and their labels; also feeds the y axis width calculation. */
 	gap?: number;
 	/** Explicit axis thickness. Left unset, the y axis sizes itself to its widest label. */
@@ -90,7 +94,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 y axis ticks are formatted in (`spec.formatting.unit`). */
+	/** Unit the value ticks are formatted in (`spec.formatting.unit`); a non-time x axis reads it too. */
 	yAxisUnit?: string;
 	/**
 	 * X axis carries timestamps, so its ticks format as dates/times. Declared by the caller
@@ -109,6 +113,14 @@ export interface AxisProps {
 export enum DistributionType {
 	Linear = 'linear',
 	Logarithmic = 'logarithmic',
+	/** arcsinh: linear within ±`asinhThreshold`, log beyond; places zero and negatives. */
+	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 {
@@ -125,6 +137,8 @@ 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 {
@@ -146,6 +160,8 @@ export enum DrawStyle {
 	Points = 'points',
 	Bar = 'bar',
 	Histogram = 'histogram',
+	/** Mode 2; drawn by the caller's `pathBuilder`. */
+	Scatter = 'scatter',
 }
 
 export enum LineInterpolation {
@@ -229,6 +245,8 @@ 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

@@ -0,0 +1,114 @@
+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

@@ -0,0 +1,286 @@
+import uPlot from 'uplot';
+
+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('rings the hit disc, in CSS pixels, with a gap around it', () => {
+		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;
+		// The 8px disc spans 6..14; the ring sits 3px out and is 2px wide.
+		expect(bbox?.(u, 1)).toStrictEqual({
+			left: 1,
+			top: 81,
+			width: 18,
+			height: 18,
+		});
+		expect(bbox?.(u, 2)).toMatchObject({ width: 0, height: 0 });
+	});
+
+	it('snaps the ring to whole pixels without moving its centre', () => {
+		const plugin = createScatterPlugin({
+			pointSize: { fixed: 7, min: 4, max: 20 },
+		});
+		const u = createFakePlot({
+			series: [{ xs: [10], ys: [10] }],
+			cursor: { left: 10, top: 90 },
+		});
+		drawAll(u, plugin);
+		scan(u, plugin);
+
+		// The 7px disc starts at 6.5, so the ring's edge would land on 1.5.
+		const ring = plugin.cursor.points?.bbox?.(u, 1);
+		expect(ring).toMatchObject({ left: 1, width: 18 });
+		expect((ring?.left ?? 0) + (ring?.width ?? 0) / 2).toBe(10);
+	});
+
+	it('draws the hover marker as an outline in the series colour', () => {
+		const plugin = createScatterPlugin();
+		const u = {
+			series: [{}, { stroke: (): string => '#E5484D' }, { stroke: '#30A46C' }],
+		} as unknown as uPlot;
+		const points = plugin.cursor.points as {
+			fill: (u: uPlot, seriesIdx: number) => string;
+			stroke: (u: uPlot, seriesIdx: number) => string;
+			width: (u: uPlot, seriesIdx: number, size: number) => number;
+		};
+
+		expect(points.fill(u, 1)).toBe('transparent');
+		expect(points.stroke(u, 1)).toBe('#E5484D');
+		expect(points.stroke(u, 2)).toBe('#30A46C');
+		expect(points.width(u, 1, 0)).toBe(2);
+	});
+
+	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(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

@@ -0,0 +1,86 @@
+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;
+}
+
+/** Size extent across all series, so equal values draw equal discs. */
+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;
+}
+
+/** Area, not diameter, scales with the value. */
+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);
+}
+
+/** Disc whose centre is closest, within `tolerance` px; `null` if none. */
+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

@@ -0,0 +1,225 @@
+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';
+
+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;
+
+/** CSS pixels between a hovered disc and the outline ring drawn around it. */
+const HOVER_RING_GAP_PX = 3;
+const HOVER_RING_WIDTH_PX = 2;
+
+/** uPlot ceils a cursor point's left/top but not its size; snap so the ring stays centred. */
+function snapToPixel(start: number, length: number): [number, number] {
+	const snapped = Math.floor(start);
+	return [snapped, length + (start - snapped) * 2];
+}
+
+export function getSeriesStroke(u: uPlot, seriesIdx: number): string {
+	const { stroke } = u.series[seriesIdx];
+	const color = typeof stroke === 'function' ? stroke(u, seriesIdx) : stroke;
+	return typeof color === 'string' ? color : '';
+}
+
+/** uPlot caches built paths on the series; the field is internal to it. */
+type SeriesWithPaths = Series & { _paths?: Series.Paths | null };
+
+export interface ScatterPlugin {
+	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;
+
+	// Spans every series; cached per dataset.
+	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;
+				const inset = HOVER_RING_GAP_PX + HOVER_RING_WIDTH_PX;
+				const [left, width] = snapToPixel(
+					hit.x / pxRatio - inset,
+					hit.w / pxRatio + inset * 2,
+				);
+				const [top, height] = snapToPixel(
+					hit.y / pxRatio - inset,
+					hit.h / pxRatio + inset * 2,
+				);
+				return { left, top, width, height };
+			},
+			fill: (): string => 'transparent',
+			stroke: getSeriesStroke,
+			width: (): number => HOVER_RING_WIDTH_PX,
+		},
+		// 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 holds only what the path builder drew, so force a rebuild.
+				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

@@ -0,0 +1,54 @@
+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;
+}
+
+/** Parallel columns; a `null` size 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;
+}
+
+export interface ScatterChannels {
+	x: ScatterChannel;
+	y: ScatterChannel;
+	size?: ScatterChannel;
+}
+
+export interface ScatterPointLabel {
+	key: string;
+	value: string;
+}

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

@@ -0,0 +1,52 @@
+import type uPlot from 'uplot';
+
+import { buildClickData } from '../utils';
+
+jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
+	getFocusedSeriesAtPosition: jest.fn(() => ({ seriesIndex: 1 })),
+}));
+
+const event = {
+	offsetX: 10,
+	offsetY: 20,
+	clientX: 110,
+	clientY: 220,
+} as MouseEvent;
+
+describe('buildClickData', () => {
+	it('skips the x-index lookups on a faceted plot, which has no shared x series', () => {
+		const posToIdx = jest.fn(() => {
+			throw new Error('faceted data[0] is null');
+		});
+		const plot = {
+			data: [null],
+			posToVal: (pos: number): number => pos * 2,
+			posToIdx,
+		} as unknown as uPlot;
+
+		expect(buildClickData(event, plot)).toStrictEqual({
+			xValue: 20,
+			yValue: 40,
+			focusedSeries: null,
+			clickedDataTimestamp: 20,
+			mouseX: 10,
+			mouseY: 20,
+			absoluteMouseX: 110,
+			absoluteMouseY: 220,
+		});
+		expect(posToIdx).not.toHaveBeenCalled();
+	});
+
+	it('resolves the focused series and clicked timestamp on an aligned plot', () => {
+		const plot = {
+			data: [[100, 200, 300]],
+			posToVal: (pos: number): number => pos,
+			posToIdx: (): number => 1,
+		} as unknown as uPlot;
+
+		expect(buildClickData(event, plot)).toMatchObject({
+			focusedSeries: { seriesIndex: 1 },
+			clickedDataTimestamp: 200,
+		});
+	});
+});

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

@@ -174,6 +174,24 @@ export function createLayoutObserver(
 export function buildClickData(event: MouseEvent, plot: uPlot): ChartClickData {
 	const xValue = plot.posToVal(event.offsetX, 'x');
 	const yValue = plot.posToVal(event.offsetY, 'y');
+	const pointer = {
+		mouseX: event.offsetX,
+		mouseY: event.offsetY,
+		absoluteMouseX: event.clientX,
+		absoluteMouseY: event.clientY,
+	};
+
+	// Faceted (scatter): no shared x, so `posToIdx` would throw.
+	if (plot.data[0] == null) {
+		return {
+			xValue,
+			yValue,
+			focusedSeries: null,
+			clickedDataTimestamp: xValue,
+			...pointer,
+		};
+	}
+
 	const focusedSeries = getFocusedSeriesAtPosition(event, plot);
 
 	const dataIndex = plot.posToIdx(event.offsetX);
@@ -193,9 +211,6 @@ export function buildClickData(event: MouseEvent, plot: uPlot): ChartClickData {
 		yValue,
 		focusedSeries,
 		clickedDataTimestamp,
-		mouseX: event.offsetX,
-		mouseY: event.offsetY,
-		absoluteMouseX: event.clientX,
-		absoluteMouseY: event.clientY,
+		...pointer,
 	};
 }

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

@@ -0,0 +1,59 @@
+import type uPlot from 'uplot';
+
+import { logScaleSplits, spacedLogLabels } from '../logGridSplits';
+
+describe('logScaleSplits', () => {
+	const splitsFor = (min: number, max: number): number[] =>
+		(
+			logScaleSplits as (
+				u: uPlot,
+				axisIdx: number,
+				min: number,
+				max: number,
+			) => number[]
+		)({} as uPlot, 0, min, max);
+
+	it('splits at 1, 2 and 5 × 10ⁿ inside an unsnapped range', () => {
+		expect(splitsFor(10.6, 990)).toStrictEqual([20, 50, 100, 200, 500]);
+	});
+
+	it('includes the ends when they fall on a split', () => {
+		expect(splitsFor(0.1, 10)).toStrictEqual([0.1, 0.2, 0.5, 1, 2, 5, 10]);
+	});
+
+	it('is empty for a range a log scale cannot hold', () => {
+		expect(splitsFor(0, 10)).toStrictEqual([]);
+		expect(splitsFor(5, 5)).toStrictEqual([]);
+	});
+});
+
+describe('spacedLogLabels', () => {
+	// 100px per decade.
+	const plot = {
+		axes: [{ scale: 'x' }],
+		valToPos: (value: number): number => Math.log10(value) * 100,
+	} as unknown as uPlot;
+	const label = (splits: number[], space: number): (number | null)[] =>
+		spacedLogLabels(plot, splits, 0, space, 0) as (number | null)[];
+
+	it('always labels the powers of ten', () => {
+		expect(label([10, 20, 50, 100], 200)).toStrictEqual([10, null, null, 100]);
+	});
+
+	it('adds a 2 or 5 that clears the labels already kept', () => {
+		// 20 is 30px from 10; 50 is 70px from 10 and 30px from 100.
+		expect(label([10, 20, 50, 100], 25)).toStrictEqual([10, 20, 50, 100]);
+		expect(label([10, 20, 50, 100], 40)).toStrictEqual([10, null, null, 100]);
+	});
+
+	it('labels both ends of a range spanning under a decade', () => {
+		// 100 sits at 200px; 20 (130px) and 500 (270px) clear it, 50 and 200 do not.
+		expect(label([20, 50, 100, 200, 500], 60)).toStrictEqual([
+			20,
+			null,
+			100,
+			null,
+			500,
+		]);
+	});
+});

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

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

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

@@ -195,3 +195,22 @@ 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);
+	});
+});

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

@@ -0,0 +1,61 @@
+import type uPlot from 'uplot';
+
+const DECADE_TOLERANCE = 1e-9;
+
+function isDecade(value: number): boolean {
+	if (value === 0) {
+		return true;
+	}
+	const exponent = Math.log10(Math.abs(value));
+	return Math.abs(exponent - Math.round(exponent)) < DECADE_TOLERANCE;
+}
+
+const LOG_SPLIT_MULTIPLES = [1, 2, 5];
+
+/** 1, 2, 5 × 10ⁿ in range; uPlot's log splits step from an unsnapped min (10.79, 21.58…). */
+export const logScaleSplits: uPlot.Axis.Splits = (_u, _axisIdx, min, max) => {
+	if (!(min > 0) || !(max > min)) {
+		return [];
+	}
+	const splits: number[] = [];
+	for (
+		let exponent = Math.floor(Math.log10(min));
+		exponent <= Math.ceil(Math.log10(max));
+		exponent++
+	) {
+		LOG_SPLIT_MULTIPLES.forEach((multiple) => {
+			// Rounded through toPrecision so 0.1 × 3 noise can't fall outside [min, max].
+			const split = Number((multiple * 10 ** exponent).toPrecision(12));
+			if (split >= min && split <= max) {
+				splits.push(split);
+			}
+		});
+	}
+	return splits;
+};
+
+/** Labels every decade, plus any 2 or 5 at least `space` px clear. */
+export const spacedLogLabels: uPlot.Axis.Filter = (
+	u,
+	splits,
+	axisIdx,
+	space,
+) => {
+	const scaleKey = u.axes[axisIdx]?.scale ?? 'x';
+	const positions = splits.map((split) =>
+		split == null ? null : u.valToPos(split, scaleKey),
+	);
+	const kept = splits.map((split) => split != null && isDecade(split));
+	const isClear = (index: number): boolean =>
+		kept.every(
+			(isKept, other) =>
+				!isKept ||
+				Math.abs((positions[other] ?? 0) - (positions[index] ?? 0)) >= space,
+		);
+	splits.forEach((split, index) => {
+		if (split != null && !kept[index] && isClear(index)) {
+			kept[index] = true;
+		}
+	});
+	return splits.map((split, index) => (kept[index] ? split : null));
+};

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

@@ -0,0 +1,100 @@
+export interface QuadtreeRect {
+	x: number;
+	y: number;
+	w: number;
+	h: number;
+}
+
+const MAX_OBJECTS = 10;
+const MAX_LEVELS = 4;
+
+/** Rect index for cursor hit-testing; items straddling quadrants are stored in each, so `get` may repeat them. */
+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),
+			);
+		}
+	}
+
+	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,18 +58,23 @@ function normalizeLogLimit(
 	return logBase ** exp;
 }
 
+export const DEFAULT_ASINH_THRESHOLD = 1;
+
 /**
- * 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.
+ * 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.
  */
 export function getDistributionConfig({
 	time,
 	distr,
 	logBase,
+	asinhThreshold,
 }: {
 	time: ScaleProps['time'];
 	distr?: DistributionType;
 	logBase?: number;
+	asinhThreshold?: number;
 }): Partial<Scale> {
 	if (time) {
 		return {};
@@ -77,6 +82,14 @@ 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,

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

@@ -37,6 +37,7 @@ export default function ChartWrapper({
 	syncKey,
 	syncFilterMode,
 	onDestroy = noop,
+	plotRef,
 	children,
 	layoutChildren,
 	yAxisUnit,
@@ -123,6 +124,7 @@ export default function ChartWrapper({
 						height={chartHeight}
 						plotRef={(plot): void => {
 							plotInstanceRef.current = plot;
+							plotRef?.(plot);
 						}}
 						onDestroy={(plot: uPlot): void => {
 							plotInstanceRef.current = null;

frontend/src/lib/visualization/charts/ChartWrapper/__tests__/ChartWrapper.test.tsx

@@ -0,0 +1,45 @@
+import { render } from 'tests/test-utils';
+import type uPlot from 'uplot';
+
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+
+import ChartWrapper from '../ChartWrapper';
+
+const FAKE_PLOT = { id: 'plot' } as unknown as uPlot;
+
+jest.mock('lib/uPlotV2/components/UPlotChart/UPlotChart', () => ({
+	__esModule: true,
+	default: ({ plotRef }: { plotRef?: (plot: uPlot | null) => void }): null => {
+		plotRef?.(FAKE_PLOT);
+		return null;
+	},
+}));
+
+window.ResizeObserver =
+	window.ResizeObserver ||
+	jest.fn().mockImplementation(() => ({
+		disconnect: jest.fn(),
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+	}));
+
+describe('ChartWrapper', () => {
+	it('hands the plot instance to the caller', () => {
+		const plotRef = jest.fn();
+		render(
+			<ChartWrapper
+				config={new UPlotConfigBuilder({ id: 'chart' })}
+				data={[[1], [2]]}
+				width={400}
+				height={300}
+				legendConfig={{ position: LegendPosition.BOTTOM }}
+				showLegend={false}
+				showTooltip={false}
+				plotRef={plotRef}
+			/>,
+		);
+
+		expect(plotRef).toHaveBeenCalledWith(FAKE_PLOT);
+	});
+});

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

@@ -0,0 +1,244 @@
+import { useMemo } 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,
+	ScatterAxisScale,
+	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;
+	xScale: ScatterAxisScale;
+	yScale: ScatterAxisScale;
+	/** 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 {
+		xScale,
+		yScale,
+		sized,
+		thresholds,
+		pointSize,
+		fillOpacity,
+		width,
+		height,
+	} = props;
+	const isDarkMode = useIsDarkMode();
+
+	const series = useMemo(() => buildSeries(props), [props]);
+
+	const config = useMemo(
+		() =>
+			buildScatterConfig({
+				id: 'scatter-story',
+				series,
+				isDarkMode,
+				x: { unit: 'reqps', scale: xScale },
+				y: { unit: 'ms', scale: yScale },
+				pointSize: { fixed: pointSize, min: 4, max: pointSize * 4 },
+				fillOpacity,
+				thresholds: thresholds ? THRESHOLDS : undefined,
+			}),
+		[series, isDarkMode, xScale, yScale, 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
+			/>
+		</div>
+	);
+}
+
+const meta = {
+	title: 'Charts/Scatter',
+	component: ScatterStory,
+	parameters: { layout: 'padded' },
+	args: {
+		groups: 1,
+		pointsPerGroup: 10,
+		sized: false,
+		xScale: ScatterAxisScale.Linear,
+		yScale: ScatterAxisScale.Linear,
+		withZeros: false,
+		shape: 'spread',
+		thresholds: false,
+		pointSize: 6,
+		fillOpacity: 0.7,
+		width: 800,
+		height: 420,
+	},
+	argTypes: {
+		shape: { control: 'radio', options: ['spread', 'single', 'sameX'] },
+		xScale: { control: 'radio', options: Object.values(ScatterAxisScale) },
+		yScale: { control: 'radio', options: Object.values(ScatterAxisScale) },
+		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,
+		xScale: ScatterAxisScale.Log,
+		yScale: ScatterAxisScale.Log,
+		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

@@ -0,0 +1,98 @@
+import { useCallback, useRef } 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 { getSeriesStroke } from 'lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin';
+import type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { ScatterChartProps } from 'lib/visualization/charts/types';
+import uPlot from 'uplot';
+
+import { getCursorHit } from './utils';
+
+// Faceted uPlot can't mount without series; empty aligned data shows no-data instead.
+const EMPTY_ALIGNED_DATA: uPlot.AlignedData = [[]];
+
+export default function Scatter(props: ScatterChartProps): JSX.Element {
+	const {
+		children,
+		customTooltip,
+		channels,
+		resolvePointLabels,
+		pinnedTooltipElement,
+		onPointClick,
+		plotRef,
+		...rest
+	} = props;
+
+	const plotInstanceRef = useRef<uPlot | null>(null);
+
+	const handlePlotRef = useCallback(
+		(plot: uPlot | null): void => {
+			plotInstanceRef.current = plot;
+			plotRef?.(plot);
+		},
+		[plotRef],
+	);
+
+	// Faceted plots have no shared x; take the hit from the cursor.
+	const handleClick = useCallback(
+		(click: ChartClickData): void => {
+			const plot = plotInstanceRef.current;
+			const hit = plot ? getCursorHit(plot) : null;
+			if (!plot || !hit || !onPointClick) {
+				return;
+			}
+			onPointClick({
+				...hit,
+				color: getSeriesStroke(plot, hit.seriesIndex),
+				coordinates: { x: click.absoluteMouseX, y: click.absoluteMouseY },
+			});
+		},
+		[onPointClick],
+	);
+
+	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}
+			plotRef={handlePlotRef}
+			onClick={onPointClick ? handleClick : rest.onClick}
+			customTooltip={renderTooltip}
+			pinnedTooltipElement={pinnedTooltipElement}
+		>
+			{children}
+		</ChartWrapper>
+	);
+}

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

@@ -0,0 +1,97 @@
+import { DistributionType } from 'lib/uPlotV2/config/types';
+import uPlot from 'uplot';
+
+import { createScatterRange, type ScatterRangeOptions } from '../scatterRange';
+
+/** A 220px-tall, 420px-wide plot at a device pixel ratio of 1. */
+const plot = { bbox: { width: 420, height: 220 } } as unknown as uPlot;
+
+function rangeOf(
+	options: Partial<ScatterRangeOptions>,
+	dataMin: number | null,
+	dataMax: number | null,
+): [number, number] {
+	const range = createScatterRange({
+		dimension: 'y',
+		marginPx: 10,
+		distribution: DistributionType.Linear,
+		...options,
+	}) as (u: uPlot, min: number | null, max: number | null) => [number, number];
+	return range(plot, dataMin, dataMax);
+}
+
+describe('createScatterRange', () => {
+	beforeAll(() => {
+		Object.defineProperty(uPlot, 'pxRatio', { value: 1, configurable: true });
+	});
+
+	it('widens a linear range so the data sits marginPx inside each edge', () => {
+		// 200px of data inside 220px: 10px at each end is 1/20 of the span.
+		expect(rangeOf({}, 0, 100)).toStrictEqual([-5, 105]);
+	});
+
+	it('measures the margin along its own axis', () => {
+		// 400px of data inside 420px.
+		expect(rangeOf({ dimension: 'x' }, 0, 100)).toStrictEqual([-2.5, 102.5]);
+	});
+
+	it('pads a log range in decades, without snapping to the next power of ten', () => {
+		const [min, max] = rangeOf(
+			{ distribution: DistributionType.Logarithmic },
+			1,
+			10,
+		);
+		expect(Math.log10(min)).toBeCloseTo(-0.05);
+		expect(Math.log10(max)).toBeCloseTo(1.05);
+	});
+
+	it('pads a symmetric log range in its asinh space', () => {
+		const [min, max] = rangeOf(
+			{ distribution: DistributionType.SymmetricLog, asinhThreshold: 2 },
+			0,
+			20,
+		);
+		const span = Math.asinh(10);
+		expect(Math.asinh(min / 2)).toBeCloseTo(-span / 20);
+		expect(Math.asinh(max / 2)).toBeCloseTo(span + span / 20);
+	});
+
+	it('stretches to the soft limits before padding', () => {
+		expect(rangeOf({ softMin: 0, softMax: 200 }, 50, 100)).toStrictEqual([
+			-10, 210,
+		]);
+	});
+
+	it('ignores a soft min at or below zero on a log scale', () => {
+		const [min] = rangeOf(
+			{ distribution: DistributionType.Logarithmic, softMin: 0 },
+			10,
+			100,
+		);
+		expect(min).toBeGreaterThan(0);
+	});
+
+	it('spreads a single value around itself', () => {
+		const [min, max] = rangeOf({}, 5, 5);
+		expect(min).toBeLessThan(5);
+		expect(max).toBeGreaterThan(5);
+		expect(5 - min).toBeCloseTo(max - 5);
+	});
+
+	it('falls back to a unit range with no data', () => {
+		expect(rangeOf({}, null, null)).toStrictEqual([0, 1]);
+		expect(
+			rangeOf({ distribution: DistributionType.Logarithmic }, null, null),
+		).toStrictEqual([1, 10]);
+	});
+
+	it('skips the margin on a plot too small to hold it', () => {
+		const tiny = { bbox: { width: 15, height: 15 } } as unknown as uPlot;
+		const range = createScatterRange({
+			dimension: 'y',
+			marginPx: 10,
+			distribution: DistributionType.Linear,
+		}) as (u: uPlot, min: number, max: number) => [number, number];
+		expect(range(tiny, 0, 100)).toStrictEqual([0, 100]);
+	});
+});

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

@@ -0,0 +1,243 @@
+import type uPlot from 'uplot';
+import { DistributionType } from 'lib/uPlotV2/config/types';
+
+import {
+	buildScatterConfig,
+	getCursorHit,
+	prepareScatterChartData,
+	resolveAxisDistribution,
+	ScatterAxisScale,
+	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('getCursorHit', () => {
+	const plotWith = (idxs: Array<number | null>): uPlot =>
+		({ cursor: { idxs } }) as unknown as uPlot;
+
+	it('reads the series the scatter plugin answered for', () => {
+		expect(getCursorHit(plotWith([null, null, 4, null]))).toStrictEqual({
+			seriesIndex: 2,
+			dataIndex: 4,
+		});
+	});
+
+	it('takes a data index of 0 as a hit', () => {
+		expect(getCursorHit(plotWith([0, 0]))).toStrictEqual({
+			seriesIndex: 1,
+			dataIndex: 0,
+		});
+	});
+
+	it('is null off every dot', () => {
+		expect(getCursorHit(plotWith([null, null]))).toBeNull();
+		expect(getCursorHit({ cursor: {} } as unknown as uPlot)).toBeNull();
+	});
+});
+
+describe('resolveAxisDistribution', () => {
+	it('is linear when asked, whatever the values', () => {
+		expect(
+			resolveAxisDistribution([1, 1e6], ScatterAxisScale.Linear),
+		).toStrictEqual({ distribution: DistributionType.Linear });
+	});
+
+	it('is a plain log when every value is positive', () => {
+		expect(resolveAxisDistribution([1, 100], ScatterAxisScale.Log)).toStrictEqual(
+			{ distribution: DistributionType.Logarithmic },
+		);
+	});
+
+	it('falls back from log to a symmetric log around the smallest magnitude when zero is present', () => {
+		expect(
+			resolveAxisDistribution([0, 0.05, 300], ScatterAxisScale.Log),
+		).toStrictEqual({
+			distribution: DistributionType.SymmetricLog,
+			asinhThreshold: 0.01,
+		});
+	});
+
+	it('keeps an explicit log axis for a soft min it cannot place', () => {
+		expect(
+			resolveAxisDistribution([1, 100], ScatterAxisScale.Log, [-10]),
+		).toStrictEqual({ distribution: DistributionType.Logarithmic });
+	});
+
+	it('is a symmetric log when asked, even with only positive values', () => {
+		expect(
+			resolveAxisDistribution([2, 300], ScatterAxisScale.SymLog),
+		).toStrictEqual({
+			distribution: DistributionType.SymmetricLog,
+			asinhThreshold: 1,
+		});
+	});
+
+	it('uses a unit threshold when nothing is positive', () => {
+		expect(
+			resolveAxisDistribution([0, -5], ScatterAxisScale.SymLog),
+		).toStrictEqual({
+			distribution: DistributionType.SymmetricLog,
+			asinhThreshold: 1,
+		});
+	});
+
+	describe('auto', () => {
+		const SKEWED = [1, 2, 3, 5, 8, 10, 20, 50, 1000];
+
+		it.each([
+			['skewed positive values', SKEWED, DistributionType.Logarithmic],
+			[
+				'values spread evenly across decades',
+				[1, 250, 500, 750, 1000],
+				DistributionType.Linear,
+			],
+			[
+				'a single outlier among clustered values',
+				[0.001, 40, 45, 50, 55, 60],
+				DistributionType.Linear,
+			],
+			[
+				'skewed values spanning under two decades',
+				[10, 10, 10, 11, 50],
+				DistributionType.Linear,
+			],
+			['no finite values', [Number.NaN], DistributionType.Linear],
+		])('picks a scale for %s', (_, values, distribution) => {
+			expect(resolveAxisDistribution(values, ScatterAxisScale.Auto)).toStrictEqual(
+				{ distribution },
+			);
+		});
+
+		it('picks symlog for skewed values that include zero', () => {
+			expect(
+				resolveAxisDistribution(
+					[0, 0, 1, 2, 5, 10, 50, 100, 10_000],
+					ScatterAxisScale.Auto,
+				),
+			).toStrictEqual({
+				distribution: DistributionType.SymmetricLog,
+				asinhThreshold: 1,
+			});
+		});
+
+		it('picks symlog when a soft limit reaches zero or below', () => {
+			expect(
+				resolveAxisDistribution(SKEWED, ScatterAxisScale.Auto, [0]),
+			).toStrictEqual({
+				distribution: DistributionType.SymmetricLog,
+				asinhThreshold: 1,
+			});
+		});
+
+		it('counts a soft limit towards the decades it spans', () => {
+			expect(
+				resolveAxisDistribution([5, 50], ScatterAxisScale.Auto, [null, 5000]),
+			).toStrictEqual({ distribution: DistributionType.Logarithmic });
+		});
+
+		it('is the default', () => {
+			expect(resolveAxisDistribution(SKEWED)).toStrictEqual({
+				distribution: DistributionType.Logarithmic,
+			});
+		});
+	});
+});
+
+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', scale: ScatterAxisScale.Log },
+			...overrides,
+		});
+
+	it('draws a line along both plot edges', () => {
+		const [xAxis, yAxis] = build().getConfig().axes ?? [];
+
+		expect(xAxis?.border?.show).toBe(true);
+		expect(yAxis?.border?.show).toBe(true);
+	});
+
+	it('titles each axis with its label, and leaves an unlabelled one bare', () => {
+		const config = build({
+			x: { unit: 'reqps', label: 'Throughput' },
+			y: { unit: 'ms', label: '' },
+		}).getConfig();
+		const [xAxis, yAxis] = config.axes ?? [];
+
+		expect(xAxis?.label).toBe('Throughput');
+		expect(yAxis?.label).toBeUndefined();
+	});
+
+	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/scatterRange.ts

@@ -0,0 +1,101 @@
+import { DistributionType } from 'lib/uPlotV2/config/types';
+import { DEFAULT_ASINH_THRESHOLD } from 'lib/uPlotV2/utils/scale';
+import uPlot from 'uplot';
+
+import type { AxisDistribution } from './utils';
+
+interface ScaleTransform {
+	forward: (value: number) => number;
+	inverse: (position: number) => number;
+}
+
+export function getScaleTransform({
+	distribution,
+	asinhThreshold = DEFAULT_ASINH_THRESHOLD,
+}: AxisDistribution): ScaleTransform {
+	switch (distribution) {
+		case DistributionType.Logarithmic:
+			return {
+				forward: (value): number => Math.log10(value),
+				inverse: (position): number => 10 ** position,
+			};
+		case DistributionType.SymmetricLog:
+			return {
+				forward: (value): number => Math.asinh(value / asinhThreshold),
+				inverse: (position): number => Math.sinh(position) * asinhThreshold,
+			};
+		default:
+			return {
+				forward: (value): number => value,
+				inverse: (position): number => position,
+			};
+	}
+}
+
+/** In transformed units. */
+const SINGLE_VALUE_HALF_SPAN = 0.5;
+
+/** The data's extent stretched to the soft limits; null with neither. */
+function resolveExtent(
+	dataMin: number | null,
+	dataMax: number | null,
+	softMin: number | null | undefined,
+	softMax: number | null | undefined,
+): [number, number] | null {
+	const lows = [dataMin, softMin].filter(
+		(value): value is number => value != null && Number.isFinite(value),
+	);
+	const highs = [dataMax, softMax].filter(
+		(value): value is number => value != null && Number.isFinite(value),
+	);
+	return lows.length > 0 && highs.length > 0
+		? [Math.min(...lows), Math.max(...highs)]
+		: null;
+}
+
+export interface ScatterRangeOptions extends AxisDistribution {
+	dimension: 'x' | 'y';
+	/** CSS pixels kept clear at each end so the largest dot draws whole. */
+	marginPx: number;
+	softMin?: number | null;
+	softMax?: number | null;
+}
+
+/** Data extent padded by `marginPx` so edge dots draw whole; log stays unsnapped (snapping after the margin can add an empty decade). */
+export function createScatterRange({
+	dimension,
+	marginPx,
+	softMin,
+	softMax,
+	...distribution
+}: ScatterRangeOptions): uPlot.Scale.Range {
+	const transform = getScaleTransform(distribution);
+	const isLog = distribution.distribution === DistributionType.Logarithmic;
+
+	// A log scale cannot place a soft limit at or below zero.
+	const usableSoftMin = isLog && (softMin ?? 0) <= 0 ? null : softMin;
+
+	return (u, dataMin, dataMax): uPlot.Range.MinMax => {
+		const extent = resolveExtent(dataMin, dataMax, usableSoftMin, softMax);
+		if (!extent) {
+			return isLog ? [1, 10] : [0, 1];
+		}
+
+		let start = transform.forward(extent[0]);
+		let end = transform.forward(extent[1]);
+		if (start === end) {
+			start -= SINGLE_VALUE_HALF_SPAN;
+			end += SINGLE_VALUE_HALF_SPAN;
+		}
+
+		const plotPx =
+			(dimension === 'x' ? u.bbox.width : u.bbox.height) / uPlot.pxRatio;
+		if (plotPx > 2 * marginPx) {
+			const pad = ((end - start) * marginPx) / (plotPx - 2 * marginPx);
+			start -= pad;
+			end += pad;
+		}
+
+		return [transform.inverse(start), transform.inverse(end)];
+	};
+}

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

@@ -0,0 +1,366 @@
+import { PrecisionOption } from 'components/Graph/types';
+import {
+	type AxisProps,
+	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 {
+	logScaleSplits,
+	spacedLogLabels,
+} from 'lib/uPlotV2/utils/logGridSplits';
+import { adjustSoftLimitsWithThresholds } from 'lib/uPlotV2/utils/scale';
+import uPlot from 'uplot';
+
+import { createScatterRange, getScaleTransform } from './scatterRange';
+
+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 {
+	label: string;
+	xs: number[];
+	ys: number[];
+	/** Optional third channel, in the caller's units. */
+	sizes?: Array<number | null>;
+}
+
+export enum ScatterAxisScale {
+	/** Log or symlog when it spreads the points out more than linear does. */
+	Auto = 'auto',
+	Linear = 'linear',
+	Log = 'log',
+	/** Log-like, but places zero and negatives. */
+	SymLog = 'symlog',
+}
+
+export interface ScatterAxisOptions {
+	label?: string;
+	unit?: string;
+	softMin?: number | null;
+	softMax?: number | null;
+	scale?: ScatterAxisScale;
+}
+
+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;
+}
+
+/** The plugin's `dataIdx` answers only for the hit series. */
+export function getCursorHit(
+	plot: uPlot,
+): { seriesIndex: number; dataIndex: number } | null {
+	const idxs = plot.cursor.idxs ?? [];
+	for (let seriesIndex = 1; seriesIndex < idxs.length; seriesIndex++) {
+		const dataIndex = idxs[seriesIndex];
+		if (dataIndex != null) {
+			return { seriesIndex, dataIndex };
+		}
+	}
+	return null;
+}
+
+/** `[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;
+}
+
+const LINEAR_DISTRIBUTION: AxisDistribution = {
+	distribution: DistributionType.Linear,
+};
+
+/** Orders of magnitude `auto` needs before it considers leaving linear. */
+export const AUTO_MIN_DECADES = 2;
+
+/** How many times more axis the middle half of the points must cover for `auto` to leave linear. */
+export const AUTO_SPREAD_GAIN = 2;
+
+function getMagnitudeRange(values: number[]): {
+	minMagnitude: number;
+	maxMagnitude: number;
+	hasNonPositive: boolean;
+} {
+	let minMagnitude = Infinity;
+	let maxMagnitude = -Infinity;
+	let hasNonPositive = false;
+	for (const value of values) {
+		if (!Number.isFinite(value)) {
+			continue;
+		}
+		if (value <= 0) {
+			hasNonPositive = true;
+		}
+		if (value !== 0) {
+			minMagnitude = Math.min(minMagnitude, Math.abs(value));
+			maxMagnitude = Math.max(maxMagnitude, Math.abs(value));
+		}
+	}
+	return { minMagnitude, maxMagnitude, hasNonPositive };
+}
+
+/** The linear band ends at the smallest non-zero magnitude so small values still spread. */
+function symmetricLogDistribution(minMagnitude: number): AxisDistribution {
+	const asinhThreshold = Number.isFinite(minMagnitude)
+		? 10 ** Math.floor(Math.log10(minMagnitude))
+		: 1;
+	return { distribution: DistributionType.SymmetricLog, asinhThreshold };
+}
+
+function quantile(sorted: number[], q: number): number {
+	const position = (sorted.length - 1) * q;
+	const lower = Math.floor(position);
+	const upper = Math.ceil(position);
+	return sorted[lower] + (sorted[upper] - sorted[lower]) * (position - lower);
+}
+
+/** Share of the axis the middle half of the points covers. */
+function middleHalfSpread(
+	sorted: number[],
+	[min, max]: [number, number],
+	distribution: AxisDistribution,
+): number {
+	const { forward } = getScaleTransform(distribution);
+	const span = forward(max) - forward(min);
+	return span > 0
+		? (forward(quantile(sorted, 0.75)) - forward(quantile(sorted, 0.25))) / span
+		: 0;
+}
+
+/**
+ * Log (symlog with zero or negatives) when it spreads the points out clearly
+ * more than linear does; min/max alone would let one outlier decide.
+ */
+function resolveAutoDistribution(
+	values: number[],
+	softLimits: number[],
+): AxisDistribution {
+	const sorted = values
+		.filter((value) => Number.isFinite(value))
+		.sort((a, b) => a - b);
+	if (sorted.length < 2) {
+		return LINEAR_DISTRIBUTION;
+	}
+	const { minMagnitude, maxMagnitude, hasNonPositive } = getMagnitudeRange([
+		...sorted,
+		...softLimits,
+	]);
+	if (!(Math.log10(maxMagnitude / minMagnitude) >= AUTO_MIN_DECADES)) {
+		return LINEAR_DISTRIBUTION;
+	}
+	const candidate = hasNonPositive
+		? symmetricLogDistribution(minMagnitude)
+		: { distribution: DistributionType.Logarithmic };
+	const extent: [number, number] = [
+		Math.min(sorted[0], ...softLimits),
+		Math.max(sorted[sorted.length - 1], ...softLimits),
+	];
+	const candidateSpread = middleHalfSpread(sorted, extent, candidate);
+	const linearSpread = middleHalfSpread(sorted, extent, LINEAR_DISTRIBUTION);
+	return candidateSpread > 0 &&
+		candidateSpread >= AUTO_SPREAD_GAIN * linearSpread
+		? candidate
+		: LINEAR_DISTRIBUTION;
+}
+
+/** `log` falls back to symlog rather than drop zero or negatives; callers filter first to drop them. */
+export function resolveAxisDistribution(
+	values: number[],
+	scale: ScatterAxisScale = ScatterAxisScale.Auto,
+	/** Soft limits and thresholds the axis must reach; only `auto` weighs them. */
+	softLimits: Array<number | null | undefined> = [],
+): AxisDistribution {
+	switch (scale) {
+		case ScatterAxisScale.Linear:
+			return LINEAR_DISTRIBUTION;
+		case ScatterAxisScale.SymLog:
+			return symmetricLogDistribution(getMagnitudeRange(values).minMagnitude);
+		case ScatterAxisScale.Log: {
+			const { minMagnitude, hasNonPositive } = getMagnitudeRange(values);
+			return hasNonPositive
+				? symmetricLogDistribution(minMagnitude)
+				: { distribution: DistributionType.Logarithmic };
+		}
+		case ScatterAxisScale.Auto:
+		default:
+			return resolveAutoDistribution(
+				values,
+				softLimits.filter(
+					(limit): limit is number => limit != null && Number.isFinite(limit),
+				),
+			);
+	}
+}
+
+/** The scatter range is unsnapped, so a log axis places and labels its own ticks. */
+function getLogAxisTicks({
+	distribution,
+}: AxisDistribution): Pick<AxisProps, 'splits' | 'filter'> {
+	return distribution === DistributionType.Logarithmic
+		? { splits: logScaleSplits, filter: spacedLogLabels }
+		: {};
+}
+
+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 ySoftLimits = adjustSoftLimitsWithThresholds(
+		y.softMin ?? null,
+		y.softMax ?? null,
+		thresholds,
+		y.unit,
+	);
+	const xDistribution = resolveAxisDistribution(
+		series.flatMap((entry) => entry.xs),
+		x.scale,
+		[x.softMin, x.softMax],
+	);
+	const yDistribution = resolveAxisDistribution(
+		series.flatMap((entry) => entry.ys),
+		y.scale,
+		[ySoftLimits.softMin, ySoftLimits.softMax],
+	);
+
+	const yThresholds =
+		thresholds && thresholds.length > 0
+			? { scaleKey: 'y', thresholds, yAxisUnit: y.unit }
+			: undefined;
+
+	// The largest disc drawn, plus its outline, kept clear of each plot edge.
+	const largestDiameter = series.some((entry) => entry.sizes)
+		? pointSize.max
+		: pointSize.fixed;
+	const marginPx = largestDiameter / 2 + POINT_STROKE_WIDTH;
+
+	builder.addScale({
+		scaleKey: 'x',
+		time: false,
+		range: createScatterRange({
+			dimension: 'x',
+			marginPx,
+			softMin: x.softMin,
+			softMax: x.softMax,
+			...xDistribution,
+		}),
+		...xDistribution,
+	});
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+		range: createScatterRange({
+			dimension: 'y',
+			marginPx,
+			...ySoftLimits,
+			...yDistribution,
+		}),
+		...yDistribution,
+	});
+
+	builder.addAxis({
+		scaleKey: 'x',
+		side: 2,
+		label: x.label || undefined,
+		isDarkMode,
+		isTimeAxis: false,
+		yAxisUnit: x.unit ?? '',
+		decimalPrecision,
+		isLogScale: xDistribution.distribution !== DistributionType.Linear,
+		...getLogAxisTicks(xDistribution),
+		space: X_AXIS_TICK_SPACE_PX,
+	});
+	builder.addAxis({
+		scaleKey: 'y',
+		side: 3,
+		label: y.label || undefined,
+		isDarkMode,
+		yAxisUnit: y.unit ?? '',
+		decimalPrecision,
+		isLogScale: yDistribution.distribution !== DistributionType.Linear,
+		...getLogAxisTicks(yDistribution),
+	});
+
+	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

@@ -16,6 +16,10 @@ import type {
 	HeatmapColorOptions,
 	HeatmapSeries,
 } from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
+import type {
+	ScatterChannels,
+	ScatterPointLabel,
+} from 'lib/uPlotV2/plugins/ScatterPlugin/types';
 import {
 	DashboardCursorSync,
 	SyncTooltipFilterMode,
@@ -88,6 +92,26 @@ export interface HistogramChartProps extends ChartWrapperProps {
 	isQueriesMerged?: boolean;
 }
 
+/** The dot a click landed on; `seriesIndex` is uPlot's, so the first series is 1. */
+export interface ScatterPointClick {
+	seriesIndex: number;
+	dataIndex: number;
+	color: string;
+	/** Viewport coordinates of the click. */
+	coordinates: { x: number; y: number };
+}
+
+/** `data` is mode-2 (`prepareScatterChartData`); `config` comes from `buildScatterConfig`. */
+export interface ScatterChartProps extends ChartWrapperProps {
+	channels: ScatterChannels;
+	resolvePointLabels?: (
+		seriesIndex: number,
+		dataIndex: number,
+	) => ScatterPointLabel[];
+	/** Fires for a click on a dot; a click on empty plot space fires nothing. */
+	onPointClick?: (click: ScatterPointClick) => void;
+}
+
 /**
  * Data arrives as the query response carries it — bucket bounds plus one series per
  * group — and the chart pivots and sums it, so no caller has to get the transpose

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/ConfigActions/ConfigActions.tsx

@@ -1,7 +1,10 @@
 import { Flame } from '@signozhq/icons';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { getQueryMode } from 'lib/query/queryMode';
 import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
 import { useCreateAlertFromPanel } from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel';
+import { QueryMode } from 'types/api/queryBuilder/queryBuilderData';
 
 import ConfigActionRow from './ConfigActionRow';
 import styles from './ConfigActions.module.scss';
@@ -22,11 +25,16 @@ function ConfigActions({
 	panelId,
 }: ConfigActionsProps): JSX.Element | null {
 	const createAlert = useCreateAlertFromPanel();
+	const { currentQuery } = useQueryBuilder();
 	const { actions } = getPanelDefinition(panel.spec.plugin.kind);
 
 	// Only kinds whose query can seed an alert offer this today; mirror the panel
 	// menu's create-alert capability.
-	if (!actions.createAlert) {
+	//TODO: AI query check should be removed after we support alerts on ai query @tewarig
+	if (
+		!actions.createAlert ||
+		getQueryMode(currentQuery) === QueryMode.AI_QUERY_BUILDER
+	) {
 		return null;
 	}
 

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -123,10 +123,22 @@ func (d *DashboardSpec) validatePanels() error {
 				return err
 			}
 		}
+		// validatePanelQueryCount left exactly one query for a spec that reads it.
+		if spec, ok := panel.Spec.Plugin.Spec.(queryBoundPanelSpec); ok {
+			if err := spec.validateAgainstQuery(panel.Spec.Queries[0], path+".spec.plugin.spec"); err != nil {
+				return err
+			}
+		}
 	}
 	return nil
 }
 
+// queryBoundPanelSpec is a panel spec with fields that depend on the panel's
+// query. It is checked after the query itself validates.
+type queryBoundPanelSpec interface {
+	validateAgainstQuery(query Query, path string) error
+}
+
 func validatePanelQueryCount(queries []Query, panelKind PanelPluginKind, path string) error {
 	if queries == nil {
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s.spec.queries: is required and must not be null; use [] for a panel that renders without a query", path)

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -1870,6 +1870,319 @@ func TestInvalidateAreaChartPanelSpecValues(t *testing.T) {
 	}
 }
 
+func TestScatterPlotPanelDefaults(t *testing.T) {
+	data := []byte(`{
+		"variables": [],
+		"panels": {
+			"p1": {
+				"kind": "Panel",
+				"spec": {
+					"links": [],
+					"plugin": {
+						"kind": "signoz/ScatterPlotPanel",
+						"spec": {}
+					},
+					"queries": [{"kind": "scalar", "spec": {"plugin": {"kind": "signoz/ClickHouseSQL", "spec": {"name": "A", "query": "SELECT 1"}}}}]
+				}
+			}
+		},
+		"links": [],
+		"layouts": []
+	}`)
+	d, err := unmarshalDashboard(data)
+	require.NoError(t, err, "unmarshal and validate failed")
+
+	require.IsType(t, &ScatterPlotPanelSpec{}, d.Panels["p1"].Spec.Plugin.Spec)
+	spec := d.Panels["p1"].Spec.Plugin.Spec.(*ScatterPlotPanelSpec)
+
+	assert.Empty(t, spec.Dimensions.X, "an omitted x stays empty so the renderer picks the first value column")
+	assert.Empty(t, spec.Dimensions.Y, "an omitted y stays empty so the renderer picks the second value column")
+	assert.Empty(t, spec.Dimensions.ColorBy, "an omitted colorBy stays empty so the renderer colours by every group-by label")
+	assert.Equal(t, "auto", spec.Axes.X.Scale.ValueOrDefault(), "expected x scale default auto")
+	assert.Equal(t, "auto", spec.Axes.Y.Scale.ValueOrDefault(), "expected y scale default auto")
+	assert.Nil(t, spec.Axes.X.SoftMin, "expected x softMin unset")
+	assert.Equal(t, "2", spec.Formatting.DecimalPrecision.ValueOrDefault(), "expected DecimalPrecision default 2")
+	assert.Equal(t, "global_time", spec.Visualization.TimePreference.ValueOrDefault(), "expected TimePreference default global_time")
+	assert.Equal(t, "bottom", spec.Legend.Position.ValueOrDefault(), "expected LegendPosition default bottom")
+
+	output, err := json.Marshal(d)
+	require.NoError(t, err, "marshal dashboard failed")
+	assert.Contains(t, string(output), `"axes":{"x":{"softMin":null,"softMax":null,"scale":"auto","label":""},"y":{"softMin":null,"softMax":null,"scale":"auto","label":""}}`, "expected default axes in stored/response JSON")
+	assert.Contains(t, string(output), `"dimensions":{"x":"","y":"","sizeBy":"","colorBy":null}`, "expected empty dimensions in stored/response JSON")
+	assert.Contains(t, string(output), `"chartAppearance":{"points":{"size":null,"minSize":null,"maxSize":null,"opacity":null}}`, "omitted point settings stay null so the renderer applies its defaults")
+}
+
+func TestValidateScatterPlotDashboard(t *testing.T) {
+	data, err := os.ReadFile("testdata/perses_scatter_plot_panel.json")
+	require.NoError(t, err, "reading example file")
+
+	spec, err := unmarshalDashboard(data)
+	require.NoError(t, err, "unmarshal and validate failed")
+
+	require.IsType(t, &ScatterPlotPanelSpec{}, spec.Panels["p1"].Spec.Plugin.Spec)
+	panelSpec := spec.Panels["p1"].Spec.Plugin.Spec.(*ScatterPlotPanelSpec)
+	softMin, softMax := 0.0, 1000.0
+	size, minSize, maxSize, opacity := PointDiameter(8), PointDiameter(4), PointDiameter(24), PointOpacity(0.1)
+	assert.Equal(t, &ScatterPlotPanelSpec{
+		Visualization: BasicVisualization{TimePreference: TimePreferenceLast1Hr},
+		Dimensions:    ScatterPlotDimensions{X: "A.count()", Y: "A.p99(duration_nano)", SizeBy: "A.countIf(has_error = true)", ColorBy: []string{"k8s.namespace.name", "k8s.pod.name"}},
+		Formatting:    TableFormatting{ColumnUnits: map[string]string{"A.p99(duration_nano)": "ns"}, DecimalPrecision: PrecisionOption1},
+		Axes: ScatterPlotAxes{
+			X: ScatterPlotAxis{SoftMin: &softMin, Scale: AxisScaleLog, Label: "Throughput"},
+			Y: ScatterPlotAxis{SoftMax: &softMax, Scale: AxisScaleSymlog, Label: "p99 latency"},
+		},
+		ChartAppearance: ScatterPlotChartAppearance{Points: ScatterPlotPoints{Size: &size, MinSize: &minSize, MaxSize: &maxSize, Opacity: &opacity}},
+		Legend:          Legend{Position: LegendPositionRight, Mode: LegendModeList, CustomColors: map[string]string{"checkout": "#1f77b4"}},
+		Thresholds: []ScatterPlotThreshold{
+			{ThresholdWithLabel: ThresholdWithLabel{Value: 300, Unit: "ms", Color: "#f00", Label: "p99 SLO"}, Axis: ThresholdAxisY},
+			{ThresholdWithLabel: ThresholdWithLabel{Value: 50, Color: "#0f0"}, Axis: ThresholdAxisX},
+		},
+	}, panelSpec)
+
+	dashboard := &DashboardV2{Spec: *spec}
+	request, err := dashboard.GetPanelQuery(1, 2, "p1")
+	require.NoError(t, err, "building the panel's query failed")
+	assert.Equal(t, qb.RequestTypeScalar, request.RequestType)
+	require.NotNil(t, request.FormatOptions)
+	assert.True(t, request.FormatOptions.FormatTableResultForUI, "scatter rows are joined the way a table's are")
+
+	require.Len(t, request.CompositeQuery.Queries, 1)
+	query, ok := request.CompositeQuery.Queries[0].Spec.(qb.QueryBuilderQuery[qb.TraceAggregation])
+	require.True(t, ok, "expected a traces builder query")
+	assert.Len(t, query.Aggregations, 3)
+	assert.Len(t, query.GroupBy, 2)
+
+	require.NoError(t, request.Validate(), "the request built from the panel is not a valid scalar request")
+
+	// the panel read back out of storage draws the same scatter plot
+	stored, err := json.Marshal(spec)
+	require.NoError(t, err, "marshal dashboard failed")
+	reread, err := unmarshalDashboard(stored)
+	require.NoError(t, err, "the stored dashboard does not validate")
+	assert.Equal(t, panelSpec, reread.Panels["p1"].Spec.Plugin.Spec)
+	rereadRequest, err := (&DashboardV2{Spec: *reread}).GetPanelQuery(1, 2, "p1")
+	require.NoError(t, err, "building the stored panel's query failed")
+	assert.Equal(t, request, rereadRequest)
+}
+
+func TestInvalidateScatterPlotPanelSpecValues(t *testing.T) {
+	tests := []struct {
+		scenario               string
+		panelKind              string
+		panelSpec              string
+		expectedErrorSubstring string
+	}{
+		{
+			scenario:               "unknown axis scale",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"axes": {"x": {"scale": "sqrt"}}}`,
+			expectedErrorSubstring: "invalid axis scale \"sqrt\": must be `auto`, `linear`, `log`, or `symlog`",
+		},
+		{
+			scenario:               "non-string axis scale",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"axes": {"y": {"scale": true}}}`,
+			expectedErrorSubstring: "cannot unmarshal bool",
+		},
+		{
+			scenario:               "isLogScale on a scatter plot axis",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"axes": {"x": {"isLogScale": true}}}`,
+			expectedErrorSubstring: "unknown field",
+		},
+		{
+			scenario:               "single-axis axes shape on a scatter plot panel",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"axes": {"softMin": 0}}`,
+			expectedErrorSubstring: "unknown field",
+		},
+		{
+			scenario:               "unknown threshold axis",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"thresholds": [{"value": 1, "color": "#f00", "axis": "z"}]}`,
+			expectedErrorSubstring: "invalid threshold axis \"z\": must be `x` or `y`",
+		},
+		{
+			scenario:               "unknown dimension",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"dimensions": {"z": "A"}}`,
+			expectedErrorSubstring: "unknown field",
+		},
+		{
+			scenario:               "point size below the minimum",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"chartAppearance": {"points": {"size": 1}}}`,
+			expectedErrorSubstring: "invalid point diameter 1: must be a whole number between 2 and 40",
+		},
+		{
+			scenario:               "max point size above the maximum",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"chartAppearance": {"points": {"maxSize": 41}}}`,
+			expectedErrorSubstring: "invalid point diameter 41",
+		},
+		{
+			scenario:               "fractional point size",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"chartAppearance": {"points": {"minSize": 4.5}}}`,
+			expectedErrorSubstring: "cannot unmarshal number 4.5",
+		},
+		{
+			scenario:               "min point size above max",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"chartAppearance": {"points": {"minSize": 20, "maxSize": 10}}}`,
+			expectedErrorSubstring: "minSize 20 must not exceed maxSize 10",
+		},
+		{
+			scenario:               "point opacity below the floor",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"chartAppearance": {"points": {"opacity": 0.05}}}`,
+			expectedErrorSubstring: "invalid point opacity 0.05: must be between 0.1 and 1",
+		},
+		{
+			scenario:               "point opacity as a percentage",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"chartAppearance": {"points": {"opacity": 70}}}`,
+			expectedErrorSubstring: "invalid point opacity 70",
+		},
+		{
+			scenario:               "area fill fields on a scatter plot",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"chartAppearance": {"fillOpacity": 0.5}}`,
+			expectedErrorSubstring: "unknown field",
+		},
+		{
+			scenario:               "a single colour key as a string",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"dimensions": {"colorBy": "service.name"}}`,
+			expectedErrorSubstring: "cannot unmarshal string",
+		},
+		{
+			scenario:               "panel-wide unit on a scatter plot panel",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"formatting": {"unit": "ms"}}`,
+			expectedErrorSubstring: "unknown field",
+		},
+		{
+			scenario:               "threshold without a color",
+			panelKind:              "signoz/ScatterPlotPanel",
+			panelSpec:              `{"thresholds": [{"value": 300}]}`,
+			expectedErrorSubstring: "Color' Error:Field validation for 'Color' failed on the 'required' tag",
+		},
+		{
+			scenario:               "scale on a time series panel",
+			panelKind:              "signoz/TimeSeriesPanel",
+			panelSpec:              `{"axes": {"scale": "log"}}`,
+			expectedErrorSubstring: "unknown field",
+		},
+	}
+
+	for _, test := range tests {
+		t.Run(test.scenario, func(t *testing.T) {
+			data := []byte(`{
+				"variables": [],
+				"panels": {
+					"p1": {
+						"kind": "Panel",
+						"spec": {
+							"links": [],
+							"plugin": {"kind": "` + test.panelKind + `", "spec": ` + test.panelSpec + `},
+							"queries": [{"kind": "scalar", "spec": {"plugin": {"kind": "signoz/ClickHouseSQL", "spec": {"name": "A", "query": "SELECT 1"}}}}]
+						}
+					}
+				},
+				"links": [],
+				"layouts": []
+			}`)
+			_, err := unmarshalDashboard(data)
+			require.Error(t, err, "expected the spec to be rejected")
+			assert.Contains(t, err.Error(), test.expectedErrorSubstring, "unexpected error message: %s", err.Error())
+		})
+	}
+}
+
+func TestScatterPlotDimensionsBindToQuery(t *testing.T) {
+	tests := []struct {
+		scenario               string
+		queryPlugin            string
+		dimensions             string
+		expectedErrorSubstring string
+	}{
+		{
+			scenario:    "a single-aggregation query is one value column keyed by its name",
+			queryPlugin: `{"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "traces", "aggregations": [{"expression": "count()"}], "groupBy": [{"name": "service.name"}]}}`,
+			dimensions:  `{"x": "A", "colorBy": ["service.name"]}`,
+		},
+		{
+			scenario:               "a multi-aggregation query keys each value column by name and expression",
+			queryPlugin:            `{"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "traces", "aggregations": [{"expression": "count()"}, {"expression": "p99(duration_nano)"}]}}`,
+			dimensions:             `{"x": "A"}`,
+			expectedErrorSubstring: "dimensions.x: \"A\" is not a value column of the panel's query; value columns: `A.count()`, `A.p99(duration_nano)`",
+		},
+		{
+			scenario:               "a value column of a query the panel does not have",
+			queryPlugin:            `{"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}`,
+			dimensions:             `{"y": "B"}`,
+			expectedErrorSubstring: "dimensions.y: \"B\" is not a value column of the panel's query; value columns: `A`",
+		},
+		{
+			scenario:               "a colour key the query does not group by",
+			queryPlugin:            `{"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "traces", "aggregations": [{"expression": "count()"}], "groupBy": [{"name": "service.name"}]}}`,
+			dimensions:             `{"colorBy": ["service.name", "k8s.pod.name"]}`,
+			expectedErrorSubstring: "dimensions.colorBy: \"k8s.pod.name\" is not a group-by key of the panel's query; group-by keys: `service.name`",
+		},
+		{
+			scenario: "a formula is a value column and carries the labels of the disabled queries it reads",
+			queryPlugin: `{"kind": "signoz/CompositeQuery", "spec": {"queries": [
+				{"type": "builder_query", "spec": {"name": "A", "signal": "traces", "disabled": true, "aggregations": [{"expression": "count()"}], "groupBy": [{"name": "service.name"}]}},
+				{"type": "builder_query", "spec": {"name": "B", "signal": "traces", "disabled": true, "aggregations": [{"expression": "countIf(has_error = true)"}], "groupBy": [{"name": "service.name"}]}},
+				{"type": "builder_formula", "spec": {"name": "F1", "expression": "B / A"}}
+			]}}`,
+			dimensions: `{"x": "F1", "colorBy": ["service.name"]}`,
+		},
+		{
+			scenario: "a disabled query yields no value column",
+			queryPlugin: `{"kind": "signoz/CompositeQuery", "spec": {"queries": [
+				{"type": "builder_query", "spec": {"name": "A", "signal": "logs", "disabled": true, "aggregations": [{"expression": "count()"}]}},
+				{"type": "builder_formula", "spec": {"name": "F1", "expression": "A * 2"}}
+			]}}`,
+			dimensions:             `{"sizeBy": "A"}`,
+			expectedErrorSubstring: "dimensions.sizeBy: \"A\" is not a value column of the panel's query; value columns: `F1`",
+		},
+		{
+			scenario:    "clickhouse columns are only known at run time, so the bindings go unchecked",
+			queryPlugin: `{"kind": "signoz/ClickHouseSQL", "spec": {"name": "A", "query": "SELECT 1"}}`,
+			dimensions:  `{"x": "throughput", "colorBy": ["pod"]}`,
+		},
+	}
+
+	for _, test := range tests {
+		t.Run(test.scenario, func(t *testing.T) {
+			data := []byte(`{
+				"variables": [],
+				"panels": {
+					"p1": {
+						"kind": "Panel",
+						"spec": {
+							"links": [],
+							"plugin": {"kind": "signoz/ScatterPlotPanel", "spec": {"dimensions": ` + test.dimensions + `}},
+							"queries": [{"kind": "scalar", "spec": {"plugin": ` + test.queryPlugin + `}}]
+						}
+					}
+				},
+				"links": [],
+				"layouts": []
+			}`)
+			_, err := unmarshalDashboard(data)
+			if test.expectedErrorSubstring == "" {
+				require.NoError(t, err)
+				return
+			}
+			require.Error(t, err, "expected the binding to be rejected")
+			assert.Contains(t, err.Error(), test.expectedErrorSubstring, "unexpected error message: %s", err.Error())
+		})
+	}
+}
+
 func TestNumberPanelDefaults(t *testing.T) {
 	data := []byte(`{
 		"variables": [],
@@ -2228,7 +2541,7 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 		switch panelKind {
 		case "signoz/ListPanel":
 			return "raw"
-		case "signoz/TablePanel", "signoz/NumberPanel", "signoz/PieChartPanel", "signoz/HistogramPanel":
+		case "signoz/TablePanel", "signoz/NumberPanel", "signoz/PieChartPanel", "signoz/HistogramPanel", "signoz/ScatterPlotPanel":
 			return "scalar"
 		default:
 			return "time_series"
@@ -2272,14 +2585,17 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 		{"List+Builder", mkQuery("signoz/ListPanel", "signoz/BuilderQuery", `{"name":"A","signal":"logs"}`), false},
 		{"TimeSeries+AIBuilder", mkQuery("signoz/TimeSeriesPanel", "signoz/AIBuilderQuery", `{"name":"A","aggregations":[{"expression":"count()"}]}`), false},
 		{"List+AIBuilder", mkQuery("signoz/ListPanel", "signoz/AIBuilderQuery", `{"name":"A"}`), false},
+		{"ScatterPlot+ClickHouse", mkQuery("signoz/ScatterPlotPanel", "signoz/ClickHouseSQL", `{"name":"A","query":"SELECT 1"}`), false},
 		// Top-level: rejected
 		{"Table+PromQL", mkQuery("signoz/TablePanel", "signoz/PromQLQuery", `{"name":"A","query":"up"}`), true},
+		{"ScatterPlot+PromQL", mkQuery("signoz/ScatterPlotPanel", "signoz/PromQLQuery", `{"name":"A","query":"up"}`), true},
 		{"List+ClickHouse", mkQuery("signoz/ListPanel", "signoz/ClickHouseSQL", `{"name":"A","query":"SELECT 1"}`), true},
 		{"List+PromQL", mkQuery("signoz/ListPanel", "signoz/PromQLQuery", `{"name":"A","query":"up"}`), true},
 		{"List+Composite", mkQuery("signoz/ListPanel", "signoz/CompositeQuery", `{"queries":[]}`), true},
 		{"List+Formula", mkQuery("signoz/ListPanel", "signoz/Formula", `{"name":"F1","expression":"A+B"}`), true},
 		// Composite sub-queries
 		{"Table+Composite(promql)", mkComposite("signoz/TablePanel", "promql", `{"name":"A","query":"up"}`), true},
+		{"ScatterPlot+Composite(promql)", mkComposite("signoz/ScatterPlotPanel", "promql", `{"name":"A","query":"up"}`), true},
 		{"Table+Composite(clickhouse)", mkComposite("signoz/TablePanel", "clickhouse_sql", `{"name":"A","query":"SELECT 1"}`), false},
 		{"Table+Composite(builder_ai)", mkComposite("signoz/TablePanel", "builder_ai_query", `{"name":"A","aggregations":[{"expression":"count()"}]}`), false},
 	}

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -28,16 +28,17 @@ type PanelPlugin struct {
 // (and strips the duplicate parent properties) after reflection.
 func (PanelPlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
 	return markDiscriminator(s, "kind", map[string]string{
-		string(PanelKindTimeSeries): schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec"),
-		string(PanelKindBarChart):   schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec"),
-		string(PanelKindAreaChart):  schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec"),
-		string(PanelKindNumber):     schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec"),
-		string(PanelKindPieChart):   schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec"),
-		string(PanelKindTable):      schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec"),
-		string(PanelKindHistogram):  schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec"),
-		string(PanelKindList):       schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec"),
-		string(PanelKindText):       schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec"),
-		string(PanelKindHeatmap):    schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec"),
+		string(PanelKindTimeSeries):  schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec"),
+		string(PanelKindBarChart):    schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec"),
+		string(PanelKindAreaChart):   schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec"),
+		string(PanelKindNumber):      schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec"),
+		string(PanelKindPieChart):    schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec"),
+		string(PanelKindTable):       schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec"),
+		string(PanelKindHistogram):   schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec"),
+		string(PanelKindList):        schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec"),
+		string(PanelKindText):        schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec"),
+		string(PanelKindHeatmap):     schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec"),
+		string(PanelKindScatterPlot): schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec"),
 	})
 }
 
@@ -71,6 +72,7 @@ func (PanelPlugin) JSONSchemaOneOf() []any {
 		PanelPluginVariant[ListPanelSpec]{Kind: string(PanelKindList)},
 		PanelPluginVariant[TextPanelSpec]{Kind: string(PanelKindText)},
 		PanelPluginVariant[HeatmapPanelSpec]{Kind: string(PanelKindHeatmap)},
+		PanelPluginVariant[ScatterPlotPanelSpec]{Kind: string(PanelKindScatterPlot)},
 	}
 }
 
@@ -234,16 +236,17 @@ func (v VariablePluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error
 
 var (
 	panelPluginSpecs = map[PanelPluginKind]func() any{
-		PanelKindTimeSeries: func() any { return new(TimeSeriesPanelSpec) },
-		PanelKindBarChart:   func() any { return new(BarChartPanelSpec) },
-		PanelKindAreaChart:  func() any { return new(AreaChartPanelSpec) },
-		PanelKindNumber:     func() any { return new(NumberPanelSpec) },
-		PanelKindPieChart:   func() any { return new(PieChartPanelSpec) },
-		PanelKindTable:      func() any { return new(TablePanelSpec) },
-		PanelKindHistogram:  func() any { return new(HistogramPanelSpec) },
-		PanelKindList:       func() any { return new(ListPanelSpec) },
-		PanelKindText:       func() any { return new(TextPanelSpec) },
-		PanelKindHeatmap:    func() any { return new(HeatmapPanelSpec) },
+		PanelKindTimeSeries:  func() any { return new(TimeSeriesPanelSpec) },
+		PanelKindBarChart:    func() any { return new(BarChartPanelSpec) },
+		PanelKindAreaChart:   func() any { return new(AreaChartPanelSpec) },
+		PanelKindNumber:      func() any { return new(NumberPanelSpec) },
+		PanelKindPieChart:    func() any { return new(PieChartPanelSpec) },
+		PanelKindTable:       func() any { return new(TablePanelSpec) },
+		PanelKindHistogram:   func() any { return new(HistogramPanelSpec) },
+		PanelKindList:        func() any { return new(ListPanelSpec) },
+		PanelKindText:        func() any { return new(TextPanelSpec) },
+		PanelKindHeatmap:     func() any { return new(HeatmapPanelSpec) },
+		PanelKindScatterPlot: func() any { return new(ScatterPlotPanelSpec) },
 	}
 	queryPluginSpecs = map[QueryPluginKind]func() any{
 		QueryKindBuilder:       func() any { return new(BuilderQuerySpec) },
@@ -260,16 +263,17 @@ var (
 		VariableKindCustom:  func() any { return new(CustomVariableSpec) },
 	}
 	allowedQueryKinds = map[PanelPluginKind][]QueryPluginKind{
-		PanelKindTimeSeries: {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindBarChart:   {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindAreaChart:  {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindNumber:     {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindHistogram:  {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindPieChart:   {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
-		PanelKindTable:      {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
-		PanelKindList:       {QueryKindBuilder, QueryKindAIBuilder},
-		PanelKindText:       {},
-		PanelKindHeatmap:    {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindTimeSeries:  {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindBarChart:    {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindAreaChart:   {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindNumber:      {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindHistogram:   {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindPieChart:    {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
+		PanelKindTable:       {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
+		PanelKindList:        {QueryKindBuilder, QueryKindAIBuilder},
+		PanelKindText:        {},
+		PanelKindHeatmap:     {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindScatterPlot: {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
 	}
 )
 

pkg/types/dashboardtypes/perses_public_dashboard.go

@@ -221,7 +221,7 @@ func (d *DashboardV2) GetPanelQuery(startTime, endTime uint64, panelKey string)
 		CompositeQuery: composite,
 		FormatOptions: &qb.FormatOptions{
 			FillGaps:               fillGaps,
-			FormatTableResultForUI: panel.Spec.Plugin.Kind == PanelKindTable,
+			FormatTableResultForUI: panel.Spec.Plugin.Kind == PanelKindTable || panel.Spec.Plugin.Kind == PanelKindScatterPlot,
 		},
 	}, nil
 }

pkg/types/dashboardtypes/perses_public_dashboard_panel_query_test.go

@@ -251,34 +251,38 @@ func TestDashboardV2GetPanelQuery(t *testing.T) {
 		assert.Equal(t, telemetrytypes.SignalTraces, spec.Signal)
 	})
 
-	t.Run("sets FormatTableResultForUI only for table panels", func(t *testing.T) {
-		dashboard := &DashboardV2{
-			Spec: DashboardSpec{
-				Panels: map[string]*Panel{
-					"panel-1": {
-						Spec: PanelSpec{
-							Plugin: PanelPlugin{Kind: PanelKindTable},
-							Queries: []Query{
-								{
-									Kind: qb.RequestTypeScalar,
-									Spec: QuerySpec{
-										Plugin: QueryPlugin{
-											Kind: QueryKindBuilder,
-											Spec: &BuilderQuerySpec{Spec: qb.QueryBuilderQuery[qb.MetricAggregation]{Name: "A"}},
+	t.Run("sets FormatTableResultForUI for panels that join scalar rows", func(t *testing.T) {
+		for _, kind := range []PanelPluginKind{PanelKindTable, PanelKindScatterPlot} {
+			t.Run(string(kind), func(t *testing.T) {
+				dashboard := &DashboardV2{
+					Spec: DashboardSpec{
+						Panels: map[string]*Panel{
+							"panel-1": {
+								Spec: PanelSpec{
+									Plugin: PanelPlugin{Kind: kind},
+									Queries: []Query{
+										{
+											Kind: qb.RequestTypeScalar,
+											Spec: QuerySpec{
+												Plugin: QueryPlugin{
+													Kind: QueryKindBuilder,
+													Spec: &BuilderQuerySpec{Spec: qb.QueryBuilderQuery[qb.MetricAggregation]{Name: "A"}},
+												},
+											},
 										},
 									},
 								},
 							},
 						},
 					},
-				},
-			},
-		}
+				}
 
-		req, err := dashboard.GetPanelQuery(1, 2, "panel-1")
-		require.NoError(t, err)
-		require.NotNil(t, req.FormatOptions)
-		assert.True(t, req.FormatOptions.FormatTableResultForUI)
+				req, err := dashboard.GetPanelQuery(1, 2, "panel-1")
+				require.NoError(t, err)
+				require.NotNil(t, req.FormatOptions)
+				assert.True(t, req.FormatOptions.FormatTableResultForUI)
+			})
+		}
 	})
 
 	t.Run("sets FillGaps from the panel visualization", func(t *testing.T) {

pkg/types/dashboardtypes/perses_signoz_plugins.go

@@ -2,6 +2,8 @@ package dashboardtypes
 
 import (
 	"encoding/json"
+	"maps"
+	"slices"
 	"strconv"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -187,20 +189,21 @@ func (AIBuilderQuerySpec) PrepareJSONSchema(s *jsonschema.Schema) error {
 type PanelPluginKind string
 
 const (
-	PanelKindTimeSeries PanelPluginKind = "signoz/TimeSeriesPanel"
-	PanelKindBarChart   PanelPluginKind = "signoz/BarChartPanel"
-	PanelKindAreaChart  PanelPluginKind = "signoz/AreaChartPanel"
-	PanelKindNumber     PanelPluginKind = "signoz/NumberPanel"
-	PanelKindPieChart   PanelPluginKind = "signoz/PieChartPanel"
-	PanelKindTable      PanelPluginKind = "signoz/TablePanel"
-	PanelKindHistogram  PanelPluginKind = "signoz/HistogramPanel"
-	PanelKindList       PanelPluginKind = "signoz/ListPanel"
-	PanelKindText       PanelPluginKind = "signoz/TextPanel"
-	PanelKindHeatmap    PanelPluginKind = "signoz/HeatmapPanel"
+	PanelKindTimeSeries  PanelPluginKind = "signoz/TimeSeriesPanel"
+	PanelKindBarChart    PanelPluginKind = "signoz/BarChartPanel"
+	PanelKindAreaChart   PanelPluginKind = "signoz/AreaChartPanel"
+	PanelKindNumber      PanelPluginKind = "signoz/NumberPanel"
+	PanelKindPieChart    PanelPluginKind = "signoz/PieChartPanel"
+	PanelKindTable       PanelPluginKind = "signoz/TablePanel"
+	PanelKindHistogram   PanelPluginKind = "signoz/HistogramPanel"
+	PanelKindList        PanelPluginKind = "signoz/ListPanel"
+	PanelKindText        PanelPluginKind = "signoz/TextPanel"
+	PanelKindHeatmap     PanelPluginKind = "signoz/HeatmapPanel"
+	PanelKindScatterPlot PanelPluginKind = "signoz/ScatterPlotPanel"
 )
 
 func (PanelPluginKind) Enum() []any {
-	return []any{PanelKindTimeSeries, PanelKindBarChart, PanelKindAreaChart, PanelKindNumber, PanelKindPieChart, PanelKindTable, PanelKindHistogram, PanelKindList, PanelKindText, PanelKindHeatmap}
+	return []any{PanelKindTimeSeries, PanelKindBarChart, PanelKindAreaChart, PanelKindNumber, PanelKindPieChart, PanelKindTable, PanelKindHistogram, PanelKindList, PanelKindText, PanelKindHeatmap, PanelKindScatterPlot}
 }
 
 func (k PanelPluginKind) rendersWithoutQuery() bool {
@@ -350,6 +353,95 @@ type TextPanelSpec struct {
 	HeaderOptions HeaderOptions    `json:"headerOptions"`
 }
 
+type ScatterPlotPanelSpec struct {
+	Visualization   BasicVisualization         `json:"visualization"`
+	Dimensions      ScatterPlotDimensions      `json:"dimensions"`
+	Formatting      TableFormatting            `json:"formatting"`
+	Axes            ScatterPlotAxes            `json:"axes"`
+	ChartAppearance ScatterPlotChartAppearance `json:"chartAppearance"`
+	Legend          Legend                     `json:"legend"`
+	Thresholds      []ScatterPlotThreshold     `json:"thresholds" validate:"dive"`
+}
+
+func (s *ScatterPlotPanelSpec) validateAgainstQuery(query Query, path string) error {
+	composite, err := query.Spec.Plugin.buildV5CompositeQueryFromPlugin()
+	if err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.dimensions: %s", path, err.Error())
+	}
+	keys, known := composite.CollectResultColumnKeys()
+	if !known {
+		return nil
+	}
+	for _, binding := range []struct{ field, key string }{{"x", s.Dimensions.X}, {"y", s.Dimensions.Y}, {"sizeBy", s.Dimensions.SizeBy}} {
+		// Empty is unset: the renderer picks a column or a fixed size.
+		if binding.key == "" {
+			continue
+		}
+		if _, ok := keys.Aggregations[binding.key]; !ok {
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s.dimensions.%s: %q is not a value column of the panel's query; value columns: %s", path, binding.field, binding.key, allowedValuesForKind(slices.Sorted(maps.Keys(keys.Aggregations))))
+		}
+	}
+	for _, label := range s.Dimensions.ColorBy {
+		if _, ok := keys.Groups[label]; !ok {
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s.dimensions.colorBy: %q is not a group-by key of the panel's query; group-by keys: %s", path, label, allowedValuesForKind(slices.Sorted(maps.Keys(keys.Groups))))
+		}
+	}
+	return nil
+}
+
+// ScatterPlotDimensions binds result columns to what a dot encodes. Value columns
+// use the Table column key, so formatting.columnUnits carries over between the
+// two kinds.
+type ScatterPlotDimensions struct {
+	X       string   `json:"x" description:"Value column key (queryName, or queryName.expression for a multi-aggregation query) plotted on the x axis. Empty uses the first value column."`
+	Y       string   `json:"y" description:"Value column key plotted on the y axis. Empty uses the second value column."`
+	SizeBy  string   `json:"sizeBy" description:"Value column key that scales dot size. Empty draws every dot at the default size."`
+	ColorBy []string `json:"colorBy" description:"Group-by label names (e.g. k8s.namespace.name) whose combined values colour dots and drive the legend. Empty colours by every group-by label."`
+}
+
+type ScatterPlotAxes struct {
+	X ScatterPlotAxis `json:"x"`
+	Y ScatterPlotAxis `json:"y"`
+}
+
+type ScatterPlotAxis struct {
+	SoftMin *float64  `json:"softMin"`
+	SoftMax *float64  `json:"softMax"`
+	Scale   AxisScale `json:"scale"`
+	Label   string    `json:"label" description:"Axis title. Empty draws none."`
+}
+
+type ScatterPlotChartAppearance struct {
+	Points ScatterPlotPoints `json:"points"`
+}
+
+// ScatterPlotPoints keeps the fixed size and the size range side by side so
+// binding or unbinding dimensions.sizeBy restores the other's last setting. Nil
+// fields resolve to the renderer default.
+type ScatterPlotPoints struct {
+	Size    *PointDiameter `json:"size" description:"Diameter of every dot when dimensions.sizeBy is unset."`
+	MinSize *PointDiameter `json:"minSize" description:"Diameter of the smallest dot when dimensions.sizeBy is set."`
+	MaxSize *PointDiameter `json:"maxSize" description:"Diameter of the largest dot when dimensions.sizeBy is set."`
+	Opacity *PointOpacity  `json:"opacity"`
+}
+
+func (p *ScatterPlotPoints) UnmarshalJSON(data []byte) error {
+	type alias ScatterPlotPoints
+	var tmp alias
+	if err := json.Unmarshal(data, &tmp); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid points")
+	}
+	*p = ScatterPlotPoints(tmp)
+	return p.validate()
+}
+
+func (p ScatterPlotPoints) validate() error {
+	if p.MinSize != nil && p.MaxSize != nil && *p.MinSize > *p.MaxSize {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid points: minSize %d must not exceed maxSize %d", *p.MinSize, *p.MaxSize)
+	}
+	return nil
+}
+
 type TextPresentation struct {
 	TextAlign     TextAlign     `json:"textAlign"`
 	VerticalAlign VerticalAlign `json:"verticalAlign"`
@@ -431,6 +523,11 @@ type ComparisonThreshold struct {
 	Format   ThresholdFormat    `json:"format"`
 }
 
+type ScatterPlotThreshold struct {
+	ThresholdWithLabel
+	Axis ThresholdAxis `json:"axis"`
+}
+
 type TableThreshold struct {
 	ComparisonThreshold
 	ColumnName string `json:"columnName" validate:"required" required:"true"`
@@ -716,6 +813,86 @@ func (ls *LineStyle) UnmarshalJSON(data []byte) error {
 	}
 }
 
+// AxisScale `auto` leaves the choice to the renderer; `symlog` is log-like but
+// defined at and below zero.
+type AxisScale struct{ valuer.String }
+
+var (
+	AxisScaleAuto   = AxisScale{valuer.NewString("auto")} // default
+	AxisScaleLinear = AxisScale{valuer.NewString("linear")}
+	AxisScaleLog    = AxisScale{valuer.NewString("log")}
+	AxisScaleSymlog = AxisScale{valuer.NewString("symlog")}
+)
+
+func (AxisScale) Enum() []any {
+	return []any{AxisScaleAuto, AxisScaleLinear, AxisScaleLog, AxisScaleSymlog}
+}
+
+func (as AxisScale) ValueOrDefault() string {
+	if as.IsZero() {
+		return AxisScaleAuto.StringValue()
+	}
+	return as.StringValue()
+}
+
+func (as AxisScale) MarshalJSON() ([]byte, error) {
+	return json.Marshal(as.ValueOrDefault())
+}
+
+func (as *AxisScale) UnmarshalJSON(data []byte) error {
+	var v string
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid axis scale: must be a string, one of `auto`, `linear`, `log`, or `symlog`")
+	}
+	val := AxisScale{valuer.NewString(v)}
+	switch val {
+	case AxisScaleAuto, AxisScaleLinear, AxisScaleLog, AxisScaleSymlog:
+		*as = val
+		return nil
+	default:
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid axis scale %q: must be `auto`, `linear`, `log`, or `symlog`", v)
+	}
+}
+
+// ThresholdAxis is the axis a scatter plot threshold line marks: `y` draws it
+// horizontally, `x` vertically.
+type ThresholdAxis struct{ valuer.String }
+
+var (
+	ThresholdAxisX = ThresholdAxis{valuer.NewString("x")}
+	ThresholdAxisY = ThresholdAxis{valuer.NewString("y")} // default
+)
+
+func (ThresholdAxis) Enum() []any {
+	return []any{ThresholdAxisX, ThresholdAxisY}
+}
+
+func (ta ThresholdAxis) ValueOrDefault() string {
+	if ta.IsZero() {
+		return ThresholdAxisY.StringValue()
+	}
+	return ta.StringValue()
+}
+
+func (ta ThresholdAxis) MarshalJSON() ([]byte, error) {
+	return json.Marshal(ta.ValueOrDefault())
+}
+
+func (ta *ThresholdAxis) UnmarshalJSON(data []byte) error {
+	var v string
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid threshold axis: must be a string, one of `x` or `y`")
+	}
+	val := ThresholdAxis{valuer.NewString(v)}
+	switch val {
+	case ThresholdAxisX, ThresholdAxisY:
+		*ta = val
+		return nil
+	default:
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid threshold axis %q: must be `x` or `y`", v)
+	}
+}
+
 type FillMode struct{ valuer.String }
 
 var (
@@ -854,6 +1031,53 @@ func (o *FillOpacity) UnmarshalJSON(data []byte) error {
 	return nil
 }
 
+const (
+	minPointDiameter = 2
+	maxPointDiameter = 40
+)
+
+// PointDiameter is a scatter dot's diameter in whole CSS pixels.
+type PointDiameter int
+
+func (PointDiameter) PrepareJSONSchema(s *jsonschema.Schema) error {
+	s.WithMinimum(minPointDiameter).WithMaximum(maxPointDiameter)
+	return nil
+}
+
+func (d *PointDiameter) UnmarshalJSON(data []byte) error {
+	var v int
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid point diameter: must be a whole number between %d and %d", minPointDiameter, maxPointDiameter)
+	}
+	if v < minPointDiameter || v > maxPointDiameter {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid point diameter %d: must be a whole number between %d and %d", v, minPointDiameter, maxPointDiameter)
+	}
+	*d = PointDiameter(v)
+	return nil
+}
+
+const minPointOpacity = 0.1
+
+// PointOpacity is a scatter dot's fill alpha. The floor keeps a dot visible.
+type PointOpacity float64
+
+func (PointOpacity) PrepareJSONSchema(s *jsonschema.Schema) error {
+	s.WithMinimum(minPointOpacity).WithMaximum(1)
+	return nil
+}
+
+func (o *PointOpacity) UnmarshalJSON(data []byte) error {
+	var v float64
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid point opacity: must be a number between %v and 1", minPointOpacity)
+	}
+	if v < minPointOpacity || v > 1 {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid point opacity %v: must be between %v and 1", v, minPointOpacity)
+	}
+	*o = PointOpacity(v)
+	return nil
+}
+
 type SpanGaps struct {
 	FillOnlyBelow bool   `json:"fillOnlyBelow" description:"Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected."`
 	FillLessThan  string `json:"fillLessThan" description:"The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected."`

pkg/types/dashboardtypes/testdata/perses_scatter_plot_panel.json

@@ -0,0 +1,134 @@
+{
+  "display": {
+    "name": "service health",
+    "description": "throughput against tail latency per pod"
+  },
+  "variables": [],
+  "panels": {
+    "p1": {
+      "kind": "Panel",
+      "spec": {
+        "display": {
+          "name": "throughput vs p99",
+          "description": ""
+        },
+        "plugin": {
+          "kind": "signoz/ScatterPlotPanel",
+          "spec": {
+            "visualization": {
+              "timePreference": "last_1_hr"
+            },
+            "dimensions": {
+              "x": "A.count()",
+              "y": "A.p99(duration_nano)",
+              "sizeBy": "A.countIf(has_error = true)",
+              "colorBy": ["k8s.namespace.name", "k8s.pod.name"]
+            },
+            "formatting": {
+              "columnUnits": {
+                "A.p99(duration_nano)": "ns"
+              },
+              "decimalPrecision": "1"
+            },
+            "axes": {
+              "x": {
+                "softMin": 0,
+                "softMax": null,
+                "scale": "log",
+                "label": "Throughput"
+              },
+              "y": {
+                "softMin": null,
+                "softMax": 1000,
+                "scale": "symlog",
+                "label": "p99 latency"
+              }
+            },
+            "chartAppearance": {
+              "points": {
+                "size": 8,
+                "minSize": 4,
+                "maxSize": 24,
+                "opacity": 0.1
+              }
+            },
+            "legend": {
+              "position": "right",
+              "mode": "list",
+              "customColors": {
+                "checkout": "#1f77b4"
+              }
+            },
+            "thresholds": [
+              {
+                "value": 300,
+                "unit": "ms",
+                "color": "#f00",
+                "label": "p99 SLO",
+                "axis": "y"
+              },
+              {
+                "value": 50,
+                "color": "#0f0",
+                "axis": "x"
+              }
+            ]
+          }
+        },
+        "links": [],
+        "queries": [
+          {
+            "kind": "scalar",
+            "spec": {
+              "plugin": {
+                "kind": "signoz/BuilderQuery",
+                "spec": {
+                  "name": "A",
+                  "signal": "traces",
+                  "aggregations": [
+                    {
+                      "expression": "count()"
+                    },
+                    {
+                      "expression": "p99(duration_nano)"
+                    },
+                    {
+                      "expression": "countIf(has_error = true)"
+                    }
+                  ],
+                  "groupBy": [
+                    {
+                      "name": "k8s.namespace.name"
+                    },
+                    {
+                      "name": "k8s.pod.name"
+                    }
+                  ]
+                }
+              }
+            }
+          }
+        ]
+      }
+    }
+  },
+  "links": [],
+  "layouts": [
+    {
+      "kind": "Grid",
+      "spec": {
+        "items": [
+          {
+            "x": 0,
+            "y": 0,
+            "width": 12,
+            "height": 8,
+            "content": {
+              "$ref": "#/spec/panels/p1"
+            }
+          }
+        ]
+      }
+    }
+  ]
+}

pkg/types/querybuildertypes/querybuildertypesv5/req.go

@@ -266,6 +266,43 @@ type CompositeQuery struct {
 	Queries []QueryEnvelope `json:"queries"`
 }
 
+// ResultColumnKeys is what a scalar query yields per row, keyed the way the
+// UI keys columns: an aggregation column is the query name, or
+// queryName.expression when the query has several aggregations; a group
+// column is a group-by key name.
+type ResultColumnKeys struct {
+	Aggregations map[string]struct{}
+	Groups       map[string]struct{}
+}
+
+// CollectResultColumnKeys reports false when a query's columns are only known
+// at run time, as for ClickHouse SQL and PromQL. A disabled query yields no
+// aggregation column but keeps its group columns, since a formula over it
+// still carries them.
+func (c *CompositeQuery) CollectResultColumnKeys() (ResultColumnKeys, bool) {
+	keys := ResultColumnKeys{Aggregations: map[string]struct{}{}, Groups: map[string]struct{}{}}
+	for _, envelope := range c.Queries {
+		if envelope.GetType() == QueryTypeClickHouseSQL || envelope.GetType() == QueryTypePromQL {
+			return ResultColumnKeys{}, false
+		}
+		for _, key := range envelope.GetGroupBy() {
+			keys.Groups[key.Name] = struct{}{}
+		}
+		if envelope.IsDisabled() {
+			continue
+		}
+		expressions := envelope.GetAggregationExpressions()
+		if len(expressions) <= 1 {
+			keys.Aggregations[envelope.GetQueryName()] = struct{}{}
+			continue
+		}
+		for _, expression := range expressions {
+			keys.Aggregations[envelope.GetQueryName()+"."+expression] = struct{}{}
+		}
+	}
+	return keys, true
+}
+
 // PrepareJSONSchema adds description to the CompositeQuery schema.
 func (c *CompositeQuery) PrepareJSONSchema(schema *jsonschema.Schema) error {
 	schema.WithDescription("Composite query containing one or more query envelopes. Each query envelope specifies its type and corresponding spec.")

pkg/types/querybuildertypes/querybuildertypesv5/req_getters.go

@@ -225,6 +225,34 @@ func (q *QueryEnvelope) GetGroupBy() []GroupByKey {
 	return nil
 }
 
+// GetAggregationExpressions returns one entry per aggregation. A metric
+// aggregation has no expression, so it contributes an empty entry.
+func (q *QueryEnvelope) GetAggregationExpressions() []string {
+	switch spec := q.Spec.(type) {
+	case QueryBuilderTraceOperator:
+		expressions := make([]string, len(spec.Aggregations))
+		for i, aggregation := range spec.Aggregations {
+			expressions[i] = aggregation.Expression
+		}
+		return expressions
+	case QueryBuilderQuery[TraceAggregation]:
+		expressions := make([]string, len(spec.Aggregations))
+		for i, aggregation := range spec.Aggregations {
+			expressions[i] = aggregation.Expression
+		}
+		return expressions
+	case QueryBuilderQuery[LogAggregation]:
+		expressions := make([]string, len(spec.Aggregations))
+		for i, aggregation := range spec.Aggregations {
+			expressions[i] = aggregation.Expression
+		}
+		return expressions
+	case QueryBuilderQuery[MetricAggregation]:
+		return make([]string, len(spec.Aggregations))
+	}
+	return nil
+}
+
 // GetFilter returns the filter.
 func (q *QueryEnvelope) GetFilter() *Filter {
 	switch spec := q.Spec.(type) {

pkg/types/querybuildertypes/querybuildertypesv5/req_test.go

@@ -1903,3 +1903,63 @@ func TestQueryRangeRequest_StepIntervalForQuery(t *testing.T) {
 		})
 	}
 }
+
+func TestCompositeQueryCollectResultColumnKeys(t *testing.T) {
+	testCases := []struct {
+		scenario      string
+		composite     CompositeQuery
+		expectedKeys  ResultColumnKeys
+		expectedKnown bool
+	}{
+		{
+			scenario: "a single aggregation is keyed by the query name",
+			composite: CompositeQuery{Queries: []QueryEnvelope{{Type: QueryTypeBuilder, Spec: QueryBuilderQuery[TraceAggregation]{
+				Name:         "A",
+				Aggregations: []TraceAggregation{{Expression: "count()"}},
+				GroupBy:      []GroupByKey{{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "service.name"}}},
+			}}}},
+			expectedKeys:  ResultColumnKeys{Aggregations: map[string]struct{}{"A": {}}, Groups: map[string]struct{}{"service.name": {}}},
+			expectedKnown: true,
+		},
+		{
+			scenario: "several aggregations are keyed by query name and expression",
+			composite: CompositeQuery{Queries: []QueryEnvelope{{Type: QueryTypeBuilder, Spec: QueryBuilderQuery[LogAggregation]{
+				Name:         "A",
+				Aggregations: []LogAggregation{{Expression: "count()"}, {Expression: "p99(duration_nano)"}},
+			}}}},
+			expectedKeys:  ResultColumnKeys{Aggregations: map[string]struct{}{"A.count()": {}, "A.p99(duration_nano)": {}}, Groups: map[string]struct{}{}},
+			expectedKnown: true,
+		},
+		{
+			scenario: "a disabled query yields no aggregation but keeps its groups for the formula over it",
+			composite: CompositeQuery{Queries: []QueryEnvelope{
+				{Type: QueryTypeBuilder, Spec: QueryBuilderQuery[MetricAggregation]{
+					Name:         "A",
+					Disabled:     true,
+					Aggregations: []MetricAggregation{{MetricName: "http.server.request.count"}},
+					GroupBy:      []GroupByKey{{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "service.name"}}},
+				}},
+				{Type: QueryTypeFormula, Spec: QueryBuilderFormula{Name: "F1", Expression: "A * 2"}},
+			}},
+			expectedKeys:  ResultColumnKeys{Aggregations: map[string]struct{}{"F1": {}}, Groups: map[string]struct{}{"service.name": {}}},
+			expectedKnown: true,
+		},
+		{
+			scenario: "clickhouse columns are only known at run time",
+			composite: CompositeQuery{Queries: []QueryEnvelope{{Type: QueryTypeClickHouseSQL, Spec: ClickHouseQuery{
+				Name:  "A",
+				Query: "SELECT 1",
+			}}}},
+			expectedKeys:  ResultColumnKeys{},
+			expectedKnown: false,
+		},
+	}
+
+	for _, testCase := range testCases {
+		t.Run(testCase.scenario, func(t *testing.T) {
+			keys, known := testCase.composite.CollectResultColumnKeys()
+			assert.Equal(t, testCase.expectedKnown, known)
+			assert.Equal(t, testCase.expectedKeys, keys)
+		})
+	}
+}

tests/e2e/.env.example

@@ -13,3 +13,10 @@ SIGNOZ_E2E_BASE_URL=https://app.us.staging.signoz.cloud
 # Test credentials (required only when SIGNOZ_E2E_BASE_URL is set — i.e. staging mode)
 SIGNOZ_E2E_USERNAME=
 SIGNOZ_E2E_PASSWORD=
+
+# Base path mode. `pnpm env:start:base-path` serves SigNoz under /signoz, the
+# way SIGNOZ_GLOBAL_EXTERNAL__URL deploys it, and writes this to .env.local;
+# specs then run unchanged (see helpers/base-path.ts). The root and base path
+# stacks share one database, so stop one and run `pnpm env:clean` before
+# starting the other.
+# SIGNOZ_E2E_BASE_PATH=/signoz

tests/e2e/bootstrap/basepath/conftest.py

@@ -0,0 +1,55 @@
+import pytest
+from testcontainers.core.container import Network
+
+from fixtures import types
+from fixtures.auth import license_applier, register_admin
+from fixtures.signoz import create_signoz
+
+# The e2e stack served under a URL path prefix, as SIGNOZ_GLOBAL_EXTERNAL__URL
+# deploys it. These shadow the root fixtures of the same name; the separate
+# cache keys keep the two stacks from restoring each other's containers.
+BASE_PATH = "/signoz"
+
+
+@pytest.fixture(name="base_path", scope="package")
+def base_path() -> str:
+    return BASE_PATH
+
+
+@pytest.fixture(name="signoz", scope="package")
+def signoz_base_path(  # pylint: disable=too-many-arguments,too-many-positional-arguments
+    network: Network,
+    zeus: types.TestContainerDocker,
+    gateway: types.TestContainerDocker,
+    sqlstore: types.TestContainerSQL,
+    clickhouse: types.TestContainerClickhouse,
+    e2e_env: dict,
+    request: pytest.FixtureRequest,
+    pytestconfig: pytest.Config,
+) -> types.SigNoz:
+    return create_signoz(
+        network=network,
+        zeus=zeus,
+        gateway=gateway,
+        sqlstore=sqlstore,
+        clickhouse=clickhouse,
+        request=request,
+        pytestconfig=pytestconfig,
+        cache_key="signoz_base_path",
+        env_overrides=e2e_env | {"SIGNOZ_GLOBAL_EXTERNAL__URL": f"http://localhost:8080{BASE_PATH}"},
+    )
+
+
+@pytest.fixture(name="create_user_admin", scope="package")
+def create_user_admin_base_path(signoz: types.SigNoz, request: pytest.FixtureRequest, pytestconfig: pytest.Config) -> types.Operation:
+    return register_admin(signoz, request, pytestconfig, cache_key="create_user_admin_base_path", base_path=BASE_PATH)
+
+
+@pytest.fixture(name="apply_license", scope="package")
+def apply_license_base_path(
+    signoz: types.SigNoz,
+    create_user_admin: types.Operation,  # pylint: disable=unused-argument
+    request: pytest.FixtureRequest,
+    pytestconfig: pytest.Config,
+) -> types.Operation:
+    return license_applier(signoz, request, pytestconfig, cache_key="apply_license_base_path", base_path=BASE_PATH)

tests/e2e/bootstrap/basepath/setup.py

@@ -0,0 +1,5 @@
+# The root bootstrap's tests, collected again here so they resolve the
+# base-path fixtures from this package's conftest.py.
+from e2e.bootstrap.setup import test_setup, test_teardown
+
+__all__ = ["test_setup", "test_teardown"]

tests/e2e/bootstrap/conftest.py

@@ -0,0 +1,45 @@
+import pytest
+from testcontainers.core.container import Network
+
+from fixtures import types
+from fixtures.signoz import create_signoz
+
+
+@pytest.fixture(name="base_path", scope="package")
+def base_path() -> str:
+    """URL path prefix SigNoz is served under. Empty serves it at the root;
+    basepath/conftest.py overrides it."""
+    return ""
+
+
+@pytest.fixture(name="e2e_env", scope="package")
+def e2e_env() -> dict:
+    """Environment every e2e SigNoz gets. Each Playwright worker logs in once,
+    and the default cap of 5 sessions per user evicts the oldest, which turns a
+    worker's requests into 401s mid-run."""
+    return {"SIGNOZ_TOKENIZER_OPAQUE_TOKEN_MAX__PER__USER": 100}
+
+
+@pytest.fixture(name="signoz", scope="package")
+def signoz(  # pylint: disable=too-many-arguments,too-many-positional-arguments
+    network: Network,
+    zeus: types.TestContainerDocker,
+    gateway: types.TestContainerDocker,
+    sqlstore: types.TestContainerSQL,
+    clickhouse: types.TestContainerClickhouse,
+    tls: types.TLS,
+    e2e_env: dict,
+    request: pytest.FixtureRequest,
+    pytestconfig: pytest.Config,
+) -> types.SigNoz:
+    return create_signoz(
+        network=network,
+        zeus=zeus,
+        gateway=gateway,
+        sqlstore=sqlstore,
+        clickhouse=clickhouse,
+        request=request,
+        pytestconfig=pytestconfig,
+        tls=tls,
+        env_overrides=e2e_env,
+    )

tests/e2e/bootstrap/setup.py

@@ -15,11 +15,12 @@ def _env_file(pytestconfig: pytest.Config) -> Path:
     return pytestconfig.rootpath / "e2e" / ".env.local"
 
 
-def test_setup(
+def test_setup(  # pylint: disable=too-many-arguments,too-many-positional-arguments
     signoz: types.SigNoz,
     create_user_admin: types.Operation,  # pylint: disable=unused-argument
     apply_license: types.Operation,  # pylint: disable=unused-argument
     seeder: types.TestContainerDocker,
+    base_path: str,
     pytestconfig: pytest.Config,
 ) -> None:
     """Bring the backend up and write e2e coordinates to .env.local."""
@@ -33,6 +34,8 @@ def test_setup(
         f.write(f"SIGNOZ_E2E_USERNAME={USER_ADMIN_EMAIL}\n")
         f.write(f"SIGNOZ_E2E_PASSWORD={USER_ADMIN_PASSWORD}\n")
         f.write(f"SIGNOZ_E2E_SEEDER_URL={seeder_cfg.base()}\n")
+        if base_path:
+            f.write(f"SIGNOZ_E2E_BASE_PATH={base_path}\n")
 
 
 def test_teardown(

tests/e2e/drivers/kit.ts

@@ -0,0 +1,93 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import type { Browser, Page, TestType } from '@playwright/test';
+
+import { newAdminContext } from '../helpers/auth';
+
+export { expect, test as kit } from '../fixtures/auth';
+
+export interface DriverContext {
+	page: Page;
+}
+
+type Fixtures = Record<string, unknown>;
+
+/**
+ * Adds test-scoped fixtures to any test carrying `authedPage`. `T` is inferred
+ * from the argument: TypeScript cannot invert `T & { authedPage: Page }`, so
+ * constraining that way widens every existing fixture to `unknown`.
+ */
+export type Layer<Adds> = <T extends { authedPage: Page }, W extends object>(
+	base: TestType<T, W>,
+) => TestType<T & Adds, W>;
+
+export type WorkerLayer<Adds> = <T extends object, W extends object>(
+	base: TestType<T, W>,
+) => TestType<T, W & Adds>;
+
+/** A `withX` layer binding `build` to the authenticated page. */
+export function driver<Name extends string, T>(
+	name: Name,
+	build: (ctx: DriverContext) => T,
+): Layer<{ [K in Name]: T }> {
+	const fixture = {
+		// Playwright reads fixture dependencies from the source text, so
+		// `authedPage` must stay destructured literally.
+		[name]: async (
+			{ authedPage }: { authedPage: Page },
+			use: (value: T) => Promise<void>,
+		) => {
+			await use(build({ page: authedPage }));
+		},
+	};
+	return ((test: TestType<Fixtures, Fixtures>) =>
+		test.extend(fixture as never)) as Layer<{ [K in Name]: T }>;
+}
+
+/**
+ * A `withX` layer that seeds once per worker and tears down after. `open` and
+ * `close` run on a throwaway admin page: worker fixtures cannot reach
+ * `authedPage`.
+ */
+export function seeded<Name extends string, T>(
+	name: Name,
+	open: (ctx: { page: Page; workerIndex: number }) => Promise<T>,
+	close?: (ctx: { page: Page; value: T }) => Promise<void>,
+	options: { timeout?: number } = {},
+): WorkerLayer<{ [K in Name]: T }> {
+	const fixture = {
+		[name]: [
+			async (
+				{ browser }: { browser: Browser },
+				use: (value: T) => Promise<void>,
+				workerInfo: { workerIndex: number },
+			) => {
+				const value = await onAdminPage(browser, (page) =>
+					open({ page, workerIndex: workerInfo.workerIndex }),
+				);
+				await use(value);
+				if (close) {
+					await onAdminPage(browser, (page) => close({ page, value }));
+				}
+			},
+			{ scope: 'worker', timeout: options.timeout },
+		],
+	};
+	return ((test: TestType<Fixtures, Fixtures>) =>
+		test.extend(fixture as never)) as WorkerLayer<{ [K in Name]: T }>;
+}
+
+/** Run `body` on a throwaway page authenticated as the admin. */
+export async function onAdminPage<T>(
+	browser: Browser,
+	body: (page: Page) => Promise<T>,
+): Promise<T> {
+	const ctx = await newAdminContext(browser);
+	try {
+		return await body(await ctx.newPage());
+	} finally {
+		await ctx.close();
+	}
+}

tests/e2e/drivers/routing.ts

@@ -0,0 +1,392 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { randomBytes } from 'crypto';
+
+import { expect, type Locator, type Page } from '@playwright/test';
+
+import { ADMIN } from '../helpers/auth';
+import { authToken } from '../helpers/common';
+import {
+	createDashboardViaApi,
+	deleteDashboardViaApi,
+} from '../helpers/dashboards';
+import { seedPodMetricsViaSeeder } from '../helpers/infra-monitoring';
+import { gotoLogsExplorer } from '../helpers/logs-explorer';
+import {
+	gotoTraceUntilLoaded,
+	type LargeTrace,
+	loadLargeTrace,
+	seedTracesViaSeeder,
+} from '../helpers/trace-details';
+
+import { driver, kit, seeded } from './kit';
+
+// The react-router v5 -> v7 regression net. Router-sensitive mechanics (history
+// depth, POP, same-url suppression, the `newTab` branch) live here so the specs
+// read as the property they guard.
+
+export const PATH = {
+	alerts: '/alerts',
+	dashboards: '/dashboard',
+	home: '/home',
+	k8s: '/infrastructure-monitoring/kubernetes',
+	login: '/login',
+	metricsSummary: '/metrics-explorer/summary',
+	metricsViews: '/metrics-explorer/views',
+	roles: '/settings/roles',
+	roleCreate: '/settings/roles/new',
+	services: '/services',
+	tracesExplorer: '/traces-explorer',
+	/** Matches no entry of `AppRoutes/routes.ts`. */
+	unknown: '/definitely-not-a-route',
+} as const;
+
+/** A resource attribute every seeded pod carries. */
+const NAMESPACE_ATTR = 'k8s.namespace.name';
+
+const RELATIVE_TIME_LABELS: Record<string, string> = {
+	'30m': 'Last 30 minutes',
+	'1h': 'Last 1 hour',
+	'6h': 'Last 6 hours',
+};
+
+/** Three browser projects share one backend, so names need more than a timestamp. */
+function uniqueSuffix(): string {
+	return randomBytes(4).toString('hex');
+}
+
+/** Role names allow lowercase letters and hyphens only. */
+export function uniqueAlphaSuffix(): string {
+	return [...randomBytes(6)]
+		.map((byte) => String.fromCharCode(97 + (byte % 26)))
+		.join('');
+}
+
+export function dashboardListParams(title: string): Record<string, string> {
+	return { search: title, columnKey: 'updatedAt', order: 'descend', page: '1' };
+}
+
+function groupByOf(url: URL): string {
+	return url.searchParams.get('groupBy') ?? '';
+}
+
+export interface Routing {
+	goto(path: string): Promise<void>;
+	reload(): Promise<void>;
+	goBack(): Promise<void>;
+	goForward(): Promise<void>;
+	/** Go back one entry and wait for `pathname`. */
+	goBackTo(pathname: string): Promise<void>;
+	url(): URL;
+	params(): Record<string, string>;
+	waitForPath(pathname: string): Promise<void>;
+	waitForParam(key: string, value: string): Promise<void>;
+	/** `history.length`: Chromium keeps it on POP and REPLACE, grows it on PUSH. */
+	historyDepth(): Promise<number>;
+	/** Complete the login form on the page as it stands, without navigating. */
+	login(): Promise<void>;
+	/** Sidebar entries are `div.nav-item`, not links. */
+	sidebarItem(label: string): Locator;
+	/** antd puts a `RouteTab` item's route on `data-node-key`. */
+	routeTab(route: string): Locator;
+	activeRouteTab(route: string): Locator;
+	/** The picker `TopNav` renders. Several pages mount their own. */
+	globalTimePicker(): Locator;
+	selectRelativeTime(value: string): Promise<void>;
+	expectRelativeTime(value: string): Promise<void>;
+	/** Ctrl/Cmd-click `target`, run `body` on the tab it opens, then close it. */
+	inNewTab(
+		target: Locator,
+		body: (tab: Routing) => Promise<void>,
+	): Promise<void>;
+	/** Hold every script requested during `body`, so lazy route chunks suspend. */
+	whileScriptsHeld(body: () => Promise<void>): Promise<void>;
+	gotoLogsExplorer(): Promise<void>;
+	dashboards: {
+		gotoList(title?: string): Promise<void>;
+		/** Not `dashboard-title-0`: the search tokenises on hyphens and matches leftovers. */
+		row(title: string): Locator;
+		landmark(): Locator;
+		title(): Locator;
+	};
+	k8s: {
+		/** Open the pods list once its mount-time `compositeQuery` rewrite landed. */
+		goto(params: Record<string, string>): Promise<void>;
+		/** One nuqs push: `groupBy`, `page` and `orderBy` flush together. */
+		groupBy(attribute: string): Promise<void>;
+		waitUntilGrouped(attribute: string, grouped?: boolean): Promise<void>;
+		groupBySelect(): Locator;
+	};
+	trace: {
+		path(trace: LargeTrace): string;
+		goto(trace: LargeTrace): Promise<void>;
+		rootRow(trace: LargeTrace): Locator;
+		back(): Promise<void>;
+	};
+	roles: {
+		/** Fill the create form far enough to arm the navigation blocker. */
+		openCreateForm(name: string): Promise<void>;
+		nameInput(): Locator;
+		cancel(): Promise<void>;
+		save(): Promise<void>;
+		discardDialog(): Locator;
+		settings(): Locator;
+		removeByName(names: string[]): Promise<void>;
+	};
+}
+
+export function routingDriver(page: Page): Routing {
+	const timePicker = (): Locator => page.getByTestId('dropDown');
+
+	const routing: Routing = {
+		goto: async (path) => {
+			await page.goto(path);
+		},
+		reload: async () => {
+			await page.reload();
+		},
+		goBack: async () => {
+			await page.goBack();
+		},
+		goForward: async () => {
+			await page.goForward();
+		},
+		goBackTo: async (pathname) => {
+			await page.goBack();
+			await routing.waitForPath(pathname);
+		},
+
+		url: () => new URL(page.url()),
+		params: () => Object.fromEntries(routing.url().searchParams),
+		waitForPath: (pathname) =>
+			page.waitForURL((url) => url.pathname === pathname),
+		waitForParam: (key, value) =>
+			page.waitForURL((url) => url.searchParams.get(key) === value),
+		historyDepth: () =>
+			page.evaluate(
+				() =>
+					(globalThis as unknown as { history: { length: number } }).history.length,
+			),
+
+		login: async () => {
+			await page.getByTestId('email').fill(ADMIN.email);
+			await page.getByTestId('initiate_login').click();
+			await page.getByTestId('password').fill(ADMIN.password);
+			await page.getByTestId('password_authn_submit').click();
+		},
+
+		sidebarItem: (label) =>
+			page.locator('.nav-item').filter({ hasText: new RegExp(`^${label}$`) }),
+		routeTab: (route) => page.locator(`.ant-tabs-tab[data-node-key="${route}"]`),
+		activeRouteTab: (route) =>
+			routing.routeTab(route).getByRole('tab', { selected: true }),
+
+		globalTimePicker: () =>
+			page.locator('.top-nav-container').getByTestId('dropDown'),
+
+		// A click before the picker is interactive is dropped silently, so retry the
+		// open. The popover unmounts on close, which is what proves the selection
+		// committed: the url may legitimately stay the same.
+		selectRelativeTime: async (value) => {
+			const option = page.getByTestId(`time-option-${value}`);
+			await expect(async () => {
+				if (!(await option.isVisible())) {
+					await timePicker().click();
+				}
+				await expect(option).toBeVisible({ timeout: 3_000 });
+			}).toPass({ timeout: 30_000 });
+			await option.click();
+			await expect(option).toBeHidden();
+		},
+
+		expectRelativeTime: async (value) => {
+			await expect(timePicker()).toHaveAccessibleName(RELATIVE_TIME_LABELS[value]);
+		},
+
+		inNewTab: async (target, body) => {
+			const [tab] = await Promise.all([
+				page.context().waitForEvent('page'),
+				target.click({ modifiers: ['ControlOrMeta'] }),
+			]);
+			try {
+				await tab.waitForLoadState();
+				await body(routingDriver(tab));
+			} finally {
+				await tab.close();
+			}
+		},
+
+		// The handler stays installed after the release: `unroute` drops the
+		// requests still parked in it.
+		whileScriptsHeld: async (body) => {
+			let release = (): void => {};
+			const held = new Promise<void>((resolve) => {
+				release = resolve;
+			});
+			await page.route('**/*.js', async (route) => {
+				await held;
+				await route.continue();
+			});
+			try {
+				await body();
+			} finally {
+				release();
+			}
+		},
+
+		gotoLogsExplorer: () => gotoLogsExplorer(page),
+
+		dashboards: {
+			gotoList: async (title) => {
+				if (!title) {
+					await page.goto(PATH.dashboards);
+					await expect(routing.dashboards.landmark()).toBeVisible();
+					return;
+				}
+				const search = new URLSearchParams(dashboardListParams(title));
+				await page.goto(`${PATH.dashboards}?${search.toString()}`);
+				await expect(routing.dashboards.row(title)).toBeVisible();
+			},
+			row: (title) =>
+				page
+					.locator('[data-testid^="dashboard-title-"]')
+					.filter({ hasText: title }),
+			// The views rail renders whether or not the list is empty.
+			landmark: () => page.getByTestId('dashboards-view-search'),
+			title: () => page.getByTestId('dashboard-title'),
+		},
+
+		k8s: {
+			goto: async (params) => {
+				const search = new URLSearchParams({ category: 'pods', ...params });
+				await page.goto(`${PATH.k8s}?${search.toString()}`);
+				await page.waitForURL((url) => url.searchParams.has('compositeQuery'));
+				await expect(routing.k8s.groupBySelect()).toBeVisible();
+			},
+			// The search input stays readonly until the dropdown opens, and `hasText`
+			// would also match longer keys, so type after opening and match the title.
+			groupBy: async (attribute) => {
+				await routing.k8s.groupBySelect().click();
+				await page.keyboard.type(attribute);
+				await page.locator(`.ant-select-item-option[title="${attribute}"]`).click();
+				await page.keyboard.press('Escape');
+				await routing.k8s.waitUntilGrouped(attribute);
+			},
+			waitUntilGrouped: (attribute, grouped = true) =>
+				page.waitForURL((url) => groupByOf(url).includes(attribute) === grouped),
+			groupBySelect: () => page.getByTestId('k8s-table-group-by-select'),
+		},
+
+		trace: {
+			path: (trace) => `/trace/${trace.traceId}`,
+			goto: (trace) =>
+				gotoTraceUntilLoaded(
+					page,
+					routing.trace.path(trace),
+					`cell-0-${trace.landmarks.root}`,
+				),
+			rootRow: (trace) => page.getByTestId(`cell-0-${trace.landmarks.root}`),
+			back: async () => {
+				await page.getByRole('button', { name: 'Back' }).click();
+			},
+		},
+
+		roles: {
+			openCreateForm: async (name) => {
+				await page.goto(PATH.roleCreate);
+				await routing.roles.nameInput().fill(name);
+				await expect(page.getByText('Unsaved changes')).toBeVisible();
+			},
+			nameInput: () => page.getByTestId('role-name-input'),
+			cancel: async () => {
+				await page.getByTestId('cancel-button').click();
+			},
+			save: async () => {
+				await page.getByTestId('save-button').click();
+			},
+			discardDialog: () => page.getByTestId('discard-changes-dialog'),
+			settings: () => page.getByTestId('roles-settings'),
+			removeByName: async (names) => {
+				const headers = { Authorization: `Bearer ${await authToken(page)}` };
+				const res = await page.request.get('/api/v1/roles', { headers });
+				const { data } = (await res.json()) as {
+					data: { id: string; name: string }[];
+				};
+				await Promise.all(
+					data
+						.filter((role) => names.includes(role.name))
+						.map((role) =>
+							page.request.delete(`/api/v1/roles/${role.id}`, { headers }),
+						),
+				);
+			},
+		},
+	};
+
+	return routing;
+}
+
+// The seeder serves inserts on one ClickHouse session, so parallel workers
+// collide with a transient `500 concurrent queries within the same session`.
+const SEED_RETRY_MS = 120_000;
+const SEED_TIMEOUT_MS = 180_000;
+
+async function seedWithRetry(seed: () => Promise<void>): Promise<void> {
+	await expect(seed).toPass({
+		timeout: SEED_RETRY_MS,
+		intervals: [1_000, 2_000, 5_000],
+	});
+}
+
+const withRouting = driver('routing', ({ page }) => routingDriver(page));
+
+const withDashboard = seeded(
+	'dashboard',
+	async ({ page }) => {
+		const title = `routing-${uniqueSuffix()}`;
+		const id = await createDashboardViaApi(page, title);
+		return { id, title, path: `${PATH.dashboards}/${id}` };
+	},
+	async ({ page, value }) =>
+		deleteDashboardViaApi(page.request, value.id, await authToken(page)),
+);
+
+const withTrace = seeded(
+	'largeTrace',
+	async ({ page }) => {
+		const trace = loadLargeTrace();
+		await seedWithRetry(() => seedTracesViaSeeder(page.request, trace.spans));
+		return trace;
+	},
+	undefined,
+	{ timeout: SEED_TIMEOUT_MS },
+);
+
+// Group-by options come from `/fields/keys` over the queried window, so the
+// select stays empty until pod metrics exist inside it.
+const withPods = seeded(
+	'pods',
+	async ({ page }) => {
+		await seedWithRetry(() => seedPodMetricsViaSeeder(page));
+		return { groupBy: NAMESPACE_ATTR };
+	},
+	undefined,
+	{ timeout: SEED_TIMEOUT_MS },
+);
+
+export const test = withPods(
+	withTrace(withDashboard(withRouting(kit))),
+).extend<{
+	/** The routing driver on an unauthenticated page. */
+	guest: Routing;
+}>({
+	guest: async ({ browser }, use) => {
+		const ctx = await browser.newContext();
+		await use(routingDriver(await ctx.newPage()));
+		await ctx.close();
+	},
+});
+
+export { expect, onAdminPage } from './kit';

tests/e2e/fixtures/auth.ts

@@ -1,27 +1,42 @@
 import { test as base, expect, type Page } from '@playwright/test';
 
 import { ADMIN, storageStateFor, type User } from '../helpers/auth';
+import { installBasePathMode } from '../helpers/base-path';
 
 // The login flow and the per-worker session cache live in `helpers/auth.ts` so
 // worker-scoped fixtures and suite hooks share one login with this fixture.
 export { ADMIN };
 export type { User };
 
-export const test = base.extend<{
-	/**
-	 * User identity for this test. Override with `test.use({ user: ... })` at
-	 * the describe or test level to run the suite as a different user.
-	 * Defaults to ADMIN (the pytest-bootstrap-seeded admin).
-	 */
-	user: User;
+export const test = base.extend<
+	{
+		/**
+		 * User identity for this test. Override with `test.use({ user: ... })` at
+		 * the describe or test level to run the suite as a different user.
+		 * Defaults to ADMIN (the pytest-bootstrap-seeded admin).
+		 */
+		user: User;
+
+		/**
+		 * A Page whose context is already authenticated as `user`. First request
+		 * for a given user triggers one login per worker; the resulting
+		 * storageState is held in memory and reused for all later requests.
+		 */
+		authedPage: Page;
+	},
+	{
+		/** Applies SIGNOZ_E2E_BASE_PATH before any page or login in the worker. */
+		basePathMode: void;
+	}
+>({
+	basePathMode: [
+		async ({ browser }, use) => {
+			await installBasePathMode(browser);
+			await use();
+		},
+		{ scope: 'worker', auto: true },
+	],
 
-	/**
-	 * A Page whose context is already authenticated as `user`. First request
-	 * for a given user triggers one login per worker; the resulting
-	 * storageState is held in memory and reused for all later requests.
-	 */
-	authedPage: Page;
-}>({
 	user: [ADMIN, { option: true }],
 
 	authedPage: async ({ browser, user }, use) => {

tests/e2e/helpers/alerts/navigation.ts

@@ -72,6 +72,7 @@ export async function gotoAlertList(
 	await page.goto(`${ALERTS_LIST_PATH}?${query.toString()}`);
 	await expect(page.getByTestId('list-alerts-search-input')).toBeVisible();
 	if (expectRows) {
-		await expect(alertRuleRows(page).first()).toBeVisible();
+		// Skeleton rows are empty and ignore clicks; wait for a loaded one.
+		await expect(alertRuleRows(page).first()).toHaveText(/\S/);
 	}
 }

tests/e2e/helpers/auth.ts

@@ -1,5 +1,7 @@
 import type { Browser, BrowserContext, Page } from '@playwright/test';
 
+import { storageKey } from './base-path';
+
 export type User = { email: string; password: string };
 
 /** Default user — admin from the pytest bootstrap (.env.local) or staging .env. */
@@ -57,7 +59,8 @@ async function login(page: Page, user: User): Promise<void> {
 async function pinSidenav(page: Page): Promise<void> {
 	const token = await page.evaluate(
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		() => (globalThis as any).localStorage.getItem('AUTH_TOKEN') || '',
+		(key) => (globalThis as any).localStorage.getItem(key) || '',
+		storageKey('AUTH_TOKEN'),
 	);
 	const res = await page.request.put('/api/v1/user/preferences/sidenav_pinned', {
 		data: { value: true },

tests/e2e/helpers/base-path.ts

@@ -0,0 +1,105 @@
+import type { APIRequestContext, Browser, Page } from '@playwright/test';
+
+// Base path mode: with SIGNOZ_E2E_BASE_PATH set (`pnpm env:start:base-path`
+// writes `/signoz`), specs run unchanged against SigNoz served under that URL
+// prefix. `page.goto`, `page.waitForURL` string targets and `request.*` take
+// app paths and get the prefix; `page.url()` and `waitForURL` predicates see
+// the URL without it. `expect(page).toHaveURL` still sees the real URL.
+
+export const BASE_PATH = (process.env.SIGNOZ_E2E_BASE_PATH ?? '').replace(
+	/\/$/,
+	'',
+);
+
+/** The app scopes its localStorage keys to the base path (`utils/storage.ts`). */
+export function storageKey(key: string): string {
+	return BASE_PATH ? `${BASE_PATH}/${key}` : key;
+}
+
+function toServedPath(path: string): string {
+	return path.startsWith('/') && !path.startsWith('//')
+		? `${BASE_PATH}${path}`
+		: path;
+}
+
+function toAppUrl(href: string): string {
+	const url = new URL(href);
+	if (url.pathname === BASE_PATH || url.pathname.startsWith(`${BASE_PATH}/`)) {
+		url.pathname = url.pathname.slice(BASE_PATH.length) || '/';
+	}
+	return url.toString();
+}
+
+function patchMethod<T extends object, K extends keyof T>(
+	proto: T,
+	name: K,
+	wrap: (original: T[K]) => T[K],
+): void {
+	proto[name] = wrap(proto[name]);
+}
+
+let installed = false;
+
+/**
+ * Patches the Page and APIRequestContext prototypes once per worker. Playwright
+ * exports neither class, so the prototypes come from a throwaway page.
+ */
+export async function installBasePathMode(browser: Browser): Promise<void> {
+	if (!BASE_PATH || installed) {
+		return;
+	}
+	installed = true;
+
+	const context = await browser.newContext();
+	const page = await context.newPage();
+	const pageProto: Page = Object.getPrototypeOf(page);
+	const requestProto: APIRequestContext = Object.getPrototypeOf(page.request);
+	await context.close();
+
+	patchMethod(
+		pageProto,
+		'goto',
+		(goto) =>
+			function (this: Page, target, options) {
+				return goto.call(this, toServedPath(target), options);
+			},
+	);
+
+	patchMethod(
+		pageProto,
+		'url',
+		(url) =>
+			function (this: Page) {
+				return toAppUrl(url.call(this));
+			},
+	);
+
+	patchMethod(
+		pageProto,
+		'waitForURL',
+		(waitForURL) =>
+			function (this: Page, matcher, options) {
+				let appMatcher = matcher;
+				if (typeof matcher === 'function') {
+					appMatcher = (current: URL): boolean =>
+						matcher(new URL(toAppUrl(current.href)));
+				} else if (typeof matcher === 'string') {
+					appMatcher = toServedPath(matcher);
+				}
+				return waitForURL.call(this, appMatcher, options);
+			},
+	);
+
+	patchMethod(
+		requestProto,
+		'fetch',
+		(fetch) =>
+			function (this: APIRequestContext, target, options) {
+				return fetch.call(
+					this,
+					typeof target === 'string' ? toServedPath(target) : target,
+					options,
+				);
+			},
+	);
+}

tests/e2e/helpers/common.ts

@@ -1,5 +1,7 @@
 import type { Page, Request } from '@playwright/test';
 
+import { storageKey } from './base-path';
+
 // Shared helpers used across feature-specific helper modules (dashboards,
 // trace-details, …). Keep this to genuinely cross-feature utilities.
 
@@ -45,6 +47,8 @@ const HARNESS_CONSOLE_NOISE = [
 	'Request failed with status code 404',
 	'client never received a response, or request never left',
 	'ErrorResponseHandler: unclassified error',
+	// Google Fonts, which the chromium project fails at DNS (playwright.config.ts).
+	'Failed to load resource: net::ERR_NAME_NOT_RESOLVED',
 ];
 
 export interface ConsoleWatch {
@@ -130,7 +134,9 @@ export function requestUrl(request: Request): URL {
 export async function authToken(page: Page): Promise<string> {
 	const state = await page.context().storageState();
 	for (const origin of state.origins) {
-		const entry = origin.localStorage.find((e) => e.name === 'AUTH_TOKEN');
+		const entry = origin.localStorage.find(
+			(e) => e.name === storageKey('AUTH_TOKEN'),
+		);
 		if (entry) {
 			return entry.value;
 		}

tests/e2e/helpers/dashboards.ts

@@ -11,6 +11,8 @@ import apmMetricsTemplate from '../testdata/apm-metrics.json';
 import chartDataTemplate from '../testdata/chart-data-dashboard.json';
 import variablesTemplate from '../testdata/variables-dashboard.json';
 
+import { storageKey } from './base-path';
+
 // ─── Constants ───────────────────────────────────────────────────────────
 //
 // UI strings and well-known values referenced both within this file and by
@@ -45,7 +47,8 @@ export async function authToken(page: Page): Promise<string> {
 	}
 	return page.evaluate(
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		() => (globalThis as any).localStorage.getItem('AUTH_TOKEN') || '',
+		(key) => (globalThis as any).localStorage.getItem(key) || '',
+		storageKey('AUTH_TOKEN'),
 	);
 }
 
@@ -82,12 +85,39 @@ async function postDashboard(
 	return json.data.id;
 }
 
-/** Seed a minimally-named dashboard via API. Returns the new ID. */
+/**
+ * Seed a minimally-named dashboard via API. Returns the new ID.
+ *
+ * v2 (Perses spec) only: `POST /api/v1/dashboards` now answers 501
+ * `dashboard_deprecated`. Payload mirrors what the New-dashboard modal sends
+ * (`BlankDashboardPanel.tsx`), `schemaVersion` included.
+ */
 export async function createDashboardViaApi(
 	page: Page,
 	title: string,
 ): Promise<string> {
-	return postDashboard(page, { title, uploadedGrafana: false });
+	const token = await authToken(page);
+	const res = await page.request.post('/api/v2/dashboards', {
+		data: {
+			schemaVersion: 'v6',
+			generateName: true,
+			tags: null,
+			spec: {
+				display: { name: title },
+				layouts: [],
+				panels: {},
+				variables: [],
+			},
+		},
+		headers: { Authorization: `Bearer ${token}` },
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`POST /api/v2/dashboards ${res.status()}: ${await res.text()}`,
+		);
+	}
+	const json = (await res.json()) as { data: { id: string } };
+	return json.data.id;
 }
 
 /**
@@ -342,7 +372,7 @@ export async function deleteDashboardViaApi(
 	token: string,
 ): Promise<void> {
 	await request
-		.delete(`/api/v1/dashboards/${id}`, {
+		.delete(`/api/v2/dashboards/${id}`, {
 			headers: { Authorization: `Bearer ${token}` },
 		})
 		.catch(() => undefined);

tests/e2e/helpers/infra-monitoring.ts

@@ -0,0 +1,110 @@
+import type { Page } from '@playwright/test';
+
+import { seederUrl } from './common';
+
+// Seeding for the Kubernetes lists under /infrastructure-monitoring.
+
+/**
+ * The metric the pods list queries. Its rows are what put the pod resource
+ * attributes into `/fields/keys`, which is where the group-by select gets its
+ * options, so this is the metric to seed, not an arbitrary one.
+ *
+ * Dotted, not `k8s_pod_cpu_usage`: the list passes this name straight through as
+ * `metricNamespace` and the backend matches it literally, so the underscored
+ * spelling returns an empty key set and the group-by select renders "No data".
+ */
+const POD_CPU_METRIC = 'k8s.pod.cpu.usage';
+const POD_MEMORY_METRIC = 'k8s.pod.memory.usage';
+
+const NAMESPACES = ['default', 'kube-system', 'signoz'];
+const PODS_PER_NAMESPACE = 2;
+const POINTS_PER_POD = 4;
+const POINT_INTERVAL_MS = 60_000;
+
+type SeededMetric = {
+	metric_name: string;
+	timestamp: string;
+	value: number;
+	type_: string;
+	temporality: string;
+	is_monotonic: boolean;
+	unit: string;
+	resource_attrs: Record<string, string>;
+	labels: Record<string, string>;
+};
+
+function podResourceAttrs(
+	namespace: string,
+	pod: string,
+): Record<string, string> {
+	return {
+		'k8s.cluster.name': 'e2e-cluster',
+		'k8s.namespace.name': namespace,
+		'k8s.node.name': `node-${namespace}`,
+		'k8s.pod.name': pod,
+		'k8s.pod.uid': `${namespace}-${pod}`,
+	};
+}
+
+function podPoints(now: number): SeededMetric[] {
+	const points: SeededMetric[] = [];
+	for (const namespace of NAMESPACES) {
+		for (let p = 0; p < PODS_PER_NAMESPACE; p += 1) {
+			const pod = `${namespace}-pod-${p}`;
+			const resourceAttrs = podResourceAttrs(namespace, pod);
+			for (let i = 0; i < POINTS_PER_POD; i += 1) {
+				const timestamp = new Date(
+					now - (POINTS_PER_POD - i) * POINT_INTERVAL_MS,
+				).toISOString();
+				points.push({
+					metric_name: POD_CPU_METRIC,
+					timestamp,
+					value: 0.1 + i * 0.05,
+					type_: 'Gauge',
+					temporality: 'Unspecified',
+					is_monotonic: false,
+					unit: '1',
+					resource_attrs: resourceAttrs,
+					labels: resourceAttrs,
+				});
+				points.push({
+					metric_name: POD_MEMORY_METRIC,
+					timestamp,
+					value: 100_000_000 + i * 1_000_000,
+					type_: 'Gauge',
+					temporality: 'Unspecified',
+					is_monotonic: false,
+					unit: 'By',
+					resource_attrs: resourceAttrs,
+					labels: resourceAttrs,
+				});
+			}
+		}
+	}
+	return points;
+}
+
+/**
+ * Seed pod metrics so the k8s list has rows and its group-by select has
+ * options. Both matter: with no rows inside the queried window the select
+ * renders empty and every `setK8sGroupBy` call times out.
+ *
+ * The pod keys go in `labels` as well as `resource_attrs`: the list's queries
+ * reference some of them as `tag` and others as `resource`, and the series
+ * fingerprint is computed off labels alone. With an empty label map all six
+ * pods collapse into one series and the list comes back empty.
+ *
+ * Wrap the call in `seedWithRetry`: the seeder serves inserts on one
+ * ClickHouse session, so parallel workers collide with a transient 500.
+ */
+export async function seedPodMetricsViaSeeder(page: Page): Promise<void> {
+	const res = await page.request.post(`${seederUrl()}/telemetry/metrics`, {
+		data: podPoints(Date.now()),
+		headers: { 'Content-Type': 'application/json' },
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`seeder POST /telemetry/metrics ${res.status()}: ${await res.text()}`,
+		);
+	}
+}

tests/e2e/helpers/quick-filters.ts

@@ -6,6 +6,7 @@ export const LOGS_EXPLORER_PATH = '/logs/logs-explorer';
 
 const SETTINGS_PANEL_TITLE = 'Edit quick filters';
 const SETTINGS_ICON_TEST_ID = 'settings-icon';
+const SETTINGS_CLOSE_TEST_ID = 'quick-filters-settings-close';
 const ANNOUNCEMENT_DISMISSED_KEY = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT';
 /**
  * Conservative lower bound for the open panel width. The panel is 342px in
@@ -127,7 +128,7 @@ export async function assertQuickFiltersSettingsDrawerOpen(
 	await expect(panel).not.toHaveClass(/hidden/);
 	await expect(page.getByText(SETTINGS_PANEL_TITLE)).toBeVisible();
 	await expect(page.getByPlaceholder('Search for a filter...')).toBeVisible();
-	await expect(panel.locator('.qf-header-icon')).toBeVisible();
+	await expect(panel.getByTestId(SETTINGS_CLOSE_TEST_ID)).toBeVisible();
 
 	const addedList = panel.locator('.qf-added-filters-list');
 	await expect(panel.getByText('ADDED FILTERS')).toBeVisible();
@@ -161,6 +162,6 @@ export async function assertQuickFiltersSettingsDrawerOpen(
 export async function closeQuickFiltersSettingsPanel(
 	page: Page,
 ): Promise<void> {
-	await settingsPanel(page).locator('.qf-header-icon').click();
+	await settingsPanel(page).getByTestId(SETTINGS_CLOSE_TEST_ID).click();
 	await assertQuickFiltersSettingsDrawerClosed(page);
 }

tests/e2e/package.json

@@ -7,6 +7,8 @@
     "preinstall": "npx only-allow pnpm",
     "env:start": "cd .. && uv run pytest --basetemp=./tmp/ -vv --reuse --rebuild --capture=no --with-web e2e/bootstrap/setup.py::test_setup",
     "env:stop": "cd .. && uv run pytest --basetemp=./tmp/ -vv --teardown --capture=no e2e/bootstrap/setup.py::test_teardown",
+    "env:start:base-path": "cd .. && uv run pytest --basetemp=./tmp/ -vv --reuse --rebuild --capture=no --with-web e2e/bootstrap/basepath/setup.py::test_setup",
+    "env:stop:base-path": "cd .. && uv run pytest --basetemp=./tmp/ -vv --teardown --capture=no e2e/bootstrap/basepath/setup.py::test_teardown",
     "env:clean": "rm -rf ../tmp ../.pytest_cache .env.local artifacts && echo 'Cleaned. Run docker container prune if needed.'",
     "test": "playwright test",
     "test:local": "pnpm env:start && pnpm test",

tests/e2e/playwright.config.ts

@@ -108,7 +108,15 @@ export default defineConfig({
 		},
 		{
 			name: 'chromium',
-			use: devices['Desktop Chrome'],
+			use: {
+				...devices['Desktop Chrome'],
+				launchOptions: {
+					// Google Fonts CSS blocks the app script and `load` until it settles,
+					// so a stalled request blanks the page. Failing DNS settles it at once;
+					// a `route` would too, but routing turns off the HTTP cache.
+					args: ['--host-resolver-rules=MAP fonts.googleapis.com ~NOTFOUND'],
+				},
+			},
 			dependencies: ['setup'],
 		},
 		{

tests/e2e/tests/alerts/create/v2.spec.ts

@@ -26,6 +26,7 @@ import {
 	v2SaveTooltip,
 	v2TestButton,
 } from '../../../helpers/alert-forms/v2';
+import { BASE_PATH } from '../../../helpers/base-path';
 
 // CV2-* — the v2 create builder.
 //
@@ -446,7 +447,7 @@ test.describe('Alert create — v2 builder', () => {
 		await ownedRules.register(response);
 
 		expect(response.status()).toBe(201);
-		expect(new URL(response.url()).pathname).toBe('/api/v2/rules');
+		expect(new URL(response.url()).pathname).toBe(`${BASE_PATH}/api/v2/rules`);
 
 		const body = response.request().postDataJSON();
 		expect(body.schemaVersion).toBe('v2alpha1');

tests/e2e/tests/alerts/details/chrome.spec.ts

@@ -15,7 +15,8 @@ test.describe('Alert details — page chrome', () => {
 		await page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
 
 		await gotoAlertHistory(page, alertHistory.ruleId);
-		const expected = page.url();
+		// The served URL: base path mode strips the prefix from `page.url()`.
+		const expected = page.mainFrame().url();
 
 		await page.getByRole('button', { name: 'Copy link' }).click();
 		await expect(page.getByText('Copied')).toBeVisible();

tests/e2e/tests/alerts/page.spec.ts

@@ -27,7 +27,8 @@ test.describe('Alerts page shell', () => {
 		await page.goto(ALERTS_LIST_PATH);
 
 		// No `tab` param at all — `getActiveKey()` falls back to AlertRules.
-		await expect(page).toHaveURL(ALERTS_LIST_PATH);
+		await expect(page).toHaveURL(new RegExp(`${ALERTS_LIST_PATH}(\\?|$)`));
+		await expect(page).not.toHaveURL(/[?&]tab=/);
 		await expect(
 			page.getByRole('tab', { name: TAB_NAMES.rules }),
 		).toHaveAttribute('aria-selected', 'true');

tests/e2e/tests/routing/guards.spec.ts

@@ -0,0 +1,45 @@
+import { expect, PATH, test } from '../../drivers/routing';
+
+// `<Redirect>` replaces the history entry and v7's `<Navigate>` pushes unless
+// told otherwise, which only shows when someone presses Back. Runs as `guest`:
+// an authenticated page would skip the chain under test.
+
+test.describe('Routing — auth guards', () => {
+	test('TC-14 a deep-linked private route survives the login round trip', async ({
+		guest,
+	}) => {
+		await guest.goto(PATH.services);
+		await guest.waitForPath(PATH.login);
+
+		await guest.login();
+
+		// Private.tsx stashed the requested path and redirects back to it.
+		await guest.waitForPath(PATH.services);
+		expect(guest.url().pathname).toBe(PATH.services);
+	});
+
+	test('TC-15 the login redirects replace, so Back does not re-run the chain', async ({
+		guest,
+	}) => {
+		const depthBeforeGoto = await guest.historyDepth();
+
+		await guest.goto(PATH.services);
+		await guest.waitForPath(PATH.login);
+
+		// A pushing redirect would read one higher.
+		const depthAtLogin = await guest.historyDepth();
+		expect(depthAtLogin).toBe(depthBeforeGoto + 1);
+
+		await guest.login();
+		await guest.waitForPath(PATH.services);
+		expect(await guest.historyDepth()).toBe(depthAtLogin + 1);
+
+		// Back reaches the replaced /login entry, where being logged in redirects
+		// straight out again.
+		await guest.goBack();
+		await expect
+			.poll(() => guest.url().pathname, { timeout: 15_000 })
+			.not.toBe(PATH.login);
+		expect(guest.url().pathname).toBe(PATH.services);
+	});
+});

tests/e2e/tests/routing/mount.spec.ts

@@ -0,0 +1,49 @@
+import { expect, PATH, test } from '../../drivers/routing';
+
+// The shape of the router mount, which no other spec observes.
+
+test.describe('Routing: router mount', () => {
+	// Under a React transition the previous screen stays up instead of the
+	// Suspense fallback, so an uncached route renders no loader at all.
+	test('TC-18 an in-app navigation to an uncached route commits the Suspense fallback', async ({
+		authedPage: page,
+		routing,
+	}) => {
+		await routing.dashboards.gotoList();
+
+		await routing.whileScriptsHeld(async () => {
+			await routing.sidebarItem('Alerts').click();
+			await routing.waitForPath(PATH.alerts);
+
+			await expect(routing.dashboards.landmark()).toBeHidden();
+			await expect(
+				page.getByRole('img', { name: 'loading' }).first(),
+			).toBeVisible();
+		});
+
+		await expect(
+			page
+				.getByRole('heading', { name: 'Alert Rules' })
+				.or(page.getByTestId('list-alerts-search-input')),
+		).toBeVisible();
+	});
+
+	// nuqs' react-router adapter needs a router above it; the wrong order throws
+	// on the first page that reads a nuqs param.
+	test('TC-19 a page with nuqs params mounts with no router-context error', async ({
+		authedPage: page,
+		routing,
+	}) => {
+		const reported: string[] = [];
+		page.on('pageerror', (error) => reported.push(error.message));
+		page.on('console', (message) => reported.push(message.text()));
+
+		await routing.k8s.goto({ relativeTime: '30m' });
+
+		expect(
+			reported.filter((text) =>
+				/useNavigate|useSearchParams|context of a <Router>/i.test(text),
+			),
+		).toEqual([]);
+	});
+});

tests/e2e/tests/routing/nav-blocker.spec.ts

@@ -0,0 +1,62 @@
+import {
+	expect,
+	onAdminPage,
+	PATH,
+	routingDriver,
+	test,
+	uniqueAlphaSuffix,
+} from '../../drivers/routing';
+
+// `/settings/roles/new` is the only `useNavigationBlocker` consumer, so this is
+// the whole observable surface of the blocker protocol.
+
+// Both tests drive the create form; keep them off each other's role names.
+test.describe.configure({ mode: 'serial' });
+
+const BLOCKED_ROLE_NAME = `routing-blocker-${uniqueAlphaSuffix()}`;
+const SAVED_ROLE_NAME = `routing-bypass-${uniqueAlphaSuffix()}`;
+
+test.describe('Routing — unsaved-changes navigation blocker', () => {
+	test.afterAll(async ({ browser }) => {
+		await onAdminPage(browser, (page) =>
+			routingDriver(page).roles.removeByName([BLOCKED_ROLE_NAME, SAVED_ROLE_NAME]),
+		);
+	});
+
+	test('TC-16 a blocked navigation can be cancelled and then confirmed', async ({
+		routing,
+	}) => {
+		const { roles } = routing;
+		await roles.openCreateForm(BLOCKED_ROLE_NAME);
+
+		await roles.cancel();
+		await expect(roles.discardDialog()).toBeVisible();
+
+		// Cancel drops the blocked transition rather than retrying it.
+		await roles
+			.discardDialog()
+			.getByRole('button', { name: 'Keep editing' })
+			.click();
+		await expect(roles.discardDialog()).toBeHidden();
+		expect(routing.url().pathname).toBe(PATH.roleCreate);
+		await expect(roles.nameInput()).toHaveValue(BLOCKED_ROLE_NAME);
+
+		await roles.cancel();
+		await roles.discardDialog().getByRole('button', { name: 'Discard' }).click();
+		await routing.waitForPath(PATH.roles);
+	});
+
+	test('TC-17 saving bypasses the blocker for the next navigation', async ({
+		routing,
+	}) => {
+		const { roles } = routing;
+		await roles.openCreateForm(SAVED_ROLE_NAME);
+
+		// `allowNextNavigation()` unarms the blocker for the push after a save.
+		await roles.save();
+		await routing.waitForPath(PATH.roles);
+
+		await expect(roles.discardDialog()).toHaveCount(0);
+		await expect(roles.settings()).toBeVisible();
+	});
+});

tests/e2e/tests/routing/navigation.spec.ts

@@ -0,0 +1,87 @@
+import { dashboardListParams, expect, PATH, test } from '../../drivers/routing';
+
+// Imperative navigation: the `history.listen` counter behind `hasInAppHistory()`,
+// `useSafeNavigate`'s same-url suppression, and its `newTab` branch.
+
+test.describe('Routing — imperative navigation', () => {
+	test('TC-05 Back from a detail page restores the list with its params', async ({
+		routing,
+		dashboard,
+	}) => {
+		await routing.dashboards.gotoList(dashboard.title);
+		await routing.dashboards.row(dashboard.title).click();
+		await routing.waitForPath(dashboard.path);
+
+		await routing.goBackTo(PATH.dashboards);
+
+		expect(routing.params()).toMatchObject(dashboardListParams(dashboard.title));
+	});
+
+	// Both branches of the trace header's Back button in one document:
+	// `hasInAppHistory() ? goBack() : push(TRACES_EXPLORER)`.
+	test('TC-06 the trace-details previous button pushes when deep-linked and pops once in-app', async ({
+		routing,
+		largeTrace: trace,
+	}) => {
+		await routing.goto(PATH.services);
+		await routing.trace.goto(trace);
+
+		// The document load reset the counter, so Back pushes the explorer.
+		const depthBeforePush = await routing.historyDepth();
+		await routing.trace.back();
+		await routing.waitForPath(PATH.tracesExplorer);
+		expect(routing.url().searchParams.has('selectedExplorerView')).toBe(false);
+		expect(await routing.historyDepth()).toBe(depthBeforePush + 1);
+
+		// That push is in-app history, so after a POP back Back pops too.
+		await routing.goBackTo(routing.trace.path(trace));
+		await expect(routing.trace.rootRow(trace)).toBeVisible();
+
+		const depthBeforePop = await routing.historyDepth();
+		await routing.trace.back();
+		await routing.waitForPath(PATH.services);
+		expect(await routing.historyDepth()).toBe(depthBeforePop);
+	});
+
+	test('TC-07 re-selecting the current relative time adds no history entry', async ({
+		routing,
+	}) => {
+		test.slow();
+
+		await routing.k8s.goto({ relativeTime: '30m' });
+		await routing.expectRelativeTime('30m');
+		const before = routing.params();
+		const depthBefore = await routing.historyDepth();
+
+		await routing.selectRelativeTime('30m');
+
+		// `areUrlsEffectivelySame` ignores the regenerated compositeQuery `id`. Not
+		// followed by "one Back leaves the page": the k8s list pushes its own
+		// compositeQuery rewrite on mount.
+		expect(await routing.historyDepth()).toBe(depthBefore);
+		expect(routing.url().pathname).toBe(PATH.k8s);
+		expect(routing.params()).toMatchObject({
+			relativeTime: '30m',
+			category: before.category,
+		});
+		await routing.expectRelativeTime('30m');
+	});
+
+	test('TC-08 modifier-clicking an in-app link opens the same url in a new tab', async ({
+		routing,
+		dashboard,
+	}) => {
+		await routing.dashboards.gotoList(dashboard.title);
+
+		await routing.inNewTab(
+			routing.dashboards.row(dashboard.title),
+			async (tab) => {
+				expect(tab.url().pathname).toBe(dashboard.path);
+				await expect(tab.dashboards.title()).toHaveText(dashboard.title);
+			},
+		);
+
+		expect(routing.url().pathname).toBe(PATH.dashboards);
+		expect(routing.params()).toMatchObject(dashboardListParams(dashboard.title));
+	});
+});

tests/e2e/tests/routing/route-matching.spec.ts

@@ -0,0 +1,84 @@
+import { expect, PATH, test } from '../../drivers/routing';
+
+// Every place a `matchPath` / `generatePath` call decides what renders:
+// `RouteTab`, `TopNav`'s per-route checks, and `SETTINGS`, a prefix route that
+// needs an explicit `/*` under v7.
+
+test.describe('Routing — route matching', () => {
+	test('TC-09 RouteTab switches the url and survives a reload', async ({
+		routing,
+	}) => {
+		await routing.goto(PATH.metricsSummary);
+		await expect(routing.activeRouteTab(PATH.metricsSummary)).toBeVisible();
+
+		await routing.routeTab(PATH.metricsViews).click();
+		await routing.waitForPath(PATH.metricsViews);
+		await expect(routing.activeRouteTab(PATH.metricsViews)).toBeVisible();
+
+		await routing.reload();
+		expect(routing.url().pathname).toBe(PATH.metricsViews);
+		await expect(routing.activeRouteTab(PATH.metricsViews)).toBeVisible();
+	});
+
+	test('TC-10 a prefix-route deep link loads with the right tab selected', async ({
+		authedPage: page,
+		routing,
+	}) => {
+		await routing.goto(PATH.roles);
+
+		expect(routing.url().pathname).toBe(PATH.roles);
+		await expect(page.getByTestId('settings-page-sidenav')).toBeVisible();
+		await expect(page.getByTestId('roles')).toHaveClass(/active/);
+		await expect(routing.roles.settings()).toBeVisible();
+	});
+
+	test('TC-11 a seeded dashboard id round-trips byte-identical', async ({
+		routing,
+		dashboard,
+	}) => {
+		await routing.dashboards.gotoList(dashboard.title);
+		await routing.dashboards.row(dashboard.title).click();
+
+		// Exact match: any re-encoding of the uuid fails here.
+		await routing.waitForPath(dashboard.path);
+		await expect(routing.dashboards.title()).toHaveText(dashboard.title);
+
+		await routing.reload();
+		expect(routing.url().pathname).toBe(dashboard.path);
+		await expect(routing.dashboards.title()).toHaveText(dashboard.title);
+	});
+
+	test('TC-12 the global time picker renders only where matchPath allows it', async ({
+		routing,
+	}) => {
+		await routing.goto(`${PATH.services}?relativeTime=30m`);
+		await expect(routing.globalTimePicker()).toBeVisible();
+
+		// LOGS_EXPLORER is in `routesToDisable`.
+		await routing.gotoLogsExplorer();
+		await expect(routing.globalTimePicker()).toHaveCount(0);
+
+		// ROLES_SETTINGS is in `routesToSkip`.
+		await routing.goto(PATH.roles);
+		await expect(routing.roles.settings()).toBeVisible();
+		await expect(routing.globalTimePicker()).toHaveCount(0);
+	});
+
+	// `PrivateRoute` redirects a logged-in user on an unknown path to HOME before
+	// the catch-all runs, so `NotFound` is unreachable while authenticated.
+	test('TC-13 an unknown path redirects home and replaces its history entry', async ({
+		authedPage: page,
+		routing,
+	}) => {
+		await routing.dashboards.gotoList();
+		const depthBefore = await routing.historyDepth();
+
+		await routing.goto(PATH.unknown);
+		await routing.waitForPath(PATH.home);
+		await expect(page.getByTestId('not-found')).toHaveCount(0);
+
+		// The redirect replaced the entry, so one Back reaches the list.
+		expect(await routing.historyDepth()).toBe(depthBefore + 1);
+		await routing.goBackTo(PATH.dashboards);
+	});
+});

tests/e2e/tests/routing/url-state.spec.ts

@@ -0,0 +1,83 @@
+import { expect, PATH, test } from '../../drivers/routing';
+
+// The nuqs adapter swap. On the k8s list `groupBy` is written by nuqs straight
+// to the History API with `history: 'push'`, while `relativeTime` is written by
+// the router through `useSafeNavigate`.
+
+test.describe('Routing — nuqs and router param coexistence', () => {
+	test('TC-01 a router write keeps the nuqs params it did not author', async ({
+		routing,
+		pods,
+	}) => {
+		await routing.k8s.goto({ relativeTime: '30m' });
+
+		await routing.k8s.groupBy(pods.groupBy);
+		await routing.selectRelativeTime('1h');
+		await routing.waitForParam('relativeTime', '1h');
+
+		expect(routing.url().pathname).toBe(PATH.k8s);
+		expect(routing.params()).toMatchObject({
+			relativeTime: '1h',
+			category: 'pods',
+		});
+		expect(routing.params().groupBy).toContain(pods.groupBy);
+		await expect(routing.k8s.groupBySelect()).toContainText(pods.groupBy);
+	});
+
+	test('TC-02 a nuqs write keeps the relativeTime the router authored', async ({
+		routing,
+		pods,
+	}) => {
+		await routing.k8s.goto({ relativeTime: '30m' });
+
+		await routing.selectRelativeTime('6h');
+		await routing.waitForParam('relativeTime', '6h');
+
+		await routing.k8s.groupBy(pods.groupBy);
+
+		expect(routing.url().pathname).toBe(PATH.k8s);
+		expect(routing.params().relativeTime).toBe('6h');
+		expect(routing.params().groupBy).toContain(pods.groupBy);
+		await routing.expectRelativeTime('6h');
+	});
+
+	test('TC-03 POP across a nuqs push reverts both url and list', async ({
+		routing,
+		pods,
+	}) => {
+		await routing.k8s.goto({ relativeTime: '30m' });
+
+		// One flush, one entry: otherwise one Back lands on an intermediate url.
+		const depthBeforeGroupBy = await routing.historyDepth();
+		await routing.k8s.groupBy(pods.groupBy);
+		expect(await routing.historyDepth()).toBe(depthBeforeGroupBy + 1);
+		await expect(routing.k8s.groupBySelect()).toContainText(pods.groupBy);
+
+		await routing.goBack();
+		await routing.k8s.waitUntilGrouped(pods.groupBy, false);
+		expect(routing.url().pathname).toBe(PATH.k8s);
+		await expect(routing.k8s.groupBySelect()).not.toContainText(pods.groupBy);
+
+		await routing.goForward();
+		await routing.k8s.waitUntilGrouped(pods.groupBy);
+		await expect(routing.k8s.groupBySelect()).toContainText(pods.groupBy);
+	});
+
+	test('TC-04 a deep link carrying both families applies both on first paint', async ({
+		routing,
+		pods,
+	}) => {
+		await routing.k8s.goto({
+			relativeTime: '6h',
+			groupBy: JSON.stringify([pods.groupBy]),
+		});
+
+		// `k8s.goto` waited for the mount-time republish, so anything it dropped is
+		// missing by now.
+		expect(routing.url().pathname).toBe(PATH.k8s);
+		expect(routing.params().relativeTime).toBe('6h');
+		expect(routing.params().groupBy).toContain(pods.groupBy);
+		await routing.expectRelativeTime('6h');
+		await expect(routing.k8s.groupBySelect()).toContainText(pods.groupBy);
+	});
+});

tests/e2e/tsconfig.json

@@ -18,6 +18,6 @@
     "outDir": "./dist",
     "rootDir": "."
   },
-  "include": ["tests/**/*.ts", "helpers/**/*.ts", "fixtures/**/*.ts", "bootstrap/**/*.ts", "playwright.config.ts"],
+  "include": ["tests/**/*.ts", "drivers/**/*.ts", "helpers/**/*.ts", "fixtures/**/*.ts", "bootstrap/**/*.ts", "playwright.config.ts"],
   "exclude": ["node_modules", "dist"]
 }

tests/fixtures/auth.py

@@ -36,28 +36,6 @@ USERS_BASE = "/api/v2/users"
 USER_ROLES_BASE = "/api/v2/user_roles"
 
 
-def _login(signoz: types.SigNoz, email: str, password: str) -> str:
-    """Complete GET /sessions/context + POST /sessions/email_password; return accessToken."""
-    ctx = requests.get(
-        signoz.self.host_configs["8080"].get("/api/v2/sessions/context"),
-        params={
-            "email": email,
-            "ref": f"{signoz.self.host_configs['8080'].base()}",
-        },
-        timeout=5,
-    )
-    assert ctx.status_code == HTTPStatus.OK
-    org_id = ctx.json()["data"]["orgs"][0]["id"]
-
-    login = requests.post(
-        signoz.self.host_configs["8080"].get("/api/v2/sessions/email_password"),
-        json={"email": email, "password": password, "orgId": org_id},
-        timeout=5,
-    )
-    assert login.status_code == HTTPStatus.OK
-    return login.json()["data"]["accessToken"]
-
-
 def register_admin(
     signoz: types.SigNoz,
     request: pytest.FixtureRequest,
@@ -182,16 +160,14 @@ def get_tokens(signoz: types.SigNoz) -> Callable[[str, str], tuple[str, str]]:
     return tokens_getter(signoz)
 
 
-@pytest.fixture(name="apply_license", scope="package")
-def apply_license(
+def license_applier(
     signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument,redefined-outer-name
     request: pytest.FixtureRequest,
     pytestconfig: pytest.Config,
+    cache_key: str = "apply_license",
+    base_path: str = "",
 ) -> types.Operation:
-    """Stub Zeus license-lookup, then POST /api/v4/licenses so the BE flips
-    to ENTERPRISE. Package-scoped so an e2e bootstrap can pull it in and
-    every spec inherits the licensed state."""
+    """Apply the ENTERPRISE license and complete org onboarding, under base_path. Reuse-wrapped."""
 
     def create() -> types.Operation:
         Config.base_url = signoz.zeus.host_configs["8080"].get("/__admin")
@@ -224,12 +200,12 @@ def apply_license(
             )
         )
 
-        access_token = _login(signoz, USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+        access_token = token_getter(signoz, base_path)(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
 
         # 201 = applied, 409 = already applied. Retry transient failures —
         # the BE occasionally 5xxs right after startup before the license
         # sync goroutine is ready.
-        license_url = signoz.self.host_configs["8080"].get("/api/v4/licenses")
+        license_url = signoz.self.host_configs["8080"].get(f"{base_path}/api/v4/licenses")
         auth_header = {"Authorization": f"Bearer {access_token}"}
         for attempt in range(10):
             resp = requests.post(
@@ -248,7 +224,7 @@ def apply_license(
         # redirects first-time admins to a questionnaire. Mark the preference
         # complete so specs can navigate directly to the feature under test.
         pref_resp = requests.put(
-            signoz.self.host_configs["8080"].get("/api/v1/org/preferences/org_onboarding"),
+            signoz.self.host_configs["8080"].get(f"{base_path}/api/v1/org/preferences/org_onboarding"),
             json={"value": True},
             headers=auth_header,
             timeout=5,
@@ -265,7 +241,7 @@ def apply_license(
     return reuse.wrap(
         request,
         pytestconfig,
-        "apply_license",
+        cache_key,
         lambda: types.Operation(name=""),
         create,
         delete,
@@ -273,6 +249,19 @@ def apply_license(
     )
 
 
+@pytest.fixture(name="apply_license", scope="package")
+def apply_license(
+    signoz: types.SigNoz,
+    create_user_admin: types.Operation,  # pylint: disable=unused-argument,redefined-outer-name
+    request: pytest.FixtureRequest,
+    pytestconfig: pytest.Config,
+) -> types.Operation:
+    """Stub Zeus license-lookup, then POST /api/v4/licenses so the BE flips
+    to ENTERPRISE. Package-scoped so an e2e bootstrap can pull it in and
+    every spec inherits the licensed state."""
+    return license_applier(signoz, request, pytestconfig)
+
+
 # This is not a fixture purposefully, we just want to add a license to the signoz instance.
 # This is also idempotent in nature.
 def add_license(