Merge remote-tracking branch 'origin/main' into issue_577

#### Description

- Bar chart "Series layout" offered "Side by side", but unstacked bars
render overlapping at the same x. Renamed to "Overlap" with a matching
tile drawing and help text, consistent with the area chart's option.

Before
<img width="388" height="157" alt="image"
src="https://github.com/user-attachments/assets/0b9ecab4-ece8-472c-b924-66c053d2cdc9"
/>


After
<img width="420" height="184" alt="image"
src="https://github.com/user-attachments/assets/680c7bdc-0c49-4111-81f5-e0c633df6715"
/>


#### Issues closed by this PR

Closes SigNoz/pulse-pod#673

docs/api/openapi.yml

@@ -4224,6 +4224,13 @@ components:
           nullable: true
           type: number
       type: object
+    DashboardtypesAxisScale:
+      enum:
+      - auto
+      - linear
+      - log
+      - symlog
+      type: string
     DashboardtypesBarChartPanelSpec:
       properties:
         axes:
@@ -5250,6 +5257,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'
@@ -5265,6 +5273,7 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -5278,6 +5287,7 @@ components:
       - signoz/ListPanel
       - signoz/TextPanel
       - signoz/HeatmapPanel
+      - signoz/ScatterPlotPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
       properties:
@@ -5384,6 +5394,21 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec:
+      properties:
+        kind:
+          description: The panel kind.
+          enum:
+          - signoz/ScatterPlotPanel
+          type: string
+        spec:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotPanelSpec'
+          description: The options for this panel kind. {} accepts every default.
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec:
       properties:
         kind:
@@ -5494,6 +5519,16 @@ components:
           - $ref: '#/components/schemas/DashboardtypesBasicVisualization'
           description: The time range the slices are computed over.
       type: object
+    DashboardtypesPointDiameter:
+      maximum: 40
+      minimum: 2
+      nullable: true
+      type: integer
+    DashboardtypesPointOpacity:
+      maximum: 1
+      minimum: 0.1
+      nullable: true
+      type: number
     DashboardtypesPostableDashboardV2:
       properties:
         generateName:
@@ -5748,6 +5783,161 @@ components:
       required:
       - queryValue
       type: object
+    DashboardtypesScatterPlotAxes:
+      properties:
+        x:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+          description: The axis dimensions.x is plotted along.
+        "y":
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+          description: The axis dimensions.y is plotted along.
+      type: object
+    DashboardtypesScatterPlotAxis:
+      properties:
+        label:
+          description: Axis title. Empty draws none; the tooltip still names the column.
+          type: string
+        scale:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesAxisScale'
+          description: auto (default) uses log, or symlog when values include zero
+            or negatives, when that spreads the dots clearly more than linear does;
+            otherwise linear. log cannot place a value at or below zero and leaves
+            that dot out; symlog is log-like but places it.
+        softMax:
+          description: The highest value the axis always shows; data above it still
+            extends the axis, as does a threshold on it. Null fits the data.
+          nullable: true
+          type: number
+        softMin:
+          description: The lowest value the axis always shows; data below it still
+            extends the axis, as does a threshold on it. Null fits the data. A log
+            axis ignores a bound at or below zero.
+          nullable: true
+          type: number
+      type: object
+    DashboardtypesScatterPlotChartAppearance:
+      properties:
+        points:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotPoints'
+          description: Dot size and opacity.
+      type: object
+    DashboardtypesScatterPlotDimensions:
+      properties:
+        colorBy:
+          description: Group-by label names (e.g. k8s.namespace.name) whose combined
+            values color the dots and drive the legend. Empty colors by every group-by
+            label.
+          items:
+            type: string
+          nullable: true
+          type: array
+        sizeBy:
+          description: Value column key that scales each dot's area between chartAppearance.points.minSize
+            and maxSize. Empty draws every dot at chartAppearance.points.size, as
+            does a dot with no value.
+          type: string
+        x:
+          description: Value column key (queryName, or queryName.expression for a
+            multi-aggregation query) plotted on the x axis. Empty, or a key the result
+            lacks, uses the first value column.
+          type: string
+        "y":
+          description: Value column key plotted on the y axis. Empty, or a key the
+            result lacks, uses the first value column x does not use.
+          type: string
+      type: object
+    DashboardtypesScatterPlotPanelSpec:
+      properties:
+        axes:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotAxes'
+          description: Title, bounds and scale of each axis.
+        chartAppearance:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotChartAppearance'
+          description: Dot drawing options.
+        dimensions:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotDimensions'
+          description: 'Which result columns place, size and color the dots. Each
+            dot is one row of the joined scalar result: one group.'
+        formatting:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesTableFormatting'
+          description: Per-column units and decimal precision. The x and y columns'
+            units label their axes; every bound column's unit shows in the tooltip.
+        legend:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesLegend'
+          description: Legend placement and series colors. A series is one color group,
+            labeled by its colorBy values joined with a comma, or All when nothing
+            is grouped.
+        thresholds:
+          description: Reference lines drawn at fixed values across the x or y axis.
+          items:
+            $ref: '#/components/schemas/DashboardtypesScatterPlotThreshold'
+          nullable: true
+          type: array
+        visualization:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+          description: The time range the groups are computed over.
+      type: object
+    DashboardtypesScatterPlotPoints:
+      properties:
+        maxSize:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesPointDiameter'
+          description: Diameter of the largest dot when dimensions.sizeBy is set,
+            in CSS pixels from 2 to 40. Null means 24.
+        minSize:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesPointDiameter'
+          description: Diameter of the smallest dot when dimensions.sizeBy is set,
+            in CSS pixels from 2 to 40. Null means 4.
+        opacity:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesPointOpacity'
+          description: Fill opacity of every dot, from 0.1 to 1. Null means 0.7.
+        size:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesPointDiameter'
+          description: Diameter of every dot when dimensions.sizeBy is unset, in CSS
+            pixels from 2 to 40. Null means 6.
+      type: object
+    DashboardtypesScatterPlotThreshold:
+      properties:
+        axis:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesThresholdAxis'
+          description: 'The axis the line marks: y (default) draws it horizontally,
+            x vertically. Unit converts against that axis''s column unit, and the
+            axis extends to keep the line in view.'
+        color:
+          description: 'The CSS color of the line, for example #F1575F, which matches
+            the SigNoz red preset; CSS named colors such as red also work.'
+          type: string
+        label:
+          description: The caption shown on the line.
+          type: string
+        unit:
+          description: The unit id of value, such as ms or percent. Empty means the
+            panel's unit, or the column's unit for a table threshold. Prefer the panel's
+            unit; a different unit works only when it converts to it, such as s against
+            a panel in ms.
+          type: string
+        value:
+          description: The value the line is drawn at, in unit.
+          format: double
+          type: number
+      required:
+      - value
+      - color
+      type: object
     DashboardtypesSource:
       enum:
       - user
@@ -5914,6 +6104,11 @@ components:
       - value
       - name
       type: object
+    DashboardtypesThresholdAxis:
+      enum:
+      - x
+      - "y"
+      type: string
     DashboardtypesThresholdFormat:
       enum:
       - text

frontend/.storybook/preview.tsx

@@ -143,12 +143,7 @@ const preview: Preview = {
 						'Logs',
 						['Explorer', 'Live Tail', 'Pipelines', 'Settings'],
 						'Traces',
-						[
-							'Explorer',
-							['Overview', 'Span Drawer'],
-							'Trace Details',
-							'Funnel Details',
-						],
+						['Explorer', 'Trace Details', 'Funnel Details'],
 						'Metrics',
 						['Explorer'],
 						'Infrastructure',

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/api/generated/services/sigNoz.schemas.ts

@@ -5584,6 +5584,12 @@ export interface DashboardtypesAreaChartPanelSpecDTO {
 	visualization?: DashboardtypesAreaChartVisualizationDTO;
 }
 
+export enum DashboardtypesAxisScaleDTO {
+	auto = 'auto',
+	linear = 'linear',
+	log = 'log',
+	symlog = 'symlog',
+}
 export interface DashboardtypesBarChartVisualizationDTO {
 	/**
 	 * @type boolean
@@ -6716,6 +6722,205 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesHeatmapPanelSpecDTO;
 }
 
+/**
+ * The panel kind.
+ */
+export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind {
+	'signoz/ScatterPlotPanel' = 'signoz/ScatterPlotPanel',
+}
+export interface DashboardtypesScatterPlotAxisDTO {
+	/**
+	 * @type string
+	 * @description Axis title. Empty draws none; the tooltip still names the column.
+	 */
+	label?: string;
+	/**
+	 * @description auto (default) uses log, or symlog when values include zero or negatives, when that spreads the dots clearly more than linear does; otherwise linear. log cannot place a value at or below zero and leaves that dot out; symlog is log-like but places it.
+	 */
+	scale?: DashboardtypesAxisScaleDTO;
+	/**
+	 * @type number,null
+	 * @description The highest value the axis always shows; data above it still extends the axis, as does a threshold on it. Null fits the data.
+	 */
+	softMax?: number | null;
+	/**
+	 * @type number,null
+	 * @description The lowest value the axis always shows; data below it still extends the axis, as does a threshold on it. Null fits the data. A log axis ignores a bound at or below zero.
+	 */
+	softMin?: number | null;
+}
+
+export interface DashboardtypesScatterPlotAxesDTO {
+	/**
+	 * @description The axis dimensions.x is plotted along.
+	 */
+	x?: DashboardtypesScatterPlotAxisDTO;
+	/**
+	 * @description The axis dimensions.y is plotted along.
+	 */
+	y?: DashboardtypesScatterPlotAxisDTO;
+}
+
+/**
+ * @minimum 2
+ * @maximum 40
+ * @nullable
+ */
+export type DashboardtypesPointDiameterDTO = number | null;
+
+/**
+ * @minimum 0.1
+ * @maximum 1
+ * @nullable
+ */
+export type DashboardtypesPointOpacityDTO = number | null;
+
+/**
+ * Diameter of the largest dot when dimensions.sizeBy is set, in CSS pixels from 2 to 40. Null means 24.
+ */
+export type DashboardtypesScatterPlotPointsDTOMaxSize = DashboardtypesPointDiameterDTO | null;
+
+/**
+ * Diameter of the smallest dot when dimensions.sizeBy is set, in CSS pixels from 2 to 40. Null means 4.
+ */
+export type DashboardtypesScatterPlotPointsDTOMinSize = DashboardtypesPointDiameterDTO | null;
+
+/**
+ * Fill opacity of every dot, from 0.1 to 1. Null means 0.7.
+ */
+export type DashboardtypesScatterPlotPointsDTOOpacity = DashboardtypesPointOpacityDTO | null;
+
+/**
+ * Diameter of every dot when dimensions.sizeBy is unset, in CSS pixels from 2 to 40. Null means 6.
+ */
+export type DashboardtypesScatterPlotPointsDTOSize = DashboardtypesPointDiameterDTO | null;
+
+export interface DashboardtypesScatterPlotPointsDTO {
+	/**
+	 * @description Diameter of the largest dot when dimensions.sizeBy is set, in CSS pixels from 2 to 40. Null means 24.
+	 */
+	maxSize?: DashboardtypesScatterPlotPointsDTOMaxSize;
+	/**
+	 * @description Diameter of the smallest dot when dimensions.sizeBy is set, in CSS pixels from 2 to 40. Null means 4.
+	 */
+	minSize?: DashboardtypesScatterPlotPointsDTOMinSize;
+	/**
+	 * @description Fill opacity of every dot, from 0.1 to 1. Null means 0.7.
+	 */
+	opacity?: DashboardtypesScatterPlotPointsDTOOpacity;
+	/**
+	 * @description Diameter of every dot when dimensions.sizeBy is unset, in CSS pixels from 2 to 40. Null means 6.
+	 */
+	size?: DashboardtypesScatterPlotPointsDTOSize;
+}
+
+export interface DashboardtypesScatterPlotChartAppearanceDTO {
+	/**
+	 * @description Dot size and opacity.
+	 */
+	points?: DashboardtypesScatterPlotPointsDTO;
+}
+
+export interface DashboardtypesScatterPlotDimensionsDTO {
+	/**
+	 * @type array,null
+	 * @description Group-by label names (e.g. k8s.namespace.name) whose combined values color the dots and drive the legend. Empty colors by every group-by label.
+	 */
+	colorBy?: string[] | null;
+	/**
+	 * @type string
+	 * @description Value column key that scales each dot's area between chartAppearance.points.minSize and maxSize. Empty draws every dot at chartAppearance.points.size, as does a dot with no value.
+	 */
+	sizeBy?: string;
+	/**
+	 * @type string
+	 * @description Value column key (queryName, or queryName.expression for a multi-aggregation query) plotted on the x axis. Empty, or a key the result lacks, uses the first value column.
+	 */
+	x?: string;
+	/**
+	 * @type string
+	 * @description Value column key plotted on the y axis. Empty, or a key the result lacks, uses the first value column x does not use.
+	 */
+	y?: string;
+}
+
+export enum DashboardtypesThresholdAxisDTO {
+	x = 'x',
+	y = 'y',
+}
+export interface DashboardtypesScatterPlotThresholdDTO {
+	/**
+	 * @description The axis the line marks: y (default) draws it horizontally, x vertically. Unit converts against that axis's column unit, and the axis extends to keep the line in view.
+	 */
+	axis?: DashboardtypesThresholdAxisDTO;
+	/**
+	 * @type string
+	 * @description The CSS color of the line, for example #F1575F, which matches the SigNoz red preset; CSS named colors such as red also work.
+	 */
+	color: string;
+	/**
+	 * @type string
+	 * @description The caption shown on the line.
+	 */
+	label?: string;
+	/**
+	 * @type string
+	 * @description The unit id of value, such as ms or percent. Empty means the panel's unit, or the column's unit for a table threshold. Prefer the panel's unit; a different unit works only when it converts to it, such as s against a panel in ms.
+	 */
+	unit?: string;
+	/**
+	 * @type number
+	 * @format double
+	 * @description The value the line is drawn at, in unit.
+	 */
+	value: number;
+}
+
+export interface DashboardtypesScatterPlotPanelSpecDTO {
+	/**
+	 * @description Title, bounds and scale of each axis.
+	 */
+	axes?: DashboardtypesScatterPlotAxesDTO;
+	/**
+	 * @description Dot drawing options.
+	 */
+	chartAppearance?: DashboardtypesScatterPlotChartAppearanceDTO;
+	/**
+	 * @description Which result columns place, size and color the dots. Each dot is one row of the joined scalar result: one group.
+	 */
+	dimensions?: DashboardtypesScatterPlotDimensionsDTO;
+	/**
+	 * @description Per-column units and decimal precision. The x and y columns' units label their axes; every bound column's unit shows in the tooltip.
+	 */
+	formatting?: DashboardtypesTableFormattingDTO;
+	/**
+	 * @description Legend placement and series colors. A series is one color group, labeled by its colorBy values joined with a comma, or All when nothing is grouped.
+	 */
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 * @description Reference lines drawn at fixed values across the x or y axis.
+	 */
+	thresholds?: DashboardtypesScatterPlotThresholdDTO[] | null;
+	/**
+	 * @description The time range the groups are computed over.
+	 */
+	visualization?: DashboardtypesBasicVisualizationDTO;
+}
+
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO {
+	/**
+	 * @enum signoz/ScatterPlotPanel
+	 * @type string
+	 * @description The panel kind.
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind;
+	/**
+	 * @description The options for this panel kind. {} accepts every default.
+	 */
+	spec: DashboardtypesScatterPlotPanelSpecDTO;
+}
+
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -6726,7 +6931,8 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -8006,6 +8212,7 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/ListPanel' = 'signoz/ListPanel',
 	'signoz/TextPanel' = 'signoz/TextPanel',
 	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
+	'signoz/ScatterPlotPanel' = 'signoz/ScatterPlotPanel',
 }
 /**
  * The RFC 6902 operations, applied in order against the dashboard's postable shape.

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts

@@ -21,6 +21,7 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
 import {
 	convertBuilderQueriesToV5,
+	mapPanelTypeToRequestType,
 	prepareQueryRangePayloadV5,
 } from './prepareQueryRangePayloadV5';
 
@@ -904,6 +905,12 @@ describe('prepareQueryRangePayloadV5', () => {
 	});
 });
 
+describe('mapPanelTypeToRequestType', () => {
+	it('sends a scatter plot as scalar, like a table', () => {
+		expect(mapPanelTypeToRequestType(PANEL_TYPES.SCATTER)).toBe('scalar');
+	});
+});
+
 describe('convertBuilderQueriesToV5 having normalization', () => {
 	const buildSpec = (having: unknown): MetricBuilderQuery => {
 		const [envelope] = convertBuilderQueriesToV5(

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -51,6 +51,7 @@ export function mapPanelTypeToRequestType(panelType: PANEL_TYPES): RequestType {
 		case PANEL_TYPES.BAR:
 			return 'time_series';
 		case PANEL_TYPES.TABLE:
+		case PANEL_TYPES.SCATTER:
 		case PANEL_TYPES.PIE:
 		case PANEL_TYPES.VALUE:
 			return 'scalar';
@@ -274,6 +275,7 @@ export function createAggregation(
 		queryData.dataSource === DataSource.METRICS &&
 		panelType &&
 		(panelType === PANEL_TYPES.TABLE ||
+			panelType === PANEL_TYPES.SCATTER ||
 			panelType === PANEL_TYPES.PIE ||
 			panelType === PANEL_TYPES.VALUE);
 

frontend/src/components/DetailsPanel/DetailsPanelDrawer.module.scss

@@ -1,17 +0,0 @@
-.drawer {
-	overflow: hidden;
-	border-color: var(--l2-border);
-	background: var(--l2-background);
-	box-shadow: -4px 10px 16px 2px var(--l1-shadow);
-
-	&:focus,
-	&:focus-visible {
-		outline: none;
-	}
-}
-
-.body {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-}

frontend/src/components/DetailsPanel/DetailsPanelDrawer.styles.scss

@@ -0,0 +1,7 @@
+.details-panel-drawer {
+	&__body {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+}

frontend/src/components/DetailsPanel/DetailsPanelDrawer.tsx

@@ -1,15 +1,12 @@
-import { Drawer, DrawerContent } from '@signozhq/ui/drawer';
-import cx from 'classnames';
-import { AnimatePresence } from 'motion/react';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
 
-import styles from './DetailsPanelDrawer.module.scss';
+import './DetailsPanelDrawer.styles.scss';
 
 interface DetailsPanelDrawerProps {
 	isOpen: boolean;
 	onClose: () => void;
 	children: React.ReactNode;
 	className?: string;
-	testId?: string;
 }
 
 function DetailsPanelDrawer({
@@ -17,41 +14,22 @@ function DetailsPanelDrawer({
 	onClose,
 	children,
 	className,
-	testId,
 }: DetailsPanelDrawerProps): JSX.Element {
 	return (
-		<Drawer
+		<DrawerWrapper
 			open={isOpen}
 			onOpenChange={(open): void => {
 				if (!open) {
 					onClose();
 				}
 			}}
-			modal={false}
+			direction="right"
+			showOverlay={false}
+			className={`details-panel-drawer ${className || ''}`}
 		>
-			<AnimatePresence>
-				{isOpen && (
-					<DrawerContent
-						forceMount
-						direction="right"
-						width="extra-wide"
-						showOverlay={false}
-						// Outside presses are left to the page, which knows what counts as inside.
-						onInteractOutside={(e): void => e.preventDefault()}
-						className={cx(styles.drawer, className)}
-						testId={testId}
-					>
-						<div className={styles.body}>{children}</div>
-					</DrawerContent>
-				)}
-			</AnimatePresence>
-		</Drawer>
+			<div className="details-panel-drawer__body">{children}</div>
+		</DrawerWrapper>
 	);
 }
 
-DetailsPanelDrawer.defaultProps = {
-	className: undefined,
-	testId: undefined,
-};
-
 export default DetailsPanelDrawer;

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -106,9 +106,17 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[resolvedConfig],
 	);
 
+	const traceOperatorField = useMemo(
+		() =>
+			resolveQueryBuilderField(QueryBuilderField.TraceOperator, resolvedConfig),
+		[resolvedConfig],
+	);
+
+	const canShowTraceOperator = showTraceOperator && !traceOperatorField.hidden;
+
 	const isMultiQueryAllowed = useMemo(
-		() => !additionalQueries.hidden && (!isRawQuery || showTraceOperator),
-		[additionalQueries.hidden, showTraceOperator, isRawQuery],
+		() => !additionalQueries.hidden && (!isRawQuery || canShowTraceOperator),
+		[additionalQueries.hidden, canShowTraceOperator, isRawQuery],
 	);
 
 	const queryDataSources = useMemo(
@@ -146,13 +154,14 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	);
 
 	const hasTraceOperator = useMemo(
-		() => showTraceOperator && hasAtLeastOneTraceQuery && Boolean(traceOperator),
-		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
+		() =>
+			canShowTraceOperator && hasAtLeastOneTraceQuery && Boolean(traceOperator),
+		[canShowTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);
 
 	const showQueryList = useMemo(
-		() => (!showOnlyWhereClause && !isRawQuery) || showTraceOperator,
-		[isRawQuery, showOnlyWhereClause, showTraceOperator],
+		() => (!showOnlyWhereClause && !isRawQuery) || canShowTraceOperator,
+		[isRawQuery, showOnlyWhereClause, canShowTraceOperator],
 	);
 
 	const showFormula = useMemo(() => {
@@ -168,8 +177,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	}, [formula.hidden, isRawQuery, currentDataSource]);
 
 	const showAddTraceOperator = useMemo(
-		() => showTraceOperator && !traceOperator && hasAtLeastOneTraceQuery,
-		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
+		() => canShowTraceOperator && !traceOperator && hasAtLeastOneTraceQuery,
+		[canShowTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);
 
 	// Nothing left to add means no footer at all, rather than an empty bar under the
@@ -178,13 +187,13 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		() =>
 			(!additionalQueries.hidden || showFormula || showAddTraceOperator) &&
 			((!showOnlyWhereClause && !isRawQuery) ||
-				(currentDataSource === DataSource.TRACES && showTraceOperator)),
+				(currentDataSource === DataSource.TRACES && canShowTraceOperator)),
 		[
 			additionalQueries.hidden,
 			showFormula,
 			showAddTraceOperator,
 			isRawQuery,
-			showTraceOperator,
+			canShowTraceOperator,
 			showOnlyWhereClause,
 			currentDataSource,
 		],
@@ -222,7 +231,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							fieldsConfig={fieldsConfig}
 							allowedDataSources={queryDataSources}
 							isMultiQueryAllowed={isMultiQueryAllowed}
-							showTraceOperator={showTraceOperator}
+							showTraceOperator={canShowTraceOperator}
 							hasTraceOperator={hasTraceOperator}
 							version={version}
 							isAvailableToDisable={false}
@@ -247,7 +256,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								version={version}
 								isMultiQueryAllowed={isMultiQueryAllowed}
 								isAvailableToDisable={false}
-								showTraceOperator={showTraceOperator}
+								showTraceOperator={canShowTraceOperator}
 								hasTraceOperator={hasTraceOperator}
 								queryVariant={config?.queryVariant || 'dropdown'}
 								showOnlyWhereClause={showOnlyWhereClause}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/types.ts

@@ -6,7 +6,8 @@ export type NonAddOnField =
 	| QueryBuilderField.StepInterval
 	| QueryBuilderField.Functions
 	| QueryBuilderField.Formula
-	| QueryBuilderField.AdditionalQueries;
+	| QueryBuilderField.AdditionalQueries
+	| QueryBuilderField.TraceOperator;
 
 export type AddOnField = Exclude<QueryBuilderField, NonAddOnField>;
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -18,6 +18,7 @@ import {
 	STEP_INTERVAL_PLACEHOLDER,
 } from '../../queryBuilderFields.utils';
 
+import { isScalarPanelType } from '../panelTypes';
 import QueryAggregationSelect from './QueryAggregationSelect';
 
 import './QueryAggregation.styles.scss';
@@ -45,10 +46,7 @@ function QueryAggregationOptions({
 		const isNonMetricSource =
 			dataSource === DataSource.TRACES || dataSource === DataSource.LOGS;
 
-		if (
-			isNonMetricSource &&
-			(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE)
-		) {
+		if (isNonMetricSource && isScalarPanelType(panelType)) {
 			return { hidden: true, disabled: false, pinned: false };
 		}
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -9,7 +9,6 @@ import {
 import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import QBEntityOptions from 'container/QueryBuilder/components/QBEntityOptions/QBEntityOptions';
 import { QueryProps } from 'container/QueryBuilder/type';
 import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
@@ -27,6 +26,7 @@ import {
 	resolveQueryBuilderField,
 } from '../queryBuilderFields.utils';
 
+import { isScalarPanelType } from './panelTypes';
 import MetricsAggregateSection from './MerticsAggregateSection/MetricsAggregateSection';
 import { MetricsSelect } from './MetricsSelect/MetricsSelect';
 import QueryAddOns from './QueryAddOns/QueryAddOns';
@@ -112,11 +112,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 	}
 
 	const showReduceTo = useMemo(
-		() =>
-			dataSource === DataSource.METRICS &&
-			(panelType === PANEL_TYPES.TABLE ||
-				panelType === PANEL_TYPES.PIE ||
-				panelType === PANEL_TYPES.VALUE),
+		() => dataSource === DataSource.METRICS && isScalarPanelType(panelType),
 		[dataSource, panelType],
 	);
 

frontend/src/components/QueryBuilderV2/QueryV2/panelTypes.ts

@@ -0,0 +1,13 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+
+/** Panels that reduce each query to one value per group over the whole window. */
+const SCALAR_PANEL_TYPES: ReadonlySet<string> = new Set<string>([
+	PANEL_TYPES.TABLE,
+	PANEL_TYPES.SCATTER,
+	PANEL_TYPES.PIE,
+	PANEL_TYPES.VALUE,
+]);
+
+export function isScalarPanelType(panelType?: string | null): boolean {
+	return panelType != null && SCALAR_PANEL_TYPES.has(panelType);
+}

frontend/src/components/QueryBuilderV2/__tests__/QueryAggregation.test.tsx

@@ -14,6 +14,17 @@ jest.mock('../QueryV2/QueryAggregation/QueryAggregationSelect', () => ({
 const queryData = initialQueriesMap.traces.builder
 	.queryData[0] as IBuilderQuery;
 
+function renderFor(panelType: PANEL_TYPES, dataSource: DataSource): void {
+	render(
+		<QueryAggregationOptions
+			dataSource={dataSource}
+			panelType={panelType}
+			onAggregationIntervalChange={jest.fn()}
+			queryData={queryData}
+		/>,
+	);
+}
+
 describe('QueryAggregationOptions step interval placeholder', () => {
 	it('shows the configured placeholder', () => {
 		render(
@@ -34,14 +45,27 @@ describe('QueryAggregationOptions step interval placeholder', () => {
 	});
 
 	it('falls back to Auto', () => {
-		render(
-			<QueryAggregationOptions
-				dataSource={DataSource.TRACES}
-				panelType={PANEL_TYPES.TIME_SERIES}
-				onAggregationIntervalChange={jest.fn()}
-				queryData={queryData}
-			/>,
-		);
+		renderFor(PANEL_TYPES.TIME_SERIES, DataSource.TRACES);
 		expect(screen.getByPlaceholderText('Auto')).toBeInTheDocument();
 	});
 });
+
+describe('QueryAggregationOptions step interval', () => {
+	it.each([PANEL_TYPES.TABLE, PANEL_TYPES.SCATTER, PANEL_TYPES.PIE])(
+		'is hidden for a %s panel over traces, which reduces the whole window',
+		(panelType) => {
+			renderFor(panelType, DataSource.TRACES);
+			expect(screen.queryByText('every')).not.toBeInTheDocument();
+		},
+	);
+
+	it('stays for a scatter plot over metrics, where it sets the series step', () => {
+		renderFor(PANEL_TYPES.SCATTER, DataSource.METRICS);
+		expect(screen.getByText('every')).toBeInTheDocument();
+	});
+
+	it('stays for a time series over traces', () => {
+		renderFor(PANEL_TYPES.TIME_SERIES, DataSource.TRACES);
+		expect(screen.getByText('every')).toBeInTheDocument();
+	});
+});

frontend/src/components/QueryBuilderV2/queryBuilderFields.types.ts

@@ -20,6 +20,7 @@ export enum QueryBuilderField {
 	// Builder level
 	Formula = 'formula',
 	AdditionalQueries = 'additional_queries',
+	TraceOperator = 'trace_operator',
 }
 
 /** Per-query builder fields that can be kept equal across a panel's queries. */

frontend/src/components/QueryBuilderV2/queryBuilderFields.utils.ts

@@ -65,13 +65,13 @@ export function resolveQueryBuilderFields(
 
 /**
  * The surface a raw-row builder starts from, layered under a caller's own config.
- * `AdditionalQueries` is deliberately absent — a raw trace builder still takes several
- * queries when trace matching is on. Omit rather than Partial, so a field added to the
- * enum has to be placed on one side.
+ * `AdditionalQueries` and `TraceOperator` are deliberately absent — a raw trace builder
+ * still takes several queries, and their trace operator, when trace matching is on.
+ * Omit rather than Partial, so a field added to the enum has to be placed on one side.
  */
 export const RAW_QUERY_FIELDS: Omit<
 	Record<QueryBuilderField, QueryBuilderFieldRule>,
-	QueryBuilderField.AdditionalQueries
+	QueryBuilderField.AdditionalQueries | QueryBuilderField.TraceOperator
 > = {
 	[QueryBuilderField.Aggregation]: { state: 'hidden' },
 	[QueryBuilderField.StepInterval]: { state: 'hidden' },

frontend/src/components/TanStackTableView/useRowNavigation.ts

@@ -1,38 +0,0 @@
-import { useCallback } from 'react';
-
-export type UseRowNavigationParams<TData> = {
-	rows: TData[];
-	activeIndex: number;
-	onNavigate: (row: TData, index: number) => void;
-};
-
-export type UseRowNavigationResult = {
-	goToPrev: () => void;
-	goToNext: () => void;
-	isPrevDisabled: boolean;
-	isNextDisabled: boolean;
-};
-
-/** Steps the active row through the loaded rows; stops at either end. */
-export function useRowNavigation<TData>({
-	rows,
-	activeIndex,
-	onNavigate,
-}: UseRowNavigationParams<TData>): UseRowNavigationResult {
-	const isPrevDisabled = activeIndex <= 0;
-	const isNextDisabled = activeIndex < 0 || activeIndex >= rows.length - 1;
-
-	const goToPrev = useCallback((): void => {
-		if (!isPrevDisabled) {
-			onNavigate(rows[activeIndex - 1], activeIndex - 1);
-		}
-	}, [isPrevDisabled, onNavigate, rows, activeIndex]);
-
-	const goToNext = useCallback((): void => {
-		if (!isNextDisabled) {
-			onNavigate(rows[activeIndex + 1], activeIndex + 1);
-		}
-	}, [isNextDisabled, onNavigate, rows, activeIndex]);
-
-	return { goToPrev, goToNext, isPrevDisabled, isNextDisabled };
-}

frontend/src/constants/localStorage.ts

@@ -46,5 +46,4 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
-	TRACES_SPAN_DRAWER_ENABLED = 'TRACES_SPAN_DRAWER_ENABLED',
 }

frontend/src/constants/panelTypes.ts

@@ -36,6 +36,7 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.HEATMAP]: null,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.
 		[PANEL_TYPES.TEXT]: null,
+		[PANEL_TYPES.SCATTER]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,
 	};
 

frontend/src/constants/queryBuilder.ts

@@ -336,6 +336,7 @@ export enum PANEL_TYPES {
 	TRACE = 'trace',
 	BAR = 'bar',
 	AREA = 'area',
+	SCATTER = 'scatter',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
 	HEATMAP = 'heatmap',

frontend/src/container/InfraMonitoringK8sV2/Clusters/table.config.tsx

@@ -4,8 +4,7 @@ import {
 	InframonitoringtypesClusterRecordDTO,
 	InframonitoringtypesNodeConditionDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { TableColumnDef } from 'components/TanStackTableView';
-import TanStackTable from 'components/TanStackTableView';
+import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 
 import ColumnHeader from '../Base/ColumnHeader';

frontend/src/container/InfraMonitoringK8sV2/Nodes/table.config.tsx

@@ -12,9 +12,11 @@ import K8sGroupCell from '../Base/K8sGroupCell';
 import ClickableStatusBadge from '../Base/components/StatusFilterCells/ClickableStatusBadge';
 import ClickableStatusCounts from '../Base/components/StatusFilterCells/ClickableStatusCounts';
 import { formatBytes, getPodStatusItems } from '../commonUtils';
-import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import {
+	INFRA_MONITORING_ATTR_KEYS,
+	InfraMonitoringEntity,
+} from '../constants';
 import { TextNoData, ValidateColumnValueWrapper } from '../components';
-import { InfraMonitoringEntity } from '../constants';
 import { NODE_CONDITION_COLORS, NODE_CONDITION_LABELS } from './utils';
 import { Workflow } from '@signozhq/icons';
 

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/PermissionEditor.wizard.test.tsx

@@ -146,13 +146,114 @@ describe('PermissionEditor - TelemetrySelectorWizard', () => {
 		await expect(screen.findByText('promql/*')).resolves.toBeInTheDocument();
 	});
 
-	it('hardcodes the key and does not let it be edited', async () => {
+	it('defaults the key to signoz.workspace.key.id', async () => {
 		const user = userEvent.setup();
 		await openLogsWizard(user);
 
-		const keyInput = screen.getByTestId('wizard-key-input-logs-read');
-		expect(keyInput).toHaveValue('signoz.workspace.key.id');
-		expect(keyInput).toBeDisabled();
+		expect(screen.getByTestId('wizard-key-select-logs-read')).toHaveTextContent(
+			'signoz.workspace.key.id',
+		);
+	});
+
+	it('rewrites the selector when another key is picked', async () => {
+		const user = userEvent.setup();
+		await openLogsWizard(user);
+
+		await user.type(
+			screen.getByTestId('wizard-value-input-logs-read'),
+			'checkout',
+		);
+		await user.click(screen.getByTestId('wizard-key-select-logs-read'));
+		await user.click(
+			await screen.findByTestId(
+				'wizard-key-option-resource.service.name-logs-read',
+			),
+		);
+
+		expect(screen.getByTestId('wizard-selector-input-logs-read')).toHaveValue(
+			'builder_query/resource.service.name/checkout',
+		);
+
+		await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
+
+		await expect(
+			screen.findByText('builder_query/resource.service.name/checkout'),
+		).resolves.toBeInTheDocument();
+	});
+
+	it('folds the resource prefix of the workspace key from a typed selector', async () => {
+		const user = userEvent.setup();
+		await openLogsWizard(user);
+
+		const selectorInput = screen.getByTestId('wizard-selector-input-logs-read');
+		await user.clear(selectorInput);
+		await user.type(
+			selectorInput,
+			'builder_query/resource.signoz.workspace.key.id/key-a',
+		);
+
+		expect(screen.getByTestId('wizard-key-select-logs-read')).toHaveTextContent(
+			'signoz.workspace.key.id',
+		);
+
+		await user.type(screen.getByTestId('wizard-value-input-logs-read'), '2');
+
+		expect(selectorInput).toHaveValue(
+			'builder_query/signoz.workspace.key.id/key-a2',
+		);
+	});
+
+	it('accepts the resource-prefixed workspace key in the hint', async () => {
+		const user = userEvent.setup();
+		await openLogsWizard(user);
+
+		const selectorInput = screen.getByTestId('wizard-selector-input-logs-read');
+		await user.clear(selectorInput);
+		await user.type(
+			selectorInput,
+			'builder_query/resource.signoz.workspace.key.id/key-a',
+		);
+
+		expect(
+			screen.getByTestId('wizard-selector-hint-logs-read'),
+		).toHaveTextContent(
+			'Allow signoz.workspace.key.id=key-a for Builder Query queries.',
+		);
+	});
+
+	it('selects the key from a typed selector', async () => {
+		const user = userEvent.setup();
+		await openLogsWizard(user);
+
+		const selectorInput = screen.getByTestId('wizard-selector-input-logs-read');
+		await user.clear(selectorInput);
+		await user.type(
+			selectorInput,
+			'builder_query/resource.deployment.environment.name/prod',
+		);
+
+		expect(screen.getByTestId('wizard-key-select-logs-read')).toHaveTextContent(
+			'resource.deployment.environment.name',
+		);
+		expect(screen.getByTestId('wizard-value-input-logs-read')).toHaveValue(
+			'prod',
+		);
+	});
+
+	it('hints when a typed selector uses an unsupported key', async () => {
+		const user = userEvent.setup();
+		await openLogsWizard(user);
+
+		const selectorInput = screen.getByTestId('wizard-selector-input-logs-read');
+		await user.clear(selectorInput);
+		await user.type(selectorInput, 'builder_query/host.name/web-1');
+
+		expect(screen.getByTestId('wizard-key-select-logs-read')).toHaveTextContent(
+			'signoz.workspace.key.id',
+		);
+		expect(
+			screen.getByTestId('wizard-selector-hint-logs-read'),
+		).toHaveTextContent('"host.name" is not a supported key.');
 	});
 
 	it('hides Key field for query types that do not support key scoping', async () => {
@@ -163,7 +264,7 @@ describe('PermissionEditor - TelemetrySelectorWizard', () => {
 		await user.click(await screen.findByText('ClickHouse SQL'));
 
 		expect(
-			screen.queryByTestId('wizard-key-input-logs-read'),
+			screen.queryByTestId('wizard-key-select-logs-read'),
 		).not.toBeInTheDocument();
 	});
 
@@ -288,38 +389,18 @@ describe('PermissionEditor - TelemetrySelectorWizard', () => {
 		expect(screen.getByRole('checkbox', { name: 'Any value' })).toBeChecked();
 	});
 
-	it('keeps the key input hardcoded when the selector uses another key', async () => {
+	it('restores the selected key in the selector once the value changes', async () => {
 		const user = userEvent.setup();
 		await openLogsWizard(user);
 
 		const selectorInput = screen.getByTestId('wizard-selector-input-logs-read');
 		await user.clear(selectorInput);
-		await user.type(selectorInput, 'builder_query/service.name/frontend');
-
-		expect(screen.getByTestId('wizard-key-input-logs-read')).toHaveValue(
-			'signoz.workspace.key.id',
-		);
-		expect(
-			screen.getByTestId('wizard-selector-hint-logs-read'),
-		).toHaveTextContent('Allow service.name=frontend for Builder Query queries.');
-		expect(screen.getByTestId('wizard-add-btn-logs-read')).not.toHaveAttribute(
-			'aria-disabled',
-			'true',
-		);
-	});
-
-	it('restores the hardcoded key in the selector once the value changes', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		const selectorInput = screen.getByTestId('wizard-selector-input-logs-read');
-		await user.clear(selectorInput);
-		await user.type(selectorInput, 'builder_query/service.name/frontend');
+		await user.type(selectorInput, 'builder_query/host.name/web-1');
 
 		await user.type(screen.getByTestId('wizard-value-input-logs-read'), '2');
 
 		expect(selectorInput).toHaveValue(
-			'builder_query/signoz.workspace.key.id/frontend2',
+			'builder_query/signoz.workspace.key.id/web-12',
 		);
 		expect(screen.getByTestId('wizard-add-btn-logs-read')).not.toHaveAttribute(
 			'aria-disabled',

frontend/src/container/RolesSettings/CreateEditRolePage/components/TelemetrySelectorWizard.constants.ts

@@ -30,17 +30,26 @@ export const QUERY_TYPES: readonly QueryTypeOption[] = [
 
 export const DEFAULT_QUERY_TYPE: QueryTypeId = 'builder_query';
 
-export const SUPPORTED_GRANT_KEY = 'signoz.workspace.key.id';
+// mirrors telemetryGrantKeys in pkg/types/telemetrytypes/selector.go
+export const SUPPORTED_GRANT_KEYS: readonly string[] = [
+	'signoz.workspace.key.id',
+	'resource.service.name',
+	'resource.deployment.environment.name',
+];
+
+export const DEFAULT_GRANT_KEY = 'signoz.workspace.key.id';
 
 export const ANY_RESOURCE_VALUE = '*';
 
 export interface SelectorDraft {
 	queryType: QueryTypeId;
+	key: string;
 	value: string;
 }
 
 export interface ParsedSelector {
 	queryType?: QueryTypeId;
+	key?: string;
 	value: string;
 }
 

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

@@ -15,7 +15,7 @@ import { Typography } from '@signozhq/ui/typography';
 import {
 	ANY_RESOURCE_VALUE,
 	QUERY_TYPES,
-	SUPPORTED_GRANT_KEY,
+	SUPPORTED_GRANT_KEYS,
 } from './TelemetrySelectorWizard.constants';
 import { isQueryTypeAvailable } from './TelemetrySelectorWizard.utils';
 import useTelemetrySelectorWizard from './useTelemetrySelectorWizard';
@@ -38,6 +38,7 @@ function TelemetrySelectorWizard({
 		open,
 		queryType,
 		selectedQueryType,
+		grantKey,
 		value,
 		selector,
 		isAnyResource,
@@ -46,6 +47,7 @@ function TelemetrySelectorWizard({
 		canAdd,
 		handleOpenChange,
 		handleQueryTypeChange,
+		handleKeyChange,
 		handleValueChange,
 		handleAnyResourceChange,
 		handleSelectorChange,
@@ -130,12 +132,22 @@ function TelemetrySelectorWizard({
 						<Typography as="label" weight="medium">
 							Key
 						</Typography>
-						<Input
-							value={SUPPORTED_GRANT_KEY}
-							readOnly
-							disabled
-							testId={`wizard-key-input-${testId}`}
-						/>
+						<Select value={grantKey} onChange={handleKeyChange}>
+							<SelectTrigger data-testid={`wizard-key-select-${testId}`}>
+								<SelectValue>{grantKey}</SelectValue>
+							</SelectTrigger>
+							<SelectContent withPortal={false} className={styles.selectContent}>
+								{SUPPORTED_GRANT_KEYS.map((supportedKey) => (
+									<SelectItem
+										key={supportedKey}
+										value={supportedKey}
+										testId={`wizard-key-option-${supportedKey}-${testId}`}
+									>
+										{supportedKey}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
 					</div>
 				)}
 

frontend/src/container/RolesSettings/CreateEditRolePage/components/TelemetrySelectorWizard.utils.ts

@@ -2,13 +2,14 @@ import { AuthZResource } from 'lib/authz/hooks/useAuthZ/types';
 
 import {
 	ANY_RESOURCE_VALUE,
+	DEFAULT_GRANT_KEY,
 	ParsedSelector,
 	QUERY_TYPES,
 	QueryTypeId,
 	QueryTypeOption,
 	SelectorDraft,
 	SelectorValidation,
-	SUPPORTED_GRANT_KEY,
+	SUPPORTED_GRANT_KEYS,
 } from './TelemetrySelectorWizard.constants';
 
 const METRIC_RESOURCES: ReadonlySet<AuthZResource> = new Set<AuthZResource>([
@@ -37,6 +38,20 @@ export function isAnyResourceValue(value: string): boolean {
 	return value.trim() === ANY_RESOURCE_VALUE;
 }
 
+export function isSupportedGrantKey(key: string): boolean {
+	return SUPPORTED_GRANT_KEYS.includes(key);
+}
+
+const RESOURCE_PREFIX = 'resource.';
+
+// the backend folds resource.<key> to <key> when <key> is itself supported
+function foldGrantKey(key: string): string {
+	const stripped = key.startsWith(RESOURCE_PREFIX)
+		? key.slice(RESOURCE_PREFIX.length)
+		: key;
+	return isSupportedGrantKey(stripped) ? stripped : key;
+}
+
 function splitSelector(selector: string): string[] {
 	const parts = selector.split('/');
 
@@ -47,14 +62,18 @@ function splitSelector(selector: string): string[] {
 	return [parts[0], parts[1], parts.slice(2).join('/')];
 }
 
-export function buildSelector({ queryType, value }: SelectorDraft): string {
+export function buildSelector({
+	queryType,
+	key,
+	value,
+}: SelectorDraft): string {
 	const trimmedValue = value.trim();
 
 	if (!supportsKeyScoping(queryType) || !trimmedValue) {
 		return `${queryType}/${ANY_RESOURCE_VALUE}`;
 	}
 
-	return `${queryType}/${SUPPORTED_GRANT_KEY}/${trimmedValue}`;
+	return `${queryType}/${key}/${trimmedValue}`;
 }
 
 export function parseSelector(selector: string): ParsedSelector {
@@ -62,6 +81,7 @@ export function parseSelector(selector: string): ParsedSelector {
 
 	return {
 		queryType: getQueryTypeOption(parts[0])?.id,
+		key: parts.length >= 3 ? foldGrantKey(parts[1]) : undefined,
 		value: parts.length >= 3 ? parts[2] : '',
 	};
 }
@@ -101,7 +121,9 @@ export function validateSelector(selector: string): SelectorValidation {
 			}
 
 			return {
-				message: `Use <query-type>/${ANY_RESOURCE_VALUE} or <query-type>/${SUPPORTED_GRANT_KEY}/<value>.`,
+				message: `Use <query-type>/${ANY_RESOURCE_VALUE} or <query-type>/<key>/<value> with one of: ${SUPPORTED_GRANT_KEYS.join(
+					', ',
+				)}.`,
 				isError: false, // intentionally not an error
 			};
 		}
@@ -112,7 +134,8 @@ export function validateSelector(selector: string): SelectorValidation {
 		};
 	}
 
-	const [, key, value] = parts;
+	const [, rawKey, value] = parts;
+	const key = foldGrantKey(rawKey);
 
 	if (value === ANY_RESOURCE_VALUE) {
 		return {
@@ -128,6 +151,15 @@ export function validateSelector(selector: string): SelectorValidation {
 		};
 	}
 
+	if (!isSupportedGrantKey(key)) {
+		return {
+			message: `"${key}" is not a supported key. Use one of: ${SUPPORTED_GRANT_KEYS.join(
+				', ',
+			)}.`,
+			isError: false, // intentionally not an error
+		};
+	}
+
 	return {
 		message: `Allow ${key}=${value} for ${option.label} queries.`,
 		isError: false,
@@ -135,5 +167,5 @@ export function validateSelector(selector: string): SelectorValidation {
 }
 
 export function getDefaultSelector(queryType: QueryTypeId): string {
-	return buildSelector({ queryType, value: '' });
+	return buildSelector({ queryType, key: DEFAULT_GRANT_KEY, value: '' });
 }

frontend/src/container/RolesSettings/CreateEditRolePage/components/useTelemetrySelectorWizard.ts

@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 
 import {
 	ANY_RESOURCE_VALUE,
+	DEFAULT_GRANT_KEY,
 	DEFAULT_QUERY_TYPE,
 	QueryTypeId,
 	QueryTypeOption,
@@ -12,6 +13,7 @@ import {
 	getDefaultSelector,
 	getQueryTypeOption,
 	isAnyResourceValue,
+	isSupportedGrantKey,
 	parseSelector,
 	validateSelector,
 } from './TelemetrySelectorWizard.utils';
@@ -24,6 +26,7 @@ interface UseTelemetrySelectorWizardResult {
 	open: boolean;
 	queryType: QueryTypeId;
 	selectedQueryType: QueryTypeOption | undefined;
+	grantKey: string;
 	value: string;
 	selector: string;
 	isAnyResource: boolean;
@@ -32,6 +35,7 @@ interface UseTelemetrySelectorWizardResult {
 	canAdd: boolean;
 	handleOpenChange: (nextOpen: boolean) => void;
 	handleQueryTypeChange: (value: string | string[]) => void;
+	handleKeyChange: (value: string | string[]) => void;
 	handleValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 	handleAnyResourceChange: (checked: boolean) => void;
 	handleSelectorChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -44,6 +48,7 @@ function useTelemetrySelectorWizard({
 }: UseTelemetrySelectorWizardParams): UseTelemetrySelectorWizardResult {
 	const [open, setOpen] = useState(false);
 	const [queryType, setQueryType] = useState<QueryTypeId>(DEFAULT_QUERY_TYPE);
+	const [grantKey, setGrantKey] = useState(DEFAULT_GRANT_KEY);
 	const [value, setValue] = useState('');
 	const [selector, setSelector] = useState(() =>
 		getDefaultSelector(DEFAULT_QUERY_TYPE),
@@ -58,10 +63,17 @@ function useTelemetrySelectorWizard({
 	const validation = useMemo(() => validateSelector(selector), [selector]);
 
 	const applyDraft = useCallback(
-		(nextQueryType: QueryTypeId, nextValue: string): void => {
+		(nextQueryType: QueryTypeId, nextKey: string, nextValue: string): void => {
 			setQueryType(nextQueryType);
+			setGrantKey(nextKey);
 			setValue(nextValue);
-			setSelector(buildSelector({ queryType: nextQueryType, value: nextValue }));
+			setSelector(
+				buildSelector({
+					queryType: nextQueryType,
+					key: nextKey,
+					value: nextValue,
+				}),
+			);
 		},
 		[],
 	);
@@ -71,23 +83,30 @@ function useTelemetrySelectorWizard({
 			const selected = (Array.isArray(next) ? next[0] : next) as QueryTypeId;
 			const keepsValue = getQueryTypeOption(selected)?.supportsKeyScoping ?? false;
 
-			applyDraft(selected, keepsValue ? value : '');
+			applyDraft(selected, grantKey, keepsValue ? value : '');
 		},
-		[applyDraft, value],
+		[applyDraft, grantKey, value],
+	);
+
+	const handleKeyChange = useCallback(
+		(next: string | string[]): void => {
+			applyDraft(queryType, Array.isArray(next) ? next[0] : next, value);
+		},
+		[applyDraft, queryType, value],
 	);
 
 	const handleValueChange = useCallback(
 		(event: React.ChangeEvent<HTMLInputElement>): void => {
-			applyDraft(queryType, event.target.value);
+			applyDraft(queryType, grantKey, event.target.value);
 		},
-		[applyDraft, queryType],
+		[applyDraft, queryType, grantKey],
 	);
 
 	const handleAnyResourceChange = useCallback(
 		(checked: boolean): void => {
-			applyDraft(queryType, checked ? ANY_RESOURCE_VALUE : '');
+			applyDraft(queryType, grantKey, checked ? ANY_RESOURCE_VALUE : '');
 		},
-		[applyDraft, queryType],
+		[applyDraft, queryType, grantKey],
 	);
 
 	const handleSelectorChange = useCallback(
@@ -99,6 +118,9 @@ function useTelemetrySelectorWizard({
 			if (parsed.queryType) {
 				setQueryType(parsed.queryType);
 			}
+			if (parsed.key && isSupportedGrantKey(parsed.key)) {
+				setGrantKey(parsed.key);
+			}
 			setValue(parsed.value);
 		},
 		[],
@@ -109,6 +131,7 @@ function useTelemetrySelectorWizard({
 
 		if (!nextOpen) {
 			setQueryType(DEFAULT_QUERY_TYPE);
+			setGrantKey(DEFAULT_GRANT_KEY);
 			setValue('');
 			setSelector(getDefaultSelector(DEFAULT_QUERY_TYPE));
 		}
@@ -138,6 +161,7 @@ function useTelemetrySelectorWizard({
 		open,
 		queryType,
 		selectedQueryType,
+		grantKey,
 		value,
 		selector,
 		isAnyResource: isAnyResourceValue(value),
@@ -146,6 +170,7 @@ function useTelemetrySelectorWizard({
 		canAdd: !validation.isError,
 		handleOpenChange,
 		handleQueryTypeChange,
+		handleKeyChange,
 		handleValueChange,
 		handleAnyResourceChange,
 		handleSelectorChange,

frontend/src/container/TracesExplorer/ListView/ListView.module.scss

@@ -6,7 +6,3 @@
 	height: calc(100vh - 240px);
 	min-height: 400px;
 }
-
-.drawerScope {
-	display: contents;
-}

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

@@ -1,7 +1,4 @@
-import remove from 'api/browser/localstorage/remove';
-import set from 'api/browser/localstorage/set';
 import { ENVIRONMENT } from 'constants/env';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import {
 	initialQueriesMap,
 	initialQueryBuilderFormTraceOperatorValues,
@@ -10,7 +7,7 @@ import {
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { VirtuosoMockContext } from 'react-virtuoso';
-import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
+import { render, screen } from 'tests/test-utils';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
 
@@ -89,39 +86,6 @@ const listResponse = (rows: unknown[]): Record<string, unknown> => ({
 	data: { type: 'raw', data: { results: [{ queryName: 'A', rows }] } },
 });
 
-const TRACE_SUMMARY_URL = `${BASE_URL}/api/v1/traces/:traceId/summary`;
-const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
-
-type TraceBounds = Record<string, { start: number; end: number }>;
-
-// Traces missing from `bounds` get a 404, like a trace with no summary row.
-const mockTraceSummary = (bounds: TraceBounds): void => {
-	server.use(
-		rest.get(TRACE_SUMMARY_URL, (req, res, ctx) => {
-			const traceBounds = bounds[req.params.traceId as string];
-			if (!traceBounds) {
-				return res(ctx.status(404), ctx.json({ status: 'error' }));
-			}
-			return res(
-				ctx.status(200),
-				ctx.json({
-					status: 'success',
-					data: {
-						startTimestampMillis: traceBounds.start,
-						endTimestampMillis: traceBounds.end,
-						hasMissingSpans: false,
-						rootServiceEntryPoint: '',
-						rootServiceName: '',
-						rootSpanStatusCode: '',
-						totalErrorSpansCount: 0,
-						totalSpansCount: 1,
-					},
-				}),
-			);
-		}),
-	);
-};
-
 const mockSuccess = (rows: unknown[] = listRows): void => {
 	server.use(
 		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
@@ -216,189 +180,3 @@ describe('Traces ListView - Data Loaded', () => {
 		});
 	});
 });
-
-describe('Traces ListView - span drawer', () => {
-	beforeEach(() => {
-		set(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED, 'true');
-		mockSuccess();
-		mockTraceSummary({});
-	});
-
-	afterEach(() => {
-		remove(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED);
-		server.resetHandlers();
-	});
-
-	it('opens the clicked span and steps through rows with the arrow keys', async () => {
-		const user = userEvent.setup();
-		renderListView();
-
-		await user.click(await screen.findByText('HTTP GET'));
-
-		const drawer = await screen.findByTestId('span-details-drawer');
-		expect(within(drawer).getByText('HTTP GET')).toBeInTheDocument();
-		expect(within(drawer).getByTestId('span-details-trace-id')).toHaveTextContent(
-			'0000000000000000344ded1387b08a7e',
-		);
-
-		await user.keyboard('{ArrowDown}');
-		await expect(
-			within(drawer).findByText('authenticate_check_db'),
-		).resolves.toBeInTheDocument();
-
-		await user.keyboard('{ArrowUp}');
-		await expect(
-			within(drawer).findByText('HTTP GET'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('requests span logs over whole milliseconds', async () => {
-		const logsRequests: QueryRangeRequestV5[] = [];
-		server.use(
-			rest.post(QUERY_RANGE_URL, async (req, res, ctx) => {
-				const body = await req.json<QueryRangeRequestV5>();
-				const spec = body.compositeQuery.queries[0]?.spec;
-				if (spec && 'signal' in spec && spec.signal === 'logs') {
-					logsRequests.push(body);
-				}
-				return res(ctx.status(200), ctx.json(listResponse(listRows)));
-			}),
-		);
-		const user = userEvent.setup();
-		renderListView();
-
-		// Its 790.94939 ms duration makes the span window end mid-millisecond.
-		await user.click(await screen.findByText('authenticate_check_db'));
-
-		await waitFor(() => expect(logsRequests.length).toBeGreaterThan(0));
-		logsRequests.forEach(({ start, end }) => {
-			expect(Number.isInteger(start)).toBe(true);
-			expect(Number.isInteger(end)).toBe(true);
-		});
-	});
-
-	it('reads the trace bounds from the trace summary', async () => {
-		const bounds: TraceBounds = {
-			'0000000000000000344ded1387b08a7e': {
-				start: Date.parse('2024-07-19T08:39:58.700Z'),
-				end: Date.parse('2024-07-19T08:39:58.900Z'),
-			},
-			a364a8e15af3e9a8c866e0528db8b637: {
-				start: Date.parse('2024-07-19T08:39:59.900Z'),
-				end: Date.parse('2024-07-19T08:40:01.000Z'),
-			},
-		};
-		mockTraceSummary(bounds);
-		const logsRequests: { traceId: string; start: number; end: number }[] = [];
-		server.use(
-			rest.post(QUERY_RANGE_URL, async (req, res, ctx) => {
-				const body = await req.json<QueryRangeRequestV5>();
-				const spec = body.compositeQuery.queries[0]?.spec;
-				if (spec && 'signal' in spec && spec.signal === 'logs') {
-					const traceId =
-						Object.keys(bounds).find((id) => spec.filter?.expression?.includes(id)) ??
-						'';
-					// The payload carries the window in µs.
-					logsRequests.push({
-						traceId,
-						start: body.start / 1e3,
-						end: body.end / 1e3,
-					});
-					return res(ctx.status(200), ctx.json(listResponse([])));
-				}
-				return res(ctx.status(200), ctx.json(listResponse(listRows)));
-			}),
-		);
-		const user = userEvent.setup();
-		renderListView();
-
-		await user.click(await screen.findByText('HTTP GET'));
-		const drawer = await screen.findByTestId('span-details-drawer');
-		await expect(
-			within(drawer).findByText(/of total exec time/),
-		).resolves.toBeInTheDocument();
-
-		// The next span is in another trace, so it needs that trace's bounds.
-		await user.keyboard('{ArrowDown}');
-		await waitFor(() =>
-			expect(logsRequests.map(({ traceId }) => traceId)).toContain(
-				'a364a8e15af3e9a8c866e0528db8b637',
-			),
-		);
-
-		// Logs wait for the bounds: no request ever goes out with another window.
-		logsRequests.forEach(({ traceId, start, end }) => {
-			expect(start).toBe(bounds[traceId].start - FIVE_MINUTES_IN_MS);
-			expect(end).toBe(bounds[traceId].end + FIVE_MINUTES_IN_MS);
-		});
-	});
-
-	it('speaks only for the span when the trace has no summary', async () => {
-		const logsFilters: string[] = [];
-		server.use(
-			rest.post(QUERY_RANGE_URL, async (req, res, ctx) => {
-				const body = await req.json<QueryRangeRequestV5>();
-				const spec = body.compositeQuery.queries[0]?.spec;
-				if (spec && 'signal' in spec && spec.signal === 'logs') {
-					logsFilters.push(spec.filter?.expression ?? '');
-					return res(ctx.status(200), ctx.json(listResponse([])));
-				}
-				return res(ctx.status(200), ctx.json(listResponse(listRows)));
-			}),
-		);
-		const user = userEvent.setup();
-		renderListView();
-
-		await user.click(await screen.findByText('HTTP GET'));
-		const drawer = await screen.findByTestId('span-details-drawer');
-
-		await user.click(within(drawer).getByRole('tab', { name: /logs/i }));
-		await expect(
-			within(drawer).findByText('No logs found for this span.'),
-		).resolves.toBeInTheDocument();
-		// Checked once the 404 has settled; before it, exec time is absent anyway.
-		expect(
-			within(drawer).queryByText(/of total exec time/),
-		).not.toBeInTheDocument();
-		// No trace-wide check: every logs request is scoped to the span.
-		expect(logsFilters.length).toBeGreaterThan(0);
-		logsFilters.forEach((expression) => {
-			expect(expression).toContain('span_id');
-		});
-	});
-
-	it('closes the drawer', async () => {
-		const user = userEvent.setup();
-		renderListView();
-
-		await user.click(await screen.findByText('HTTP GET'));
-		await screen.findByTestId('span-details-drawer');
-
-		await user.click(screen.getByTestId('span-drawer-close'));
-
-		await waitFor(() =>
-			expect(screen.queryByTestId('span-details-drawer')).not.toBeInTheDocument(),
-		);
-	});
-
-	it('stays open on a press in the drawer or the list, and closes on one outside', async () => {
-		const user = userEvent.setup();
-		renderListView();
-
-		await user.click(await screen.findByText('HTTP GET'));
-		const drawer = await screen.findByTestId('span-details-drawer');
-
-		await user.click(drawer);
-		// Hovering re-renders the row, so the press needs a fresh query.
-		await user.hover(screen.getByText('authenticate_check_db'));
-		await user.click(screen.getByText('authenticate_check_db'));
-		await expect(
-			within(drawer).findByText('authenticate_check_db'),
-		).resolves.toBeInTheDocument();
-
-		await user.click(document.body);
-		await waitFor(() =>
-			expect(screen.queryByTestId('span-details-drawer')).not.toBeInTheDocument(),
-		);
-	});
-});

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

@@ -29,8 +29,6 @@ import { useOptionsMenu } from 'container/OptionsMenu';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
 import TraceExplorerControls from 'container/TracesExplorer/Controls';
 import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
-import SpanDrawer from 'container/TracesExplorer/SpanDrawer/SpanDrawer';
-import { useSpanDrawer } from 'container/TracesExplorer/SpanDrawer/useSpanDrawer';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
@@ -204,8 +202,6 @@ function ListView({
 		[queryTableData],
 	);
 
-	const { tableProps, drawerProps, onPressInside } = useSpanDrawer(rows);
-
 	const handleColumnOrderChange = useCallback(
 		(cols: TableColumnDef<TracesTableRow>[]): void => {
 			config?.addColumn?.onReorder(cols.map((c) => c.id));
@@ -257,26 +253,20 @@ function ListView({
 				/>
 			</div>
 
-			{/* A press in the table or the drawer (a portal) keeps the drawer open. */}
-			<div className={styles.drawerScope} onPointerDownCapture={onPressInside}>
-				<TracesTable
-					data={rows}
-					columns={columns}
-					columnStorageKey={LOCALSTORAGE.TRACES_LIST_COLUMNS}
-					panelType="LIST"
-					getRowHref={getTraceLink}
-					{...tableProps}
-					isLoading={isLoading}
-					isFetching={isFetching}
-					isError={isError}
-					error={error}
-					isFilterApplied={isFilterApplied}
-					onColumnOrderChange={handleColumnOrderChange}
-					onColumnRemove={config?.addColumn?.onRemove}
-				/>
-
-				{drawerProps && <SpanDrawer {...drawerProps} />}
-			</div>
+			<TracesTable
+				data={rows}
+				columns={columns}
+				columnStorageKey={LOCALSTORAGE.TRACES_LIST_COLUMNS}
+				panelType="LIST"
+				getRowHref={getTraceLink}
+				isLoading={isLoading}
+				isFetching={isFetching}
+				isError={isError}
+				error={error}
+				isFilterApplied={isFilterApplied}
+				onColumnOrderChange={handleColumnOrderChange}
+				onColumnRemove={config?.addColumn?.onRemove}
+			/>
 		</div>
 	);
 }

frontend/src/container/TracesExplorer/SpanDrawer/SpanDrawer.tsx

@@ -1,112 +0,0 @@
-import { useMemo } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { ButtonGroup } from '@signozhq/ui/button-group';
-import { ChevronDown, ChevronUp, CornerUpRight } from '@signozhq/icons';
-import { useGetTraceSummary } from 'api/generated/services/tracedetail';
-import { HeaderAction } from 'components/DetailsPanel';
-import type { UseRowNavigationResult } from 'components/TanStackTableView/useRowNavigation';
-import { getTraceLink } from 'container/TracesExplorer/ListView/utils';
-import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
-import { SpanDetailVariant } from 'pages/TraceDetailsV3/SpanDetailsPanel/constants';
-import SpanDetailsPanel from 'pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel';
-import { openInNewTab } from 'utils/navigation';
-
-import { useArrowKeyNavigation } from './useArrowKeyNavigation';
-import { toSpanV3 } from './utils';
-
-export type SpanDrawerProps = {
-	row: TracesTableRow | null;
-	onClose: () => void;
-	navigation: UseRowNavigationResult;
-};
-
-function SpanDrawer({
-	row,
-	onClose,
-	navigation,
-}: SpanDrawerProps): JSX.Element {
-	const { goToPrev, goToNext, isPrevDisabled, isNextDisabled } = navigation;
-	const isOpen = row !== null;
-
-	useArrowKeyNavigation({ enabled: isOpen, onPrev: goToPrev, onNext: goToNext });
-
-	const panelState = useMemo(
-		() => ({ isOpen, open: (): void => {}, close: onClose }),
-		[isOpen, onClose],
-	);
-
-	const headerActions = useMemo((): HeaderAction[] => {
-		if (!row) {
-			return [];
-		}
-		return [
-			{
-				key: 'view-full-trace',
-				component: (
-					<Button
-						variant="outlined"
-						color="secondary"
-						size="md"
-						prefix={<CornerUpRight />}
-						onClick={(): void => openInNewTab(getTraceLink(row))}
-						testId="span-drawer-view-full-trace"
-					>
-						View full trace
-					</Button>
-				),
-			},
-			{
-				key: 'nav',
-				component: (
-					<ButtonGroup
-						variant="outlined"
-						color="secondary"
-						size="md"
-						testId="span-drawer-nav"
-						items={[
-							{
-								value: 'prev',
-								icon: <ChevronUp />,
-								ariaLabel: 'Previous span',
-								onClick: goToPrev,
-								disabled: isPrevDisabled,
-								disabledTooltip: 'No previous span on this page',
-							},
-							{
-								value: 'next',
-								icon: <ChevronDown />,
-								ariaLabel: 'Next span',
-								onClick: goToNext,
-								disabled: isNextDisabled,
-								disabledTooltip: 'No next span on this page',
-							},
-						]}
-					/>
-				),
-			},
-		];
-	}, [row, goToPrev, goToNext, isPrevDisabled, isNextDisabled]);
-
-	const span = useMemo(() => (row ? toSpanV3(row) : undefined), [row]);
-
-	const traceId = span?.trace_id ?? '';
-	const { data: traceSummary, isLoading: isTraceBoundsLoading } =
-		useGetTraceSummary(
-			{ traceID: traceId },
-			{ query: { enabled: !!traceId, retry: false } },
-		);
-
-	return (
-		<SpanDetailsPanel
-			panelState={panelState}
-			selectedSpan={span}
-			variant={SpanDetailVariant.DRAWER}
-			headerActions={headerActions}
-			traceStartTime={traceSummary?.data?.startTimestampMillis}
-			traceEndTime={traceSummary?.data?.endTimestampMillis}
-			isTraceBoundsLoading={isTraceBoundsLoading}
-		/>
-	);
-}
-
-export default SpanDrawer;

frontend/src/container/TracesExplorer/SpanDrawer/__tests__/useArrowKeyNavigation.test.ts

@@ -1,39 +0,0 @@
-import { renderHook } from '@testing-library/react';
-
-import { useArrowKeyNavigation } from '../useArrowKeyNavigation';
-
-const pressArrowDown = ({ handled }: { handled: boolean }): void => {
-	const event = new KeyboardEvent('keydown', {
-		key: 'ArrowDown',
-		bubbles: true,
-		cancelable: true,
-	});
-	if (handled) {
-		event.preventDefault();
-	}
-	document.body.dispatchEvent(event);
-};
-
-describe('useArrowKeyNavigation', () => {
-	it('steps to the next span on ArrowDown', () => {
-		const onNext = jest.fn();
-		renderHook(() =>
-			useArrowKeyNavigation({ enabled: true, onPrev: jest.fn(), onNext }),
-		);
-
-		pressArrowDown({ handled: false });
-
-		expect(onNext).toHaveBeenCalledTimes(1);
-	});
-
-	it('ignores a key that a focused menu already handled', () => {
-		const onNext = jest.fn();
-		renderHook(() =>
-			useArrowKeyNavigation({ enabled: true, onPrev: jest.fn(), onNext }),
-		);
-
-		pressArrowDown({ handled: true });
-
-		expect(onNext).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/TracesExplorer/SpanDrawer/__tests__/useSpanDrawer.test.ts

@@ -1,35 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import remove from 'api/browser/localstorage/remove';
-import set from 'api/browser/localstorage/set';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
-
-import { useSpanDrawer } from '../useSpanDrawer';
-
-const rows: TracesTableRow[] = [{ id: 'span-a' }, { id: 'span-b' }];
-
-describe('useSpanDrawer', () => {
-	beforeEach(() => {
-		set(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED, 'true');
-	});
-
-	afterEach(() => {
-		remove(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED);
-	});
-
-	it('does not reopen a span that a refetch dropped and a later one brings back', () => {
-		const { result, rerender } = renderHook(
-			({ current }: { current: TracesTableRow[] }) => useSpanDrawer(current),
-			{ initialProps: { current: rows } },
-		);
-
-		act(() => result.current.tableProps.onRowClick?.(rows[1]));
-		expect(result.current.drawerProps?.row).toBe(rows[1]);
-
-		rerender({ current: [rows[0]] });
-		expect(result.current.drawerProps?.row).toBeNull();
-
-		rerender({ current: rows });
-		expect(result.current.drawerProps?.row).toBeNull();
-	});
-});

frontend/src/container/TracesExplorer/SpanDrawer/__tests__/utils.test.ts

@@ -1,74 +0,0 @@
-import { toSpanV3 } from '../utils';
-
-describe('toSpanV3', () => {
-	const row = {
-		id: '772c4d29dd9076ac',
-		span_id: '772c4d29dd9076ac',
-		timestamp: '2024-07-19T08:39:58.735Z',
-		resource: { 'service.name': 'frontend' },
-		events: [
-			{
-				name: 'exception',
-				timeUnixNano: 1721378398735000000,
-				attributes: { 'exception.type': 'Error' },
-			},
-		],
-		links: [{ traceId: 'a364a8e15af3e9a8', spanId: '5704353737b6778e' }],
-	};
-
-	it('reshapes a list row into the span the details panel reads', () => {
-		const span = toSpanV3(row);
-
-		expect(span.timestamp).toBe(Date.UTC(2024, 6, 19, 8, 39, 58, 735));
-		expect(span['service.name']).toBe('frontend');
-		expect(span.events).toStrictEqual([
-			{
-				name: 'exception',
-				timeUnixNano: 1721378398735000000,
-				attributeMap: { 'exception.type': 'Error' },
-				isError: false,
-			},
-		]);
-		expect((span as unknown as { references: unknown }).references).toStrictEqual(
-			row.links,
-		);
-	});
-
-	it('drops the parent from the linked spans', () => {
-		const link = { traceId: 'a364a8e15af3e9a8', spanId: '5704353737b6778e' };
-		const parent = { traceId: '1f2e3d4c5b6a7980', spanId: '0aa1bb2cc3dd4ee5' };
-		const span = toSpanV3({
-			...row,
-			trace_id: parent.traceId,
-			parent_span_id: parent.spanId,
-			links: [parent, link, { ...parent, traceId: link.traceId }],
-		});
-
-		expect((span as unknown as { references: unknown }).references).toStrictEqual(
-			[link, { ...parent, traceId: link.traceId }],
-		);
-	});
-
-	it('drops the empty parent ref of a root span', () => {
-		const span = toSpanV3({
-			...row,
-			trace_id: 'a364a8e15af3e9a8',
-			parent_span_id: '',
-			links: [{ traceId: 'a364a8e15af3e9a8' }],
-		});
-
-		expect((span as unknown as { references: unknown }).references).toStrictEqual(
-			[],
-		);
-	});
-
-	it('defaults missing events, links and service name', () => {
-		const span = toSpanV3({ id: 'x', timestamp: row.timestamp });
-
-		expect(span.events).toStrictEqual([]);
-		expect(span['service.name']).toBe('');
-		expect((span as unknown as { references: unknown }).references).toStrictEqual(
-			[],
-		);
-	});
-});

frontend/src/container/TracesExplorer/SpanDrawer/useArrowKeyNavigation.ts

@@ -1,46 +0,0 @@
-import { useEffect } from 'react';
-
-const EDITABLE_TARGET = 'input, textarea, [contenteditable="true"], .cm-editor';
-
-type UseArrowKeyNavigationParams = {
-	enabled: boolean;
-	onPrev: () => void;
-	onNext: () => void;
-};
-
-export function useArrowKeyNavigation({
-	enabled,
-	onPrev,
-	onNext,
-}: UseArrowKeyNavigationParams): void {
-	useEffect(() => {
-		if (!enabled) {
-			return undefined;
-		}
-
-		const handleKeyDown = (e: KeyboardEvent): void => {
-			// A focused menu or listbox already used the key.
-			if (e.defaultPrevented) {
-				return;
-			}
-			if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
-				return;
-			}
-			if (e.target instanceof Element && e.target.closest(EDITABLE_TARGET)) {
-				return;
-			}
-			if (e.key === 'ArrowUp') {
-				e.preventDefault();
-				onPrev();
-			} else if (e.key === 'ArrowDown') {
-				e.preventDefault();
-				onNext();
-			}
-		};
-
-		document.addEventListener('keydown', handleKeyDown);
-		return (): void => {
-			document.removeEventListener('keydown', handleKeyDown);
-		};
-	}, [enabled, onPrev, onNext]);
-}

frontend/src/container/TracesExplorer/SpanDrawer/useSpanDrawer.ts

@@ -1,87 +0,0 @@
-import { PointerEvent, useCallback, useEffect, useMemo, useState } from 'react';
-import { useRowNavigation } from 'components/TanStackTableView/useRowNavigation';
-import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
-import type { TracesTableProps } from 'container/TracesExplorer/TracesTable/TracesTable';
-import { useCloseOnOutsidePress } from 'hooks/useCloseOnOutsidePress';
-
-import type { SpanDrawerProps } from './SpanDrawer';
-import { isSpanDrawerEnabled } from './utils';
-
-type ActiveSpan = { id: string; index: number };
-
-type UseSpanDrawerResult = {
-	tableProps: Pick<
-		TracesTableProps,
-		'onRowClick' | 'isRowActive' | 'activeRowIndex'
-	>;
-	/** Null while the drawer flag is off. */
-	drawerProps: SpanDrawerProps | null;
-	/** `onPointerDownCapture` for the area a press keeps the drawer open in. */
-	onPressInside: (event: PointerEvent) => void;
-};
-
-export function useSpanDrawer(rows: TracesTableRow[]): UseSpanDrawerResult {
-	const [isEnabled] = useState(isSpanDrawerEnabled);
-	// The index lets navigation step past a duplicate span; the id survives a refetch.
-	const [activeSpan, setActiveSpan] = useState<ActiveSpan | null>(null);
-
-	const activeRowIndex = useMemo(() => {
-		if (!activeSpan) {
-			return -1;
-		}
-		return rows[activeSpan.index]?.id === activeSpan.id
-			? activeSpan.index
-			: rows.findIndex((row) => row.id === activeSpan.id);
-	}, [rows, activeSpan]);
-
-	const isRowActive = useCallback(
-		(row: TracesTableRow): boolean => row === rows[activeRowIndex],
-		[rows, activeRowIndex],
-	);
-
-	const handleNavigate = useCallback(
-		(row: TracesTableRow, index: number): void => {
-			setActiveSpan({ id: row.id, index });
-		},
-		[],
-	);
-
-	const selectRow = useCallback(
-		(row: TracesTableRow): void => handleNavigate(row, rows.indexOf(row)),
-		[handleNavigate, rows],
-	);
-
-	const clearActiveSpan = useCallback((): void => setActiveSpan(null), []);
-
-	// A refetch can drop the open span; forget it so a later page can't reopen it.
-	useEffect(() => {
-		if (activeSpan && activeRowIndex === -1) {
-			setActiveSpan(null);
-		}
-	}, [activeSpan, activeRowIndex]);
-
-	const onPressInside = useCloseOnOutsidePress(
-		isEnabled && activeRowIndex !== -1,
-		clearActiveSpan,
-	);
-
-	const navigation = useRowNavigation({
-		rows,
-		activeIndex: activeRowIndex,
-		onNavigate: handleNavigate,
-	});
-
-	if (!isEnabled) {
-		return { tableProps: {}, drawerProps: null, onPressInside };
-	}
-
-	return {
-		tableProps: { onRowClick: selectRow, isRowActive, activeRowIndex },
-		drawerProps: {
-			row: rows[activeRowIndex] ?? null,
-			onClose: clearActiveSpan,
-			navigation,
-		},
-		onPressInside,
-	};
-}

frontend/src/container/TracesExplorer/SpanDrawer/utils.ts

@@ -1,46 +0,0 @@
-import get from 'api/browser/localstorage/get';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-
-/** Off by default; set `TRACES_SPAN_DRAWER_ENABLED` to `true` in localStorage to try it. */
-export const isSpanDrawerEnabled = (): boolean =>
-	get(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED) === 'true';
-
-type ListSpanEvent = {
-	name: string;
-	timeUnixNano: number;
-	attributes?: Record<string, string>;
-	isError?: boolean;
-};
-
-type ListSpanLink = { traceId: string; spanId: string };
-
-/**
- * The list API returns a span in a different shape from the trace API the
- * details panel was built on: an ISO timestamp, `attributes` on events, and
- * `links` in place of `references`.
- */
-export const toSpanV3 = (row: TracesTableRow): SpanV3 => {
-	const resource = (row.resource ?? {}) as Record<string, string>;
-	const events = (row.events ?? []) as ListSpanEvent[];
-	const links = (row.links ?? []) as ListSpanLink[];
-
-	return {
-		...row,
-		timestamp: new Date(row.timestamp as string).getTime(),
-		'service.name': resource['service.name'] ?? '',
-		events: events.map(({ attributes, isError, ...event }) => ({
-			...event,
-			attributeMap: attributes ?? {},
-			isError: isError ?? false,
-		})),
-		// The list API drops `refType`, so the parent ref is matched by id. A root
-		// span's parent ref has no span id.
-		references: links.filter(
-			(link) =>
-				!!link.spanId &&
-				(link.spanId !== row.parent_span_id || link.traceId !== row.trace_id),
-		),
-	} as unknown as SpanV3;
-};

frontend/src/container/TracesExplorer/TracesTable/TracesTable.tsx

@@ -24,10 +24,6 @@ export type TracesTableProps = {
 	panelType: PanelTypeKeys;
 	/** Builds the trace-detail href for a row; drives row click + cmd/ctrl-click. */
 	getRowHref: (row: TracesTableRow) => string;
-	/** Replaces the default row click, which opens the trace detail page. */
-	onRowClick?: (row: TracesTableRow) => void;
-	isRowActive?: (row: TracesTableRow) => boolean;
-	activeRowIndex?: number;
 	isLoading: boolean;
 	isFetching: boolean;
 	isError: boolean;
@@ -45,9 +41,6 @@ function TracesTable({
 	respectColumnOrder = false,
 	panelType,
 	getRowHref,
-	onRowClick,
-	isRowActive,
-	activeRowIndex,
 	isLoading,
 	isFetching,
 	isError,
@@ -64,13 +57,9 @@ function TracesTable({
 
 	const handleRowClick = useCallback(
 		(row: TracesTableRow): void => {
-			if (onRowClick) {
-				onRowClick(row);
-				return;
-			}
 			navigate(getRowHref(row));
 		},
-		[onRowClick, navigate, getRowHref],
+		[navigate, getRowHref],
 	);
 
 	const handleRowClickNewTab = useCallback(
@@ -108,8 +97,6 @@ function TracesTable({
 						onColumnRemove={onColumnRemove}
 						onRowClick={handleRowClick}
 						onRowClickNewTab={handleRowClickNewTab}
-						isRowActive={isRowActive}
-						activeRowIndex={activeRowIndex}
 						getRowTestId={(row): string => `traces-table-row-${row.id}`}
 					/>
 				</div>
@@ -121,9 +108,6 @@ function TracesTable({
 TracesTable.defaultProps = {
 	columnStorageKey: undefined,
 	respectColumnOrder: false,
-	onRowClick: undefined,
-	isRowActive: undefined,
-	activeRowIndex: undefined,
 	onColumnOrderChange: undefined,
 	onColumnRemove: undefined,
 	cellTypographySize: 'medium',

frontend/src/container/WidgetCard/Card/FullView/contants.ts

@@ -28,6 +28,7 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 		TRACE: false,
 		BAR: true,
 		AREA: true,
+		SCATTER: false,
 		PIE: false,
 		HISTOGRAM: false,
 		HEATMAP: false,

frontend/src/container/WidgetCard/Panels/constants.ts

@@ -16,6 +16,7 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.TRACE]: null,
 	// Dashboards v2 renders this kind; the V1 wrapper map is never asked for it.
 	[PANEL_TYPES.TEXT]: null,
+	[PANEL_TYPES.SCATTER]: null,
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
 	[PANEL_TYPES.BAR]: BarPanel,

frontend/src/hooks/__tests__/useCloseOnOutsidePress.test.tsx

@@ -1,108 +0,0 @@
-import { createPortal } from 'react-dom';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { useCloseOnOutsidePress } from '../useCloseOnOutsidePress';
-
-function Harness({
-	enabled = true,
-	onClose,
-}: {
-	enabled?: boolean;
-	onClose: () => void;
-}): JSX.Element {
-	const onPressInside = useCloseOnOutsidePress(enabled, onClose);
-	return (
-		<>
-			<div onPointerDownCapture={onPressInside}>
-				<button type="button" data-testid="inside">
-					inside
-				</button>
-				<button
-					type="button"
-					data-testid="inside-stops"
-					onPointerDown={(e): void => e.stopPropagation()}
-				>
-					inside, stops propagation
-				</button>
-				{createPortal(
-					<button type="button" data-testid="inside-portal">
-						portal
-					</button>,
-					document.body,
-				)}
-			</div>
-			<button type="button" data-testid="outside">
-				outside
-			</button>
-			<button
-				type="button"
-				data-testid="outside-stops"
-				onPointerDown={(e): void => e.stopPropagation()}
-			>
-				outside, stops propagation
-			</button>
-		</>
-	);
-}
-
-const flush = (): Promise<void> =>
-	new Promise((resolve) => {
-		setTimeout(resolve);
-	});
-
-describe('useCloseOnOutsidePress', () => {
-	it('closes on a press outside', async () => {
-		const onClose = jest.fn();
-		render(<Harness onClose={onClose} />);
-
-		await userEvent.click(screen.getByTestId('outside'));
-		await flush();
-
-		expect(onClose).toHaveBeenCalledTimes(1);
-	});
-
-	it('stays open on a press inside, portals included', async () => {
-		const onClose = jest.fn();
-		render(<Harness onClose={onClose} />);
-
-		await userEvent.click(screen.getByTestId('inside'));
-		await userEvent.click(screen.getByTestId('inside-portal'));
-		await flush();
-
-		expect(onClose).not.toHaveBeenCalled();
-	});
-
-	it('closes when the outside element stops propagation', async () => {
-		const onClose = jest.fn();
-		render(<Harness onClose={onClose} />);
-
-		await userEvent.click(screen.getByTestId('outside-stops'));
-		await flush();
-
-		expect(onClose).toHaveBeenCalledTimes(1);
-	});
-
-	it('closes on the first outside press after an inside press stops propagation', async () => {
-		const onClose = jest.fn();
-		render(<Harness onClose={onClose} />);
-
-		await userEvent.click(screen.getByTestId('inside-stops'));
-		await flush();
-		expect(onClose).not.toHaveBeenCalled();
-
-		await userEvent.click(screen.getByTestId('outside'));
-		await flush();
-		expect(onClose).toHaveBeenCalledTimes(1);
-	});
-
-	it('does nothing while disabled', async () => {
-		const onClose = jest.fn();
-		render(<Harness enabled={false} onClose={onClose} />);
-
-		await userEvent.click(screen.getByTestId('outside'));
-		await flush();
-
-		expect(onClose).not.toHaveBeenCalled();
-	});
-});

frontend/src/hooks/useCloseOnOutsidePress.ts

@@ -1,51 +0,0 @@
-import {
-	PointerEvent as ReactPointerEvent,
-	useCallback,
-	useEffect,
-	useRef,
-} from 'react';
-
-/**
- * Calls `onClose` on any press outside the elements given the returned handler as
- * `onPointerDownCapture`. Menus and dialogs rendered in portals still count as
- * inside: React events follow the component tree.
- *
- * The document listener runs in the capture phase, so an outside element that
- * stops propagation still closes. It runs before React marks the press, so the
- * check waits for the dispatch to finish.
- */
-export function useCloseOnOutsidePress(
-	enabled: boolean,
-	onClose: () => void,
-): (event: ReactPointerEvent) => void {
-	const insidePress = useRef<Event | null>(null);
-	const onCloseRef = useRef(onClose);
-	onCloseRef.current = onClose;
-
-	useEffect(() => {
-		if (!enabled) {
-			return undefined;
-		}
-		const timeouts = new Set<ReturnType<typeof setTimeout>>();
-
-		const handlePointerDown = (event: PointerEvent): void => {
-			const timeout = setTimeout(() => {
-				timeouts.delete(timeout);
-				if (insidePress.current !== event) {
-					onCloseRef.current();
-				}
-			});
-			timeouts.add(timeout);
-		};
-
-		document.addEventListener('pointerdown', handlePointerDown, true);
-		return (): void => {
-			document.removeEventListener('pointerdown', handlePointerDown, true);
-			timeouts.forEach(clearTimeout);
-		};
-	}, [enabled]);
-
-	return useCallback((event: ReactPointerEvent): void => {
-		insidePress.current = event.nativeEvent;
-	}, []);
-}

frontend/src/lib/query/__tests__/handleQueryChange.test.ts

@@ -76,3 +76,39 @@ describe('handleQueryChange bucket options', () => {
 		});
 	});
 });
+
+describe('handleQueryChange trace operator', () => {
+	function queryWithTraceOperator(): Query {
+		const base = initialQueriesMap[DataSource.TRACES];
+		return {
+			...base,
+			builder: {
+				...base.builder,
+				queryTraceOperator: [
+					{ ...base.builder.queryData[0], queryName: 'T1', expression: 'A => B' },
+				],
+			},
+		};
+	}
+
+	// The API rejects a trace operator on a scatter plot, so the switch sheds it.
+	it('drops the trace operator when switching to a scatter plot', () => {
+		const result = handleQueryChange(
+			PANEL_TYPES.SCATTER,
+			queryWithTraceOperator(),
+			PANEL_TYPES.TABLE,
+		);
+
+		expect(result.builder.queryTraceOperator).toStrictEqual([]);
+	});
+
+	it('keeps the trace operator when switching to a table', () => {
+		const result = handleQueryChange(
+			PANEL_TYPES.TABLE,
+			queryWithTraceOperator(),
+			PANEL_TYPES.TIME_SERIES,
+		);
+
+		expect(result.builder.queryTraceOperator).toHaveLength(1);
+	});
+});

frontend/src/lib/query/panelQuery.ts

@@ -165,7 +165,7 @@ export function handleQueryChange(
 				newPanelType,
 			),
 			queryTraceOperator:
-				newPanelType === PANEL_TYPES.LIST
+				newPanelType === PANEL_TYPES.LIST || newPanelType === PANEL_TYPES.SCATTER
 					? []
 					: supersetQuery.builder.queryTraceOperator,
 		},

frontend/src/lib/query/panelTypeDataSourceFormValuesMap.ts

@@ -14,6 +14,7 @@ export type PartialPanelTypes = {
 	[PANEL_TYPES.AREA]: 'area';
 	[PANEL_TYPES.VALUE]: 'value';
 	[PANEL_TYPES.PIE]: 'pie';
+	[PANEL_TYPES.SCATTER]: 'scatter';
 	[PANEL_TYPES.HISTOGRAM]: 'histogram';
 	[PANEL_TYPES.HEATMAP]: 'heatmap';
 };
@@ -150,6 +151,7 @@ export const panelTypeDataSourceFormValuesMap: Record<
 	[PANEL_TYPES.HEATMAP]: bySource(HEATMAP, HEATMAP_METRICS),
 	[PANEL_TYPES.TABLE]: bySource(SERIES, SCALAR_METRICS),
 	[PANEL_TYPES.PIE]: bySource(SERIES, SCALAR_METRICS),
+	[PANEL_TYPES.SCATTER]: bySource(SERIES, SCALAR_METRICS),
 	[PANEL_TYPES.VALUE]: bySource(SINGLE_VALUE, SINGLE_VALUE_METRICS),
 	[PANEL_TYPES.LIST]: bySource(RAW_ROWS, RAW_ROWS_METRICS),
 };

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

@@ -0,0 +1,94 @@
+// Sections own the padding so the footer spans edge to edge.
+.container {
+	// Same inset as the heatmap tooltip.
+	--gutter: 14px;
+
+	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: 220px;
+
+	&.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-3);
+	padding: var(--spacing-6) var(--gutter);
+}
+
+// Matches the legend row's marker.
+.marker {
+	box-sizing: border-box;
+	width: 12px;
+	height: 12px;
+	border: 1.5px solid;
+	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;
+}
+
+.rows {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	padding: var(--spacing-5) var(--gutter);
+}
+
+.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,139 @@
+import { useMemo } from 'react';
+import cx from 'classnames';
+import { Pin } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+
+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,
+	resolvePointGroupValues,
+	decimalPrecision,
+	isPinned,
+	dismiss,
+	renderTooltipFooter,
+}: ScatterTooltipProps): JSX.Element | null {
+	const hoveredPoint = useMemo(
+		() => resolveHoveredPoint(uPlotInstance, seriesIndex, dataIndexes),
+		[uPlotInstance, seriesIndex, dataIndexes],
+	);
+
+	const rows = useMemo(
+		() =>
+			hoveredPoint
+				? buildChannelRows(hoveredPoint, channels, decimalPrecision)
+				: [],
+		[hoveredPoint, channels, decimalPrecision],
+	);
+
+	const labels = useMemo(
+		() =>
+			hoveredPoint
+				? (resolvePointGroupValues?.(
+						hoveredPoint.seriesIndex,
+						hoveredPoint.dataIndex,
+					) ?? [])
+				: [],
+		[hoveredPoint, resolvePointGroupValues],
+	);
+
+	if (!hoveredPoint) {
+		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: hoveredPoint.color,
+						borderColor: hoveredPoint.color,
+					}}
+				/>
+				<Typography.Text
+					as="span"
+					className={Styles.title}
+					title={hoveredPoint.label}
+					testId="scatter-tooltip-title"
+				>
+					{hoveredPoint.label}
+				</Typography.Text>
+				{isPinned && (
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="sm"
+						prefix={<Pin size={12} />}
+						testId="scatter-tooltip-status"
+					>
+						Pinned
+					</Button>
+				)}
+			</div>
+
+			<span className={Styles.divider} />
+
+			<div className={Styles.rows}>
+				{rows.map((row) => (
+					<div
+						key={row.label}
+						className={Styles.row}
+						data-testid="scatter-tooltip-row"
+					>
+						<Typography.Text as="span" className={Styles.rowLabel}>
+							{row.label}
+						</Typography.Text>
+						<Typography.Text as="span" className={Styles.rowValue}>
+							{row.value}
+						</Typography.Text>
+					</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"
+							>
+								<Typography.Text
+									as="span"
+									className={Styles.rowLabel}
+									title={label.key}
+								>
+									{label.key}
+								</Typography.Text>
+								<Typography.Text
+									as="span"
+									className={Styles.rowValue}
+									title={label.value}
+								>
+									{label.value}
+								</Typography.Text>
+							</div>
+						))}
+					</div>
+				</>
+			)}
+
+			{renderTooltipFooter?.({ isPinned, dismiss })}
+		</div>
+	);
+}

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

@@ -0,0 +1,107 @@
+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);
+	});
+
+	it('leaves out a size row that repeats the x row', () => {
+		const rows = buildChannelRows(
+			{ ...point, size: point.x },
+			{
+				x: { label: 'A.count()' },
+				y: { label: 'p99' },
+				size: { label: 'A.count()' },
+			},
+		);
+
+		expect(rows.map((row) => row.label)).toStrictEqual(['A.count()', 'p99']);
+	});
+});

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

@@ -0,0 +1,97 @@
+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) {
+		const sizeRow = {
+			label: channels.size.label,
+			value: formatChannel(point.size, channels.size, decimalPrecision),
+		};
+		// Size bound to the X or Y column would only repeat that row.
+		if (
+			!rows.some(
+				(row) => row.label === sizeRow.label && row.value === sizeRow.value,
+			)
+		) {
+			rows.push(sizeRow);
+		}
+	}
+	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`. */
+	resolvePointGroupValues?: (
+		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
 	 */
@@ -59,31 +69,47 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 
 	/**
 	 * Build values formatter for X-axis (time)
+	 * A non-time x axis with a unit or precision formats like a value axis.
 	 */
 	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)
+	 * Blanks splits outside the scale; uPlot's asinh splits always include ±threshold.
 	 */
-	private buildYAxisValuesFormatter(): uPlot.Axis.Values {
-		const { yAxisUnit, decimalPrecision } = this.props;
+	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 +127,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		return scaleKey === 'x'
 			? this.buildXAxisValuesFormatter()
 			: scaleKey === 'y'
-				? this.buildYAxisValuesFormatter()
+				? this.buildValueAxisFormatter()
 				: undefined;
 	}
 
@@ -149,10 +175,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 +205,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 +220,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

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

@@ -88,6 +88,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) {
@@ -123,7 +125,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			return { paths: pathBuilder };
 		}
 
-		if (drawStyle === DrawStyle.Points) {
+		if (isMarkerOnlyDrawStyle(drawStyle)) {
 			return { paths: (): null => null };
 		}
 
@@ -195,6 +197,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;
 	}
 
@@ -226,6 +232,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			show = true,
 			metric,
 			partialTimestamps,
+			facets,
 		} = this.props;
 
 		const resolvedLineColor = this.getLineColor();
@@ -255,6 +262,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			points: Object.keys(pointsConfig).length > 0 ? pointsConfig : undefined,
 			metric,
 			...(partialTimestamps?.size ? { partialTimestamps } : {}),
+			...(facets && { facets }),
 		};
 	}
 }
@@ -267,6 +275,11 @@ interface PathBuilders {
 	[key: string]: Series.PathBuilder;
 }
 
+/** Draws standalone markers, never a connecting line. */
+function isMarkerOnlyDrawStyle(drawStyle: DrawStyle): boolean {
+	return drawStyle === DrawStyle.Points || drawStyle === DrawStyle.Scatter;
+}
+
 /**
  * Get path builder based on draw style and interpolation
  */

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
@@ -667,3 +672,14 @@ describe('UPlotConfigBuilder stacking', () => {
 		expect(builder.getConfig().hooks?.draw).toHaveLength(1);
 	});
 });
+
+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

@@ -425,3 +425,39 @@ describe('UPlotSeriesBuilder', () => {
 		);
 	});
 });
+
+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

@@ -80,6 +80,10 @@ export interface AxisProps {
 	values?: uPlot.Axis.Values;
 	/** Explicit axis splits, overriding the default tick calculation. */
 	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 y axis 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,13 @@ export interface AxisProps {
 export enum DistributionType {
 	Linear = 'linear',
 	Logarithmic = 'logarithmic',
+	/** arcsinh: linear within ±`asinhThreshold`, log beyond; places zero and negatives. */
+	SymmetricLog = 'symlog',
+}
+
+export enum PlotMode {
+	Aligned = 1,
+	Faceted = 2,
 }
 
 export interface ScaleProps {
@@ -125,6 +136,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 +159,7 @@ export enum DrawStyle {
 	Points = 'points',
 	Bar = 'bar',
 	Histogram = 'histogram',
+	Scatter = 'scatter',
 }
 
 export enum LineInterpolation {
@@ -232,6 +246,8 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	metric?: { [key: string]: string };
 	/** Epoch-second x values whose bucket doesn't cover a full step; marked with a dotted ring. */
 	partialTimestamps?: Set<number>;
+	/** 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/hooks/__tests__/useThresholdsDrawHook.test.ts

@@ -0,0 +1,56 @@
+import type uPlot from 'uplot';
+
+import { thresholdsDrawHook } from '../useThresholdsDrawHook';
+
+function mockPlot(ori: 0 | 1): { plot: uPlot; ctx: Record<string, jest.Mock> } {
+	const ctx = {
+		save: jest.fn(),
+		restore: jest.fn(),
+		setLineDash: jest.fn(),
+		beginPath: jest.fn(),
+		moveTo: jest.fn(),
+		lineTo: jest.fn(),
+		stroke: jest.fn(),
+		fillText: jest.fn(),
+		measureText: jest.fn(() => ({ width: 40 })),
+	};
+	const plot = {
+		ctx: { ...ctx, canvas: { height: 300 } },
+		bbox: { left: 10, top: 20, width: 400, height: 200 },
+		scales: { s: { ori } },
+		valToPos: (): number => 100,
+	} as unknown as uPlot;
+	return { plot, ctx };
+}
+
+const draw = (plot: uPlot): void =>
+	(
+		thresholdsDrawHook({
+			scaleKey: 's',
+			thresholds: [{ thresholdValue: 5, thresholdLabel: 'SLO' }],
+		}) as (u: uPlot) => void
+	)(plot);
+
+describe('thresholdsDrawHook', () => {
+	it('draws a horizontal line across a vertical scale', () => {
+		const { plot, ctx } = mockPlot(1);
+		draw(plot);
+
+		expect(ctx.moveTo).toHaveBeenCalledWith(10, 100);
+		expect(ctx.lineTo).toHaveBeenCalledWith(410, 100);
+		expect(ctx.fillText).toHaveBeenCalledWith('SLO', 350, 85);
+	});
+
+	it('draws a vertical line across a horizontal scale', () => {
+		const { plot, ctx } = mockPlot(0);
+		draw(plot);
+
+		expect(ctx.moveTo).toHaveBeenCalledWith(100, 20);
+		expect(ctx.lineTo).toHaveBeenCalledWith(100, 220);
+		expect(ctx.fillText).toHaveBeenCalledWith(
+			'SLO',
+			expect.any(Number),
+			expect.any(Number),
+		);
+	});
+});

frontend/src/lib/uPlotV2/hooks/useThresholdsDrawHook.ts

@@ -29,13 +29,42 @@ export function thresholdsDrawHook(
 
 			const scaleVal = u.valToPos(Number(yValue), scaleKey, true);
 
+			ctx.strokeStyle = color;
+
+			// A horizontal scale (e.g. a scatter plot's x) takes a vertical line.
+			if (u.scales[scaleKey]?.ori === 0) {
+				const x = Math.round(scaleVal);
+				const top = Math.round(u.bbox.top);
+
+				ctx.beginPath();
+				ctx.moveTo(x, top);
+				ctx.lineTo(x, Math.round(u.bbox.top + u.bbox.height));
+				ctx.stroke();
+
+				if (threshold.thresholdLabel) {
+					const gap = 6 * uPlot.pxRatio;
+					const textWidth = ctx.measureText(threshold.thresholdLabel).width;
+					const fitsRight = x + gap + textWidth <= u.bbox.left + u.bbox.width;
+					// uPlot leaves the last axis's text alignment on the context.
+					ctx.save();
+					ctx.fillStyle = color;
+					ctx.textAlign = 'left';
+					ctx.textBaseline = 'top';
+					ctx.fillText(
+						threshold.thresholdLabel,
+						fitsRight ? x + gap : x - gap - textWidth,
+						top + gap,
+					);
+					ctx.restore();
+				}
+				continue;
+			}
+
 			const x0 = Math.round(u.bbox.left);
 			const y0 = Math.round(scaleVal);
 			const x1 = Math.round(u.bbox.left + u.bbox.width);
 			const y1 = Math.round(scaleVal);
 
-			ctx.strokeStyle = color;
-
 			ctx.beginPath();
 			ctx.moveTo(x0, y0);
 			ctx.lineTo(x1, y1);

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

@@ -0,0 +1,116 @@
+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();
+		// Inside the disc's bounding square, outside the disc.
+		expect(resolveHit(tree, 15.8, 15.8, 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,290 @@
+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;
+	});
+
+	let orient: jest.SpyInstance;
+
+	beforeEach(() => {
+		orient = jest
+			.spyOn(uPlot, 'orient')
+			.mockImplementation(orientWithIdentityScales);
+	});
+
+	afterEach(() => {
+		orient.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,89 @@
+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;
+}
+
+/**
+ * Diameter for a size-channel value. Grows the disc's area, not its width,
+ * linearly with the value, so a value twice as large reads as twice the ink.
+ */
+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);
+}
+
+/**
+ * The disc under the cursor, counting `tolerance` px beyond its edge as a hit.
+ * Where discs overlap, the one whose centre is closest wins; `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 dx = cx - (hit.x + hit.w / 2);
+			const dy = cy - (hit.y + hit.h / 2);
+			const distance = dx * dx + dy * dy;
+			const reach = hit.w / 2 + tolerance;
+			if (distance > reach * reach) {
+				return;
+			}
+			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,66 @@
+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('steps evenly through a range too narrow for two 1/2/5 splits', () => {
+		expect(splitsFor(7.6, 9.4)).toStrictEqual([8, 9]);
+		expect(splitsFor(8.12, 8.19)).toStrictEqual([
+			8.12, 8.13, 8.14, 8.15, 8.16, 8.17, 8.18, 8.19,
+		]);
+	});
+
+	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,64 @@
+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);
+		// A zero-size query exactly on both midlines.
+		expect(collect(tree, 50, 50, 0, 0).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,92 @@
+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];
+
+/** Decades finer than the range's own span that the fallback steps through. */
+const FALLBACK_STEP_DECADES = 3;
+
+/** Rounded through toPrecision so 0.1 × 3 noise can't fall outside [min, max]. */
+function roundSplit(value: number): number {
+	return Number(value.toPrecision(12));
+}
+
+/** Evenly stepped splits for a range too narrow to hold two 1/2/5 splits. */
+function narrowRangeSplits(min: number, max: number): number[] {
+	const coarsest = Math.floor(Math.log10(max - min));
+	for (
+		let exponent = coarsest;
+		exponent > coarsest - FALLBACK_STEP_DECADES;
+		exponent--
+	) {
+		const step = 10 ** exponent;
+		const first = Math.ceil(roundSplit(min / step));
+		const last = Math.floor(roundSplit(max / step));
+		if (last > first) {
+			return Array.from({ length: last - first + 1 }, (_, index) =>
+				roundSplit((first + index) * step),
+			);
+		}
+	}
+	return [];
+}
+
+/** 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) => {
+			const split = roundSplit(multiple * 10 ** exponent);
+			if (split >= min && split <= max) {
+				splits.push(split);
+			}
+		});
+	}
+	if (splits.length >= 2) {
+		return splits;
+	}
+	const narrow = narrowRangeSplits(min, max);
+	return narrow.length > splits.length ? narrow : 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,101 @@
+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;
+		// Inclusive, so a zero-size query on a midline still reaches a quadrant.
+		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.mocks.ts

@@ -0,0 +1,104 @@
+import type { Threshold } from 'lib/uPlotV2/hooks/types';
+
+import { ScatterAxisScale, type ScatterSeries } from './types';
+
+const SERVICES = [
+	'frontend',
+	'cart',
+	'checkout',
+	'payment',
+	'shipping',
+	'currency',
+	'email',
+	'recommendation',
+	'ads',
+	'product-catalog',
+];
+
+export type Shape = 'spread' | 'single' | 'sameX';
+
+export 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;
+	};
+}
+
+export 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 };
+	});
+}
+
+export const Y_THRESHOLDS: Threshold[] = [
+	{
+		thresholdValue: 300,
+		thresholdUnit: 'ms',
+		thresholdColor: '#E5484D',
+		thresholdLabel: 'p99 SLO',
+	},
+];
+
+export const X_THRESHOLDS: Threshold[] = [
+	{
+		thresholdValue: 60,
+		thresholdUnit: 'reqps',
+		thresholdColor: '#3E63DD',
+		thresholdLabel: 'Capacity',
+	},
+];

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

@@ -0,0 +1,160 @@
+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 { ScatterPointLabel } from 'lib/uPlotV2/plugins/ScatterPlugin/types';
+
+import Scatter from './Scatter';
+import {
+	buildSeries,
+	type ScatterStoryProps,
+	X_THRESHOLDS,
+	Y_THRESHOLDS,
+} from './Scatter.stories.mocks';
+import { ScatterAxisScale } from './types';
+import { buildScatterConfig, prepareScatterChartData } from './utils';
+
+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,
+					thresholds: thresholds ? X_THRESHOLDS : undefined,
+				},
+				y: {
+					unit: 'ms',
+					scale: yScale,
+					thresholds: thresholds ? Y_THRESHOLDS : undefined,
+				},
+				pointSize: { fixed: pointSize, min: 4, max: pointSize * 4 },
+				fillOpacity,
+			}),
+		[series, isDarkMode, xScale, yScale, pointSize, fillOpacity, thresholds],
+	);
+
+	const data = useMemo(() => prepareScatterChartData(series), [series]);
+
+	const resolvePointGroupValues = (
+		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' } }),
+				}}
+				resolvePointGroupValues={resolvePointGroupValues}
+				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' },
+};
+
+/** Labelled lines on both axes; each scale stretches to include its line. */
+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,
+		resolvePointGroupValues,
+		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,
+				resolvePointGroupValues,
+				decimalPrecision: rest.decimalPrecision,
+				canPinTooltip: rest.canPinTooltip,
+				renderTooltipFooter: rest.renderTooltipFooter,
+			};
+			return <ScatterTooltip {...tooltipProps} />;
+		},
+		[
+			customTooltip,
+			channels,
+			resolvePointGroupValues,
+			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__/axisDistribution.test.ts

@@ -0,0 +1,112 @@
+import { DistributionType } from 'lib/uPlotV2/config/types';
+
+import { resolveAxisDistribution } from '../axisDistribution';
+import { ScatterAxisScale } from '../types';
+
+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,
+			});
+		});
+	});
+});

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

@@ -0,0 +1,113 @@
+import type uPlot from 'uplot';
+
+import { ScatterAxisScale, type ScatterSeries } from '../types';
+import { buildScatterConfig } 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('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({
+			y: {
+				unit: 'ms',
+				thresholds: [{ thresholdValue: 300, thresholdUnit: 'ms' }],
+			},
+		}).getConfig();
+
+		expect(config.hooks?.draw).toHaveLength(1);
+		expect(build().getConfig().hooks?.draw).toBeUndefined();
+	});
+
+	it('registers one draw hook per axis with thresholds', () => {
+		const config = build({
+			x: { unit: 'reqps', thresholds: [{ thresholdValue: 15 }] },
+			y: { unit: 'ms', thresholds: [{ thresholdValue: 300 }] },
+		}).getConfig();
+
+		expect(config.hooks?.draw).toHaveLength(2);
+	});
+
+	it('stretches the x range to reach an x threshold', () => {
+		const config = build({
+			x: { unit: 'reqps', thresholds: [{ thresholdValue: 1000 }] },
+		}).getConfig();
+		const range = config.scales?.x?.range as uPlot.Range.Function;
+		const plot = { bbox: { width: 0, height: 0 } } as uPlot;
+		const [, max] = range(plot, 10, 30, 'x');
+
+		expect(max).toBeGreaterThanOrEqual(1000);
+	});
+});

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

@@ -0,0 +1,98 @@
+import { DistributionType } from 'lib/uPlotV2/config/types';
+import uPlot from 'uplot';
+
+import { createScatterRange } from '../scatterRange';
+import type { ScatterRangeOptions } from '../types';
+
+/** 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,51 @@
+import type uPlot from 'uplot';
+
+import type { ScatterSeries } from '../types';
+import { getCursorHit, prepareScatterChartData } 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();
+	});
+});

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

@@ -0,0 +1,130 @@
+import { DistributionType } from 'lib/uPlotV2/config/types';
+
+import { getScaleTransform } from './scatterRange';
+import { type AxisDistribution, ScatterAxisScale } from './types';
+
+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),
+				),
+			);
+	}
+}

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

@@ -0,0 +1,92 @@
+import { DistributionType } from 'lib/uPlotV2/config/types';
+import { DEFAULT_ASINH_THRESHOLD } from 'lib/uPlotV2/utils/scale';
+import uPlot from 'uplot';
+
+import type {
+	AxisDistribution,
+	ScaleTransform,
+	ScatterRangeOptions,
+} from './types';
+
+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;
+}
+
+/** 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/types.ts

@@ -0,0 +1,67 @@
+import type { PrecisionOption } from 'components/Graph/types';
+import type {
+	DistributionType,
+	SelectionPreferencesSource,
+} from 'lib/uPlotV2/config/types';
+import type { Threshold } from 'lib/uPlotV2/hooks/types';
+import type { ScatterPointSize } from 'lib/uPlotV2/plugins/ScatterPlugin/types';
+
+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;
+	/** Lines drawn across the plot at values on this axis. */
+	thresholds?: Threshold[];
+}
+
+export interface BuildScatterConfigArgs {
+	id: string;
+	series: ScatterSeries[];
+	isDarkMode: boolean;
+	x: ScatterAxisOptions;
+	y: ScatterAxisOptions;
+	pointSize?: ScatterPointSize;
+	/** 0–1. */
+	fillOpacity?: number;
+	colorMapping?: Record<string, string>;
+	decimalPrecision?: PrecisionOption;
+	selectionPreferencesSource?: SelectionPreferencesSource;
+	shouldSaveSelectionPreference?: boolean;
+}
+
+export interface AxisDistribution {
+	distribution: DistributionType;
+	asinhThreshold?: number;
+}
+
+export interface ScaleTransform {
+	forward: (value: number) => number;
+	inverse: (position: number) => number;
+}
+
+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;
+}

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

@@ -0,0 +1,209 @@
+import {
+	type AxisProps,
+	DistributionType,
+	DrawStyle,
+} from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import type { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
+import {
+	applyScatterPlugin,
+	createScatterPlugin,
+	SCATTER_FACETS,
+} from 'lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin';
+import {
+	DEFAULT_SCATTER_POINT_SIZE,
+	ScatterChartData,
+	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 { resolveAxisDistribution } from './axisDistribution';
+import { createScatterRange } from './scatterRange';
+import type {
+	AxisDistribution,
+	BuildScatterConfigArgs,
+	ScatterAxisOptions,
+	ScatterSeries,
+} from './types';
+
+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;
+
+/** 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;
+}
+
+/** 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 }
+		: {};
+}
+
+function getThresholdOptions(
+	scaleKey: 'x' | 'y',
+	{ thresholds, unit }: ScatterAxisOptions,
+): ThresholdsDrawHookOptions | undefined {
+	return thresholds && thresholds.length > 0
+		? { scaleKey, thresholds, yAxisUnit: unit }
+		: undefined;
+}
+
+export function buildScatterConfig({
+	id,
+	series,
+	isDarkMode,
+	x,
+	y,
+	pointSize = DEFAULT_SCATTER_POINT_SIZE,
+	fillOpacity,
+	colorMapping = {},
+	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 xSoftLimits = adjustSoftLimitsWithThresholds(
+		x.softMin ?? null,
+		x.softMax ?? null,
+		x.thresholds,
+		x.unit,
+	);
+	const ySoftLimits = adjustSoftLimitsWithThresholds(
+		y.softMin ?? null,
+		y.softMax ?? null,
+		y.thresholds,
+		y.unit,
+	);
+	const xDistribution = resolveAxisDistribution(
+		series.flatMap((entry) => entry.xs),
+		x.scale,
+		[xSoftLimits.softMin, xSoftLimits.softMax],
+	);
+	const yDistribution = resolveAxisDistribution(
+		series.flatMap((entry) => entry.ys),
+		y.scale,
+		[ySoftLimits.softMin, ySoftLimits.softMax],
+	);
+
+	const xThresholds = getThresholdOptions('x', x);
+	const yThresholds = getThresholdOptions('y', y);
+
+	// 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,
+			...xSoftLimits,
+			...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,
+		});
+	});
+
+	[xThresholds, yThresholds].forEach((options) => {
+		if (options) {
+			builder.addThresholds(options);
+		}
+	});
+
+	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;
+	resolvePointGroupValues?: (
+		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/ConfigPane.tsx

@@ -40,6 +40,8 @@ interface ConfigPaneProps {
 	legendSeries: LegendSeries[];
 	/** Table panel's resolved value columns, for the table-only editors. */
 	tableColumns: TableColumnOption[];
+	/** Group-by columns of the joined scalar result. */
+	groupColumns?: string[];
 	/** Query step interval (seconds), for the chart-appearance span-gaps floor. */
 	stepInterval?: number;
 	/**
@@ -67,6 +69,7 @@ function ConfigPane({
 	queryType,
 	legendSeries,
 	tableColumns,
+	groupColumns,
 	stepInterval,
 	panel,
 	panelId,
@@ -133,6 +136,7 @@ function ConfigPane({
 						defaults={defaults}
 						legendSeries={legendSeries}
 						tableColumns={tableColumns}
+						groupColumns={groupColumns}
 						signal={signal}
 						panelKind={panelKind}
 						onChangePanelKind={onChangePanelKind}
@@ -160,6 +164,7 @@ function ConfigPane({
 									defaults={defaults}
 									legendSeries={legendSeries}
 									tableColumns={tableColumns}
+									groupColumns={groupColumns}
 									signal={signal}
 									panelKind={panelKind}
 									onChangePanelKind={onChangePanelKind}

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

@@ -12,6 +12,11 @@ import type { SectionEditorContext } from '../sectionContext';
 import { getSectionDefault, resolveSectionEditor } from '../sectionRegistry';
 import SettingsSection from '../SettingsSection/SettingsSection';
 import { isDifferent } from '../utils/changes';
+import {
+	getScatterAxisColumnNames,
+	getScatterAxisColumnUnits,
+} from '../utils/scatterAxisColumns';
+import { getSizeColumnLabel } from '../utils/sizeColumnLabel';
 import SectionHeaderQuickAdd from './SectionHeaderQuickAdd';
 
 type SectionSlotProps = {
@@ -63,6 +68,7 @@ function SectionSlot({
 	bare,
 	legendSeries,
 	tableColumns,
+	groupColumns,
 	signal,
 	panelKind,
 	onChangePanelKind,
@@ -74,7 +80,10 @@ function SectionSlot({
 	const editor = resolveSectionEditor(config.kind);
 	// Controlled so the header slot can expand on click; list sections open when populated.
 	const [open, setOpen] = useState(() => {
-		if (config.kind === SectionKind.Visualization) {
+		if (
+			config.kind === SectionKind.Visualization ||
+			config.kind === SectionKind.Dimensions
+		) {
 			return true;
 		}
 		const value = editor?.get(spec);
@@ -129,6 +138,10 @@ function SectionSlot({
 		legendSeries,
 		yAxisUnit,
 		tableColumns,
+		groupColumns,
+		sizeColumnLabel: getSizeColumnLabel(spec, tableColumns),
+		axisColumnNames: getScatterAxisColumnNames(spec, tableColumns),
+		axisColumnUnits: getScatterAxisColumnUnits(spec, tableColumns),
 		signal,
 		panelKind,
 		onChangePanelKind,

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigMultiSelect/ConfigMultiSelect.module.scss

@@ -0,0 +1,3 @@
+.select {
+	width: 100%;
+}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigMultiSelect/ConfigMultiSelect.tsx

@@ -0,0 +1,49 @@
+import { ComboboxSimple } from '@signozhq/ui/combobox';
+
+import styles from './ConfigMultiSelect.module.scss';
+
+export interface ConfigMultiSelectItem<T extends string = string> {
+	value: T;
+	label: string;
+}
+
+interface ConfigMultiSelectProps<T extends string = string> {
+	testId: string;
+	value: T[];
+	placeholder?: string;
+	items: ConfigMultiSelectItem<T>[];
+	onChange: (value: T[]) => void;
+	disabled?: boolean;
+}
+
+/** Emits picks in items order, so the stored value is stable. */
+function ConfigMultiSelect<T extends string = string>({
+	testId,
+	value,
+	placeholder,
+	items,
+	onChange,
+	disabled,
+}: ConfigMultiSelectProps<T>): JSX.Element {
+	return (
+		<ComboboxSimple
+			multiple
+			className={styles.select}
+			testId={testId}
+			value={value}
+			placeholder={placeholder}
+			disabled={disabled}
+			items={items}
+			onChange={(next): void => {
+				const picked = Array.isArray(next) ? next : [];
+				onChange(
+					items
+						.map((item) => item.value)
+						.filter((candidate) => picked.includes(candidate)),
+				);
+			}}
+		/>
+	);
+}
+
+export default ConfigMultiSelect;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigMultiSelect/__tests__/ConfigMultiSelect.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import ConfigMultiSelect from '../ConfigMultiSelect';
+
+const ITEMS = [
+	{ value: 'a', label: 'alpha' },
+	{ value: 'b', label: 'beta' },
+	{ value: 'c', label: 'gamma' },
+];
+
+async function open(): Promise<ReturnType<typeof userEvent.setup>> {
+	const user = userEvent.setup();
+	await user.click(screen.getByTestId('multi'));
+	return user;
+}
+
+describe('ConfigMultiSelect', () => {
+	it('shows the placeholder while nothing is picked', () => {
+		render(
+			<ConfigMultiSelect
+				testId="multi"
+				value={[]}
+				placeholder="Every group key"
+				items={ITEMS}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByText('Every group key')).toBeInTheDocument();
+	});
+
+	it('keeps picks in item order, not the order they were picked', async () => {
+		const onChange = jest.fn();
+		render(
+			<ConfigMultiSelect
+				testId="multi"
+				value={['c']}
+				items={ITEMS}
+				onChange={onChange}
+			/>,
+		);
+
+		const user = await open();
+		await user.click(await screen.findByRole('option', { name: 'alpha' }));
+
+		expect(onChange).toHaveBeenLastCalledWith(['a', 'c']);
+	});
+});

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigRangeSlider/ConfigRangeSlider.module.scss

@@ -0,0 +1,21 @@
+.row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.slider {
+	flex: 1;
+	min-width: 0;
+	// Cancel the slider's half-thumb track inset so it aligns with the other controls.
+	margin-inline: calc(var(--slider-thumb-width, 18px) / -2);
+}
+
+.value {
+	flex-shrink: 0;
+	min-width: 56px;
+	text-align: right;
+	font-size: 12px;
+	font-variant-numeric: tabular-nums;
+	color: var(--l3-foreground);
+}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigRangeSlider/ConfigRangeSlider.tsx

@@ -0,0 +1,47 @@
+import { Slider } from '@signozhq/ui/slider';
+
+import styles from './ConfigRangeSlider.module.scss';
+
+interface ConfigRangeSliderProps {
+	testId: string;
+	value: [number, number];
+	min: number;
+	max: number;
+	step: number;
+	formatValue?: (value: [number, number]) => string;
+	onChange: (value: [number, number]) => void;
+}
+
+function ConfigRangeSlider({
+	testId,
+	value,
+	min,
+	max,
+	step,
+	formatValue,
+	onChange,
+}: ConfigRangeSliderProps): JSX.Element {
+	return (
+		<div className={styles.row}>
+			<Slider
+				range
+				testId={testId}
+				className={styles.slider}
+				value={value}
+				min={min}
+				max={max}
+				step={step}
+				onChange={(next): void => {
+					if (Array.isArray(next) && next.length === 2) {
+						onChange([Math.min(next[0], next[1]), Math.max(next[0], next[1])]);
+					}
+				}}
+			/>
+			<span className={styles.value}>
+				{formatValue ? formatValue(value) : `${value[0]}–${value[1]}`}
+			</span>
+		</div>
+	);
+}
+
+export default ConfigRangeSlider;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigRangeSlider/__tests__/ConfigRangeSlider.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen, userEvent, within } from 'tests/test-utils';
+
+import ConfigRangeSlider from '../ConfigRangeSlider';
+
+window.ResizeObserver =
+	window.ResizeObserver ||
+	jest.fn().mockImplementation(() => ({
+		disconnect: jest.fn(),
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+	}));
+
+describe('ConfigRangeSlider', () => {
+	it('renders a thumb per end and the formatted range', () => {
+		render(
+			<ConfigRangeSlider
+				testId="range"
+				value={[4, 24]}
+				min={2}
+				max={40}
+				step={1}
+				formatValue={([min, max]): string => `${min}–${max} px`}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(
+			within(screen.getByTestId('range')).getAllByRole('slider'),
+		).toHaveLength(2);
+		expect(screen.getByText('4–24 px')).toBeInTheDocument();
+	});
+
+	it('moves one end and reports the pair low to high', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+		render(
+			<ConfigRangeSlider
+				testId="range"
+				value={[4, 24]}
+				min={2}
+				max={40}
+				step={1}
+				onChange={onChange}
+			/>,
+		);
+
+		const [, maxThumb] = within(screen.getByTestId('range')).getAllByRole(
+			'slider',
+		);
+		maxThumb.focus();
+		await user.keyboard('{ArrowRight}');
+
+		expect(onChange).toHaveBeenLastCalledWith([4, 25]);
+	});
+});

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/drawings/tileDrawings.tsx

@@ -164,12 +164,12 @@ export const TILE_DRAWINGS = {
 			<path d="M4 20 C 20 20, 22 12, 32 12 S 44 4, 60 4" />
 		</TileSvg>
 	),
-	barsSideBySide: (
+	barsOverlap: (
 		<TileSvg>
-			<rect x={10} y={10} width={7} height={12} {...FILLED} opacity={0.5} />
-			<rect x={18} y={4} width={7} height={18} {...FILLED} />
-			<rect x={36} y={12} width={7} height={10} {...FILLED} opacity={0.5} />
-			<rect x={44} y={7} width={7} height={15} {...FILLED} />
+			<rect x={14} y={6} width={11} height={16} {...FILLED} opacity={0.5} />
+			<rect x={14} y={12} width={11} height={10} {...FILLED} />
+			<rect x={38} y={10} width={11} height={12} {...FILLED} opacity={0.5} />
+			<rect x={38} y={14} width={11} height={8} {...FILLED} />
 		</TileSvg>
 	),
 	barsStacked: (

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sectionContext.ts

@@ -13,6 +13,14 @@ import { EQueryType } from 'types/common/dashboard';
 export interface SectionEditorContext {
 	legendSeries?: LegendSeries[];
 	tableColumns?: TableColumnOption[];
+	/** Group-by labels of the joined scalar result; the colour-by options. */
+	groupColumns?: string[];
+	/** Scatter Plot's size column label, if bound. */
+	sizeColumnLabel?: string;
+	/** Name of the column each Scatter Plot axis plots, for its label's placeholder. */
+	axisColumnNames?: { x?: string; y?: string };
+	/** Unit of the column each Scatter Plot axis plots. */
+	axisColumnUnits?: { x?: string; y?: string };
 	signal?: TelemetrytypesSignalDTO;
 	panelKind?: PanelKind;
 	onChangePanelKind?: (kind: PanelKind) => void;

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

@@ -4,6 +4,8 @@ import type {
 	DashboardtypesHistogramBucketsDTO,
 	DashboardtypesLegendDTO,
 	DashboardtypesPanelSpecDTO,
+	DashboardtypesScatterPlotAxesDTO,
+	DashboardtypesScatterPlotDimensionsDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import {
 	SectionKind,
@@ -22,9 +24,11 @@ import AxesSection from './sections/AxesSection/AxesSection';
 import BucketsSection from './sections/BucketsSection/BucketsSection';
 import ChartAppearanceSection from './sections/ChartAppearanceSection/ChartAppearanceSection';
 import ContextLinksSection from './sections/ContextLinksSection/ContextLinksSection';
+import DimensionsSection from './sections/DimensionsSection/DimensionsSection';
 import FormattingSection from './sections/FormattingSection/FormattingSection';
 import LegendSection from './sections/LegendSection/LegendSection';
 import PanelHeaderSection from './sections/PanelHeaderSection/PanelHeaderSection';
+import ScatterAxesSection from './sections/ScatterAxesSection/ScatterAxesSection';
 import TextLayoutSection from './sections/TextLayoutSection/TextLayoutSection';
 import ThresholdsSection from './sections/ThresholdsSection/ThresholdsSection';
 import VisualizationSection from './sections/VisualizationSection/VisualizationSection';
@@ -86,6 +90,20 @@ export const SECTION_REGISTRY: {
 			getPluginSlice<PanelAxesSlice>(spec, 'axes'),
 		update: (spec, axes): PanelSpec => updatePluginSlice(spec, 'axes', axes),
 	},
+	// Same `axes` key as above, in Scatter Plot's per-axis shape.
+	[SectionKind.ScatterAxes]: {
+		Component: ScatterAxesSection,
+		get: (spec): DashboardtypesScatterPlotAxesDTO | undefined =>
+			getPluginSlice<DashboardtypesScatterPlotAxesDTO>(spec, 'axes'),
+		update: (spec, axes): PanelSpec => updatePluginSlice(spec, 'axes', axes),
+	},
+	[SectionKind.Dimensions]: {
+		Component: DimensionsSection,
+		get: (spec): DashboardtypesScatterPlotDimensionsDTO | undefined =>
+			getPluginSlice<DashboardtypesScatterPlotDimensionsDTO>(spec, 'dimensions'),
+		update: (spec, dimensions): PanelSpec =>
+			updatePluginSlice(spec, 'dimensions', dimensions),
+	},
 	[SectionKind.Legend]: {
 		Component: LegendSection,
 		get: (spec): DashboardtypesLegendDTO | undefined =>

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/ChartAppearanceSection.tsx

@@ -14,6 +14,7 @@ import type { SectionEditorContext } from '../../sectionContext';
 import { createFieldResetter } from '../../utils/changes';
 import DisconnectValuesField from './DisconnectValuesField';
 import HeatmapColorsField from './HeatmapColorsField';
+import PointsFields from './PointsFields';
 import {
 	FILL_MODE_OPTIONS,
 	FILLED_FILL_MODE_OPTIONS,
@@ -39,8 +40,9 @@ function ChartAppearanceSection({
 	controls,
 	onChange,
 	stepInterval,
+	sizeColumnLabel,
 }: SectionEditorProps<SectionKind.ChartAppearance> &
-	Pick<SectionEditorContext, 'stepInterval'>): JSX.Element {
+	Pick<SectionEditorContext, 'stepInterval' | 'sizeColumnLabel'>): JSX.Element {
 	const reset = createFieldResetter(value, savedValue, onChange);
 	const interpolation = value?.lineInterpolation;
 
@@ -122,6 +124,15 @@ function ChartAppearanceSection({
 				/>
 			)}
 
+			{controls.points && (
+				<PointsFields
+					value={value?.points}
+					savedValue={savedValue?.points}
+					sizeColumnLabel={sizeColumnLabel}
+					onChange={(points): void => onChange({ ...value, points })}
+				/>
+			)}
+
 			{controls.spanGaps && (
 				<DisconnectValuesField
 					testId="panel-editor-v2-span-gaps"