chore(openapi): regenerate specs for scatter plot panel

Assisted-by: Claude Opus 5.5

.github/workflows/integrationci.yaml

@@ -38,7 +38,6 @@ jobs:
       fail-fast: false
       matrix:
         suite:
-          - alerts
           - alertmanager
           - alertmanagerrotation
           - basepath
@@ -64,6 +63,7 @@ jobs:
           - querierauthz
           - role
           - rootuser
+          - ruler
           - savedview
           - semconvfamilies
           - serviceaccount

docs/contributing/go/handler.md

@@ -179,6 +179,7 @@ The `handler.New` function ties the HTTP handler to OpenAPI metadata via `OpenAP
 - **SuccessStatusCode**: The HTTP status for successful responses (for example, `http.StatusOK`, `http.StatusCreated`, `http.StatusNoContent`).
 - **ErrorStatusCodes**: Additional error status codes beyond the standard ones automatically added by `handler.New`.
 - **SecuritySchemes**: Auth mechanisms and scopes required by the operation.
+- **Stability**: Maturity marker (`handler.StabilityDevelopment`, `handler.StabilityAlpha`, `handler.StabilityBeta`, `handler.StabilityStable`, the OpenTelemetry Collector levels) emitted as the `x-signoz-stability` extension on every operation. Unset is emitted as `alpha`.
 
 The generic handler:
 

frontend/__mocks__/uplotMock.ts

@@ -48,6 +48,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(
@@ -61,6 +62,9 @@ function MockUPlot(
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
+MockUPlot.orient = mockOrient;
+// Pinned so canvas-space maths in path builders is deterministic under jsdom.
+MockUPlot.pxRatio = 1;
 
 // Export the constructor as default
 export default MockUPlot;

frontend/src/container/AIAssistant/components/ActionsSection/utils/__tests__/openSavedView.test.ts

@@ -3,15 +3,22 @@ import {
 	MessageActionKindDTO,
 	SavedViewEntityDTO,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import { getAllViews } from 'api/saveView/getAllViews';
-import { getViewById } from 'api/saveView/getViewById';
+import {
+	getSavedView,
+	listSavedViews,
+} from 'api/generated/services/saved-view';
+import {
+	GetSavedView200,
+	ListSavedViews200,
+	SavedviewtypesPanelTypeDTO,
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSchemaVersionDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
-import { AllViewsProps, ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
-import { AxiosResponse } from 'axios';
 import type { History } from 'history';
 
 import {
@@ -31,8 +38,7 @@ import {
 } from '../resolveOpenResource';
 import { resourceRoute, ResourceType } from '../resourceRoute';
 
-jest.mock('api/saveView/getAllViews');
-jest.mock('api/saveView/getViewById');
+jest.mock('api/generated/services/saved-view');
 
 jest.mock(
 	'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi',
@@ -48,43 +54,45 @@ jest.mock(
 	}),
 );
 
-const mockedGetAllViews = getAllViews as jest.MockedFunction<
-	typeof getAllViews
+const mockedListSavedViews = listSavedViews as jest.MockedFunction<
+	typeof listSavedViews
 >;
-const mockedGetViewById = getViewById as jest.MockedFunction<
-	typeof getViewById
+const mockedGetSavedView = getSavedView as jest.MockedFunction<
+	typeof getSavedView
 >;
 
-function makeView(id: string, sourcePage: DataSource): ViewProps {
+function makeView(
+	id: string,
+	source: SavedviewtypesSourceDTO,
+): SavedviewtypesSavedViewDTO {
 	return {
 		id,
-		name: `View ${id}`,
-		category: 'test',
+		name: `view-${id}`,
+		source,
+		schemaVersion: SavedviewtypesSchemaVersionDTO.v2,
 		createdAt: '2021-07-07T06:31:00.000Z',
 		createdBy: 'user',
 		updatedAt: '2021-07-07T06:33:00.000Z',
 		updatedBy: 'user',
-		sourcePage,
-		tags: [],
-		extraData: '',
-		compositeQuery: {
-			panelType: PANEL_TYPES.LIST,
-		} as ICompositeMetricQuery,
-	};
+		spec: {
+			displayName: `View ${id}`,
+			panelType: SavedviewtypesPanelTypeDTO.list,
+			requestType: 'raw',
+			queries: [{ type: 'builder_query', spec: { name: 'A', signal: source } }],
+		},
+	} as unknown as SavedviewtypesSavedViewDTO;
 }
 
-function mockViewsResponse(views: ViewProps[]): AxiosResponse<AllViewsProps> {
-	return {
-		data: { status: 'success', data: views },
-	} as AxiosResponse<AllViewsProps>;
+function mockViewsResponse(
+	views: SavedviewtypesSavedViewDTO[],
+): ListSavedViews200 {
+	return { status: 'success', data: views };
 }
 
 function mockViewByIdResponse(
-	view: ViewProps,
-): AxiosResponse<{ status: string; data: ViewProps }> {
-	return {
-		data: { status: 'success', data: view },
-	} as AxiosResponse<{ status: string; data: ViewProps }>;
+	view: SavedviewtypesSavedViewDTO,
+): GetSavedView200 {
+	return { status: 'success', data: view };
 }
 
 describe('resourceRoute', () => {
@@ -190,18 +198,33 @@ describe('resolveOpenResource', () => {
 
 describe('findSavedViewInLists', () => {
 	beforeEach(() => {
-		mockedGetAllViews.mockReset();
+		mockedListSavedViews.mockReset();
 	});
 
 	it('loads only the hinted source when entity is provided', async () => {
-		const tracesView = makeView('view-traces', DataSource.TRACES);
-		mockedGetAllViews.mockResolvedValueOnce(mockViewsResponse([tracesView]));
+		const tracesView = makeView('view-traces', SavedviewtypesSourceDTO.traces);
+		mockedListSavedViews.mockResolvedValueOnce(mockViewsResponse([tracesView]));
 
 		const result = await findSavedViewInLists('view-traces', DataSource.TRACES);
 
 		expect(result).toStrictEqual(tracesView);
-		expect(mockedGetAllViews).toHaveBeenCalledTimes(1);
-		expect(mockedGetAllViews).toHaveBeenCalledWith(DataSource.TRACES);
+		expect(mockedListSavedViews).toHaveBeenCalledTimes(1);
+		expect(mockedListSavedViews).toHaveBeenCalledWith({
+			source: SavedviewtypesSourceDTO.traces,
+		});
+	});
+
+	it('treats a null list as empty and probes the next source', async () => {
+		const metricsView = makeView('view-metrics', SavedviewtypesSourceDTO.metrics);
+		mockedListSavedViews
+			.mockResolvedValueOnce({ status: 'success', data: null })
+			.mockResolvedValueOnce(mockViewsResponse([]))
+			.mockResolvedValueOnce(mockViewsResponse([metricsView]));
+
+		const result = await findSavedViewInLists('view-metrics');
+
+		expect(result).toStrictEqual(metricsView);
+		expect(mockedListSavedViews).toHaveBeenCalledTimes(3);
 	});
 });
 
@@ -227,52 +250,75 @@ describe('openSavedView', () => {
 	it('navigates with history.push and view query params', () => {
 		const push = jest.fn();
 		const history = { push } as unknown as History;
-		const view = makeView('view-logs', DataSource.LOGS);
+		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
 
 		openSavedView(view, history);
 
 		expect(push).toHaveBeenCalledTimes(1);
 		const pushedUrl = push.mock.calls[0][0] as string;
 		expect(pushedUrl).toContain(ROUTES.LOGS_EXPLORER);
-		expect(pushedUrl).toContain(QueryParams.viewKey);
+		const params = new URLSearchParams(pushedUrl.split('?')[1]);
+		expect(params.get(QueryParams.viewKey)).toBe('"view-logs"');
+		expect(params.get(QueryParams.viewName)).toBe('"View view-logs"');
+		expect(params.get(QueryParams.panelTypes)).toBe('"list"');
+	});
+
+	it('throws when the view has no source', () => {
+		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
+		delete view.source;
+
+		expect(() =>
+			openSavedView(view, { push: jest.fn() } as unknown as History),
+		).toThrow('Unsupported saved view source');
+	});
+
+	it('throws when the view has no queries', () => {
+		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
+		view.spec.queries = [];
+
+		expect(() =>
+			openSavedView(view, { push: jest.fn() } as unknown as History),
+		).toThrow('Saved view is missing query data');
 	});
 });
 
 describe('openSavedViewByKey', () => {
 	beforeEach(() => {
-		mockedGetAllViews.mockReset();
-		mockedGetViewById.mockReset();
+		mockedListSavedViews.mockReset();
+		mockedGetSavedView.mockReset();
 	});
 
 	it('prefers the direct view lookup endpoint', async () => {
-		const view = makeView('view-logs', DataSource.LOGS);
-		mockedGetViewById.mockResolvedValueOnce(mockViewByIdResponse(view));
+		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
+		mockedGetSavedView.mockResolvedValueOnce(mockViewByIdResponse(view));
 		const push = jest.fn();
 		const history = { push } as unknown as History;
 
 		await openSavedViewByKey('view-logs', DataSource.LOGS, history);
 
-		expect(mockedGetViewById).toHaveBeenCalledWith('view-logs');
-		expect(mockedGetAllViews).not.toHaveBeenCalled();
+		expect(mockedGetSavedView).toHaveBeenCalledWith({ id: 'view-logs' });
+		expect(mockedListSavedViews).not.toHaveBeenCalled();
 		expect(push).toHaveBeenCalled();
 	});
 
 	it('falls back to list probing when direct lookup fails', async () => {
-		const view = makeView('view-traces', DataSource.TRACES);
-		mockedGetViewById.mockRejectedValueOnce(new Error('not found'));
-		mockedGetAllViews.mockResolvedValueOnce(mockViewsResponse([view]));
+		const view = makeView('view-traces', SavedviewtypesSourceDTO.traces);
+		mockedGetSavedView.mockRejectedValueOnce(new Error('not found'));
+		mockedListSavedViews.mockResolvedValueOnce(mockViewsResponse([view]));
 		const push = jest.fn();
 		const history = { push } as unknown as History;
 
 		await openSavedViewByKey('view-traces', DataSource.TRACES, history);
 
-		expect(mockedGetAllViews).toHaveBeenCalledWith(DataSource.TRACES);
+		expect(mockedListSavedViews).toHaveBeenCalledWith({
+			source: SavedviewtypesSourceDTO.traces,
+		});
 		expect(push).toHaveBeenCalled();
 	});
 
 	it('throws when the saved view does not exist', async () => {
-		mockedGetViewById.mockRejectedValueOnce(new Error('not found'));
-		mockedGetAllViews.mockResolvedValue(mockViewsResponse([]));
+		mockedGetSavedView.mockRejectedValueOnce(new Error('not found'));
+		mockedListSavedViews.mockResolvedValue(mockViewsResponse([]));
 
 		await expect(
 			openSavedViewByKey('missing', DataSource.LOGS, {

frontend/src/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts

@@ -1,15 +1,22 @@
-import { getAllViews } from 'api/saveView/getAllViews';
-import { getViewById } from 'api/saveView/getViewById';
+import {
+	getSavedView,
+	listSavedViews,
+} from 'api/generated/services/saved-view';
+import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
+import {
+	findSavedView,
+	getSavedViewQuery,
+	SavedViewSourcePage,
+	toSavedViewSource,
+} from 'container/SavedViews/utils';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
-import { ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { History } from 'history';
 
-type SavedViewSourceHint = DataSource | 'meter';
+type SavedViewSourceHint = SavedViewSourcePage;
 
 const DEFAULT_PROBE_SOURCES: SavedViewSourceHint[] = [
 	DataSource.LOGS,
@@ -20,13 +27,15 @@ const DEFAULT_PROBE_SOURCES: SavedViewSourceHint[] = [
 export async function findSavedViewInLists(
 	viewKey: string,
 	sourceHint?: SavedViewSourceHint | null,
-): Promise<ViewProps | null> {
+): Promise<SavedviewtypesSavedViewDTO | null> {
 	const sources = sourceHint ? [sourceHint] : DEFAULT_PROBE_SOURCES;
 
 	for (const source of sources) {
 		try {
-			const response = await getAllViews(source);
-			const match = response.data.data.find((view) => view.id === viewKey);
+			const response = await listSavedViews({
+				source: toSavedViewSource(source),
+			});
+			const match = findSavedView(response.data, viewKey);
 			if (match) {
 				return match;
 			}
@@ -41,11 +50,11 @@ export async function findSavedViewInLists(
 async function loadSavedView(
 	viewKey: string,
 	sourceHint?: SavedViewSourceHint | null,
-): Promise<ViewProps> {
+): Promise<SavedviewtypesSavedViewDTO> {
 	try {
-		const response = await getViewById(viewKey);
-		if (response.data?.data) {
-			return response.data.data;
+		const response = await getSavedView({ id: viewKey });
+		if (response.data) {
+			return response.data;
 		}
 	} catch {
 		// Fall back to list probing when the direct lookup fails.
@@ -85,20 +94,23 @@ export function buildExplorerNavigationUrl(
 	return `${route}?${params.toString()}`;
 }
 
-export function openSavedView(view: ViewProps, history: History): void {
-	const route = explorerRouteForSourcePage(view.sourcePage);
+export function openSavedView(
+	view: SavedviewtypesSavedViewDTO,
+	history: History,
+): void {
+	const route = view.source ? explorerRouteForSourcePage(view.source) : null;
 	if (!route) {
 		throw new Error('Unsupported saved view source');
 	}
 
-	if (!view.compositeQuery) {
+	if (!view.spec.queries?.length) {
 		throw new Error('Saved view is missing query data');
 	}
 
-	const query = mapQueryDataFromApi(view.compositeQuery);
+	const query = getSavedViewQuery(view);
 	const url = buildExplorerNavigationUrl(route, query, {
-		[QueryParams.panelTypes]: view.compositeQuery.panelType as PANEL_TYPES,
-		[QueryParams.viewName]: view.name,
+		[QueryParams.panelTypes]: view.spec.panelType as unknown as PANEL_TYPES,
+		[QueryParams.viewName]: view.spec.displayName,
 		[QueryParams.viewKey]: view.id,
 	});
 	history.push(url);
@@ -112,6 +124,3 @@ export async function openSavedViewByKey(
 	const view = await loadSavedView(viewKey, sourceHint);
 	openSavedView(view, history);
 }
-
-/** @deprecated Use findSavedViewInLists — kept for tests. */
-export const findSavedView = findSavedViewInLists;

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -1,17 +1,18 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Button, Skeleton } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
 import logEvent from 'api/common/logEvent';
-import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils';
+import { useListSavedViews } from 'api/generated/services/saved-view';
+import {
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
-import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
+import { getSavedViewQuery } from 'container/SavedViews/utils';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
-import { ViewProps } from 'types/api/saveViews/types';
-import { DataSource } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
 
 import floppyDiscUrl from '@/assets/Icons/floppy-disc.svg';
@@ -35,38 +36,40 @@ export default function SavedViews({
 }): JSX.Element {
 	const { user } = useAppContext();
 	const [selectedEntity, setSelectedEntity] = useState<string>('logs');
-	const [selectedEntityViews, setSelectedEntityViews] = useState<any[]>([]);
+	const [selectedEntityViews, setSelectedEntityViews] = useState<
+		SavedviewtypesSavedViewDTO[]
+	>([]);
 
 	const {
 		data: logsViewsData,
 		isLoading: logsViewsLoading,
 		isError: logsViewsError,
-	} = useGetAllViews(DataSource.LOGS);
+	} = useListSavedViews({ source: SavedviewtypesSourceDTO.logs });
 
 	const {
 		data: tracesViewsData,
 		isLoading: tracesViewsLoading,
 		isError: tracesViewsError,
-	} = useGetAllViews(DataSource.TRACES);
+	} = useListSavedViews({ source: SavedviewtypesSourceDTO.traces });
 
 	const {
 		data: metricsViewsData,
 		isLoading: metricsViewsLoading,
 		isError: metricsViewsError,
-	} = useGetAllViews(DataSource.METRICS);
+	} = useListSavedViews({ source: SavedviewtypesSourceDTO.metrics });
 
 	const logsViews = useMemo(
-		() => [...(logsViewsData?.data.data || [])],
+		() => [...(logsViewsData?.data || [])],
 		[logsViewsData],
 	);
 
 	const tracesViews = useMemo(
-		() => [...(tracesViewsData?.data.data || [])],
+		() => [...(tracesViewsData?.data || [])],
 		[tracesViewsData],
 	);
 
 	const metricsViews = useMemo(
-		() => [...(metricsViewsData?.data.data || [])],
+		() => [...(metricsViewsData?.data || [])],
 		[metricsViewsData],
 	);
 
@@ -88,39 +91,22 @@ export default function SavedViews({
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
-	const handleRedirectQuery = (view: ViewProps): void => {
+	const handleRedirectQuery = (view: SavedviewtypesSavedViewDTO): void => {
 		logEvent('Homepage: Saved view clicked', {
 			viewId: view.id,
-			viewName: view.name,
+			viewName: view.spec.displayName,
 			entity: selectedEntity,
 		});
 
-		let currentViews: ViewProps[] = [];
-		if (selectedEntity === 'logs') {
-			currentViews = logsViews;
-		} else if (selectedEntity === 'traces') {
-			currentViews = tracesViews;
-		} else if (selectedEntity === 'metrics') {
-			currentViews = metricsViews;
-		}
-
-		const currentViewDetails = getViewDetailsUsingViewKey(view.id, currentViews);
-		if (!currentViewDetails) {
-			return;
-		}
-		const { query, name, id, panelType: currentPanelType } = currentViewDetails;
-
-		if (selectedEntity) {
-			handleExplorerTabChange(
-				currentPanelType,
-				{
-					query,
-					viewName: name,
-					viewKey: id,
-				},
-				SOURCEPAGE_VS_ROUTES[selectedEntity],
-			);
-		}
+		handleExplorerTabChange(
+			view.spec.panelType,
+			{
+				query: getSavedViewQuery(view),
+				viewName: view.spec.displayName,
+				viewKey: view.id,
+			},
+			SOURCEPAGE_VS_ROUTES[selectedEntity],
+		);
 	};
 
 	useEffect(() => {
@@ -239,24 +225,10 @@ export default function SavedViews({
 							/>
 
 							<div className="saved-view-item-name home-data-item-name">
-								{view.name}
+								{view.spec.displayName}
 							</div>
 						</div>
 
-						<div className="saved-view-item-description home-data-item-tag">
-							{view.tags?.map((tag: string) => {
-								if (tag === '') {
-									return null;
-								}
-
-								return (
-									<Badge color="sienna" key={tag}>
-										{tag}
-									</Badge>
-								);
-							})}
-						</div>
-
 						<Button
 							type="link"
 							size="small"
@@ -307,7 +279,7 @@ export default function SavedViews({
 		logEvent('Homepage: Saved views switched', {
 			tab,
 		});
-		let currentViews: ViewProps[] = [];
+		let currentViews: SavedviewtypesSavedViewDTO[] = [];
 		if (tab === 'logs') {
 			currentViews = logsViews;
 		} else if (tab === 'traces') {

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

@@ -0,0 +1,126 @@
+import {
+	SavedviewtypesPanelTypeDTO,
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSchemaVersionDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { findSavedView, getSavedViewQuery, toSavedViewSource } from '../utils';
+
+jest.mock('uuid', () => ({
+	v4: (): string => 'test-id',
+}));
+
+function makeView(): SavedviewtypesSavedViewDTO {
+	return {
+		id: 'view-1',
+		name: 'errors-by-service-abc123',
+		source: SavedviewtypesSourceDTO.traces,
+		schemaVersion: SavedviewtypesSchemaVersionDTO.v2,
+		createdBy: 'a@b.c',
+		updatedBy: 'a@b.c',
+		spec: {
+			displayName: 'Errors by service',
+			panelType: SavedviewtypesPanelTypeDTO.list,
+			requestType: 'raw',
+			queries: [
+				{
+					type: 'builder_query',
+					spec: {
+						name: 'A',
+						signal: 'traces',
+						stepInterval: 60,
+						filter: { expression: 'has_error = true' },
+						// v2 reads back fully defaulted envelopes; nulls must not break the mapper
+						groupBy: null,
+						order: null,
+						selectFields: null,
+						functions: null,
+						legend: '',
+						disabled: false,
+					},
+				},
+			],
+			selectedFields: [{ name: 'service.name' }],
+			display: { color: 'red' },
+		},
+	} as SavedviewtypesSavedViewDTO;
+}
+
+describe('getSavedViewQuery', () => {
+	it('maps the v2 spec through the v5 branch of mapQueryDataFromApi', () => {
+		const query = getSavedViewQuery(makeView());
+
+		expect(query.queryType).toBe(EQueryType.QUERY_BUILDER);
+		expect(query.promql).toStrictEqual([]);
+		expect(query.clickhouse_sql).toStrictEqual([]);
+		expect(query.builder.queryData).toHaveLength(1);
+
+		const [queryData] = query.builder.queryData;
+		expect(queryData.queryName).toBe('A');
+		expect(queryData.dataSource).toBe(DataSource.TRACES);
+		expect(queryData.filter).toStrictEqual({ expression: 'has_error = true' });
+		expect(queryData.groupBy).toStrictEqual([]);
+		expect(queryData.orderBy).toStrictEqual([]);
+	});
+
+	it('keeps formulas alongside builder queries', () => {
+		const view = makeView();
+		view.spec.queries.push({
+			type: 'builder_formula',
+			spec: { name: 'F1', expression: 'A / 2' },
+		} as SavedviewtypesSavedViewDTO['spec']['queries'][number]);
+
+		const query = getSavedViewQuery(view);
+
+		expect(query.builder.queryData).toHaveLength(1);
+		expect(query.builder.queryFormulas).toHaveLength(1);
+		expect(query.builder.queryFormulas[0].queryName).toBe('F1');
+	});
+
+	it('does not read the panel type into the query', () => {
+		const view = makeView();
+		view.spec.panelType = SavedviewtypesPanelTypeDTO.graph;
+
+		const query = getSavedViewQuery(view);
+
+		// panelType travels separately (url param), the Query itself has no such field
+		expect(query).not.toHaveProperty('panelType', PANEL_TYPES.TIME_SERIES);
+	});
+});
+
+describe('toSavedViewSource', () => {
+	it('maps every explorer source page to the v2 source', () => {
+		expect(toSavedViewSource(DataSource.LOGS)).toBe(SavedviewtypesSourceDTO.logs);
+		expect(toSavedViewSource(DataSource.TRACES)).toBe(
+			SavedviewtypesSourceDTO.traces,
+		);
+		expect(toSavedViewSource(DataSource.METRICS)).toBe(
+			SavedviewtypesSourceDTO.metrics,
+		);
+		expect(toSavedViewSource('meter')).toBe(SavedviewtypesSourceDTO.meter);
+	});
+});
+
+describe('findSavedView', () => {
+	const views = [
+		{ ...makeView(), id: 'a' },
+		{ ...makeView(), id: 'b' },
+	];
+
+	it('returns the view with the matching id', () => {
+		expect(findSavedView(views, 'b')?.id).toBe('b');
+	});
+
+	it('returns undefined when the id is not in the list', () => {
+		expect(findSavedView(views, 'c')).toBeUndefined();
+	});
+
+	it('returns undefined for a null or not yet loaded list', () => {
+		expect(findSavedView(null, 'a')).toBeUndefined();
+		expect(findSavedView(undefined, 'a')).toBeUndefined();
+	});
+});

frontend/src/container/SavedViews/utils.ts

@@ -0,0 +1,49 @@
+import {
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryEnvelope } from 'types/api/v5/queryRange';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+
+export type SavedViewSourcePage = DataSource | 'meter';
+
+// Explorers and the preferences module are keyed by DataSource (the signal),
+// the api keys views by source page. Same values today, so this is the one
+// place they meet. AI observability views will come with their own source and
+// DataSource cannot tell them apart from traces, so preferences should move to
+// source page at that point and this map goes with it.
+const SAVED_VIEW_SOURCE: Record<SavedViewSourcePage, SavedviewtypesSourceDTO> =
+	{
+		[DataSource.LOGS]: SavedviewtypesSourceDTO.logs,
+		[DataSource.TRACES]: SavedviewtypesSourceDTO.traces,
+		[DataSource.METRICS]: SavedviewtypesSourceDTO.metrics,
+		meter: SavedviewtypesSourceDTO.meter,
+	};
+
+export function toSavedViewSource(
+	sourcePage: SavedViewSourcePage,
+): SavedviewtypesSourceDTO {
+	return SAVED_VIEW_SOURCE[sourcePage];
+}
+
+// Explorers only save builder queries; v2 carries no queryType, so it is fixed here.
+export function getSavedViewQuery(view: SavedviewtypesSavedViewDTO): Query {
+	const { queries, panelType } = view.spec;
+	return mapQueryDataFromApi({
+		queries: queries as QueryEnvelope[],
+		panelType: panelType as unknown as PANEL_TYPES,
+		queryType: EQueryType.QUERY_BUILDER,
+		unit: undefined,
+	});
+}
+
+export function findSavedView(
+	views: SavedviewtypesSavedViewDTO[] | null | undefined,
+	id: string,
+): SavedviewtypesSavedViewDTO | undefined {
+	return views?.find((view) => view.id === id);
+}

frontend/src/hooks/saveViews/useDeleteView.ts

@@ -1,11 +1,18 @@
-import { useMutation, UseMutationResult } from 'react-query';
+import { useMutation, UseMutationResult, useQueryClient } from 'react-query';
+import { invalidateListSavedViews } from 'api/generated/services/saved-view';
 import { deleteView } from 'api/saveView/deleteView';
 import { DeleteViewPayloadProps } from 'types/api/saveViews/types';
 
 export const useDeleteView = (
 	uuid: string,
-): UseMutationResult<DeleteViewPayloadProps, Error, string> =>
-	useMutation({
+): UseMutationResult<DeleteViewPayloadProps, Error, string> => {
+	const queryClient = useQueryClient();
+
+	return useMutation({
 		mutationKey: [uuid],
 		mutationFn: () => deleteView(uuid),
+		// v1 and v2 share storage; consumers already on v2 must see this write.
+		// Temporary till the v1 client is deleted with the explorer bar.
+		onSuccess: () => invalidateListSavedViews(queryClient),
 	});
+};

frontend/src/hooks/saveViews/useSaveView.ts

@@ -1,4 +1,5 @@
-import { useMutation, UseMutationResult } from 'react-query';
+import { useMutation, UseMutationResult, useQueryClient } from 'react-query';
+import { invalidateListSavedViews } from 'api/generated/services/saved-view';
 import { saveView } from 'api/saveView/saveView';
 import { AxiosResponse } from 'axios';
 import { SaveViewPayloadProps, SaveViewProps } from 'types/api/saveViews/types';
@@ -13,8 +14,14 @@ export const useSaveView = ({
 	Error,
 	SaveViewProps,
 	SaveViewPayloadProps
-> =>
-	useMutation({
+> => {
+	const queryClient = useQueryClient();
+
+	return useMutation({
 		mutationKey: [viewName, sourcePage, compositeQuery, extraData],
 		mutationFn: saveView,
+		// v1 and v2 share storage; consumers already on v2 must see this write.
+		// Temporary till the v1 client is deleted with the explorer bar.
+		onSuccess: () => invalidateListSavedViews(queryClient),
 	});
+};

frontend/src/hooks/saveViews/useUpdateView.ts

@@ -1,4 +1,5 @@
-import { useMutation, UseMutationResult } from 'react-query';
+import { useMutation, UseMutationResult, useQueryClient } from 'react-query';
+import { invalidateListSavedViews } from 'api/generated/services/saved-view';
 import { updateView } from 'api/saveView/updateView';
 import {
 	UpdateViewPayloadProps,
@@ -16,8 +17,10 @@ export const useUpdateView = ({
 	Error,
 	UpdateViewProps,
 	UpdateViewPayloadProps
-> =>
-	useMutation({
+> => {
+	const queryClient = useQueryClient();
+
+	return useMutation({
 		mutationKey: [viewName, sourcePage, compositeQuery, extraData],
 		mutationFn: () =>
 			updateView({
@@ -27,4 +30,8 @@ export const useUpdateView = ({
 				sourcePage,
 				viewKey,
 			}),
+		// v1 and v2 share storage; consumers already on v2 must see this write.
+		// Temporary till the v1 client is deleted with the explorer bar.
+		onSuccess: () => invalidateListSavedViews(queryClient),
 	});
+};

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

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

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

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

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

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

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

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

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

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

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

@@ -58,32 +58,49 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 	}
 
 	/**
-	 * Build values formatter for X-axis (time)
+	 * Build values formatter for X-axis: time, or a value axis when a unit or
+	 * precision is given (scatter). Neither leaves uPlot's numeric default.
 	 */
 	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)
+	 * Build values formatter for a value axis (values with units). A split outside
+	 * the scale's range gets no label: uPlot's arcsinh splits always include
+	 * ±threshold, and it would draw that label past the plot's edge.
 	 */
-	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 +118,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		return scaleKey === 'x'
 			? this.buildXAxisValuesFormatter()
 			: scaleKey === 'y'
-				? this.buildYAxisValuesFormatter()
+				? this.buildValueAxisFormatter()
 				: undefined;
 	}
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -58,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,
@@ -197,6 +210,33 @@ function getLogScaleRange(
 	);
 }
 
+/**
+ * Computes the arcsinh-scale range using uPlot.rangeAsinh, which pads to whole
+ * magnitudes on either side of zero and pins an edge that sits exactly on zero.
+ */
+function getAsinhScaleRange(
+	minMax: Range.MinMax,
+	params: RangeFunctionParams,
+	dataMin: number | null,
+	dataMax: number | null,
+	logBase?: uPlot.Scale['log'],
+): Range.MinMax {
+	const { min, max } = params;
+	const resolvedMin = min ?? dataMin;
+	const resolvedMax = max ?? dataMax;
+
+	if (resolvedMin == null || resolvedMax == null) {
+		return minMax;
+	}
+
+	return uPlot.rangeAsinh(
+		resolvedMin,
+		resolvedMax,
+		(logBase ?? 10) as 2 | 10,
+		true,
+	);
+}
+
 /**
  * Snaps log-scale [min, max] to exact powers of logBase (nearest magnitude below/above).
  * If min and max would be equal after snapping, max is increased by one magnitude so the range is valid.
@@ -299,6 +339,8 @@ export function createRangeFunction(
 			minMax = getLogScaleRange(minMax, params, dataMin, dataMax, logBase);
 			const logFn = scale.log === 2 ? Math.log2 : Math.log10;
 			minMax = adjustLogRange(minMax, (logBase ?? 10) as number, logFn);
+		} else if (scale.distr === 4) {
+			minMax = getAsinhScaleRange(minMax, params, dataMin, dataMax, logBase);
 		}
 
 		minMax = applyHardLimits(minMax, params, scale.distr ?? 1);

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

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

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

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

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

@@ -0,0 +1,166 @@
+import { DistributionType } from 'lib/uPlotV2/config/types';
+
+import {
+	buildScatterConfig,
+	prepareScatterChartData,
+	resolveAxisDistribution,
+	ScatterAxisScale,
+	ScatterSeries,
+} from '../utils';
+
+jest.mock('lib/visualization/panels/utils/legendVisibilityUtils', () => ({
+	getStoredSeriesVisibility: jest.fn(),
+}));
+
+const SERIES: ScatterSeries[] = [
+	{ label: 'cart', xs: [10, 20], ys: [100, 200], sizes: [1, null] },
+	{ label: 'checkout', xs: [30], ys: [0] },
+];
+
+describe('prepareScatterChartData', () => {
+	it('lays series out as facets behind an empty x slot', () => {
+		expect(prepareScatterChartData(SERIES)).toStrictEqual([
+			null,
+			[
+				[10, 20],
+				[100, 200],
+				[1, null],
+			],
+			[[30], [0]],
+		]);
+	});
+});
+
+describe('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('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', () => {
+		it.each([
+			[
+				'positive values spanning three decades',
+				[1, 1000],
+				DistributionType.Logarithmic,
+			],
+			['positive values spanning less', [1, 999], DistributionType.Linear],
+			['a wide span that includes zero', [0, 1, 1e6], DistributionType.Linear],
+			['no finite values', [Number.NaN], DistributionType.Linear],
+		])('picks a scale for %s', (_, values, distribution) => {
+			expect(resolveAxisDistribution(values, ScatterAxisScale.Auto)).toStrictEqual(
+				{ distribution },
+			);
+		});
+
+		it('is the default', () => {
+			expect(resolveAxisDistribution([1, 1e4])).toStrictEqual({
+				distribution: DistributionType.Logarithmic,
+			});
+		});
+	});
+});
+
+describe('buildScatterConfig', () => {
+	const build = (
+		overrides: Partial<Parameters<typeof buildScatterConfig>[0]> = {},
+	): ReturnType<typeof buildScatterConfig> =>
+		buildScatterConfig({
+			id: 'scatter',
+			series: SERIES,
+			isDarkMode: true,
+			x: { unit: 'reqps' },
+			y: { unit: 'ms', scale: ScatterAxisScale.Log },
+			...overrides,
+		});
+
+	it('titles each axis with its label, and leaves an unlabelled one bare', () => {
+		const config = build({
+			x: { unit: 'reqps', label: 'Throughput' },
+			y: { unit: 'ms', label: '' },
+		}).getConfig();
+		const [xAxis, yAxis] = config.axes ?? [];
+
+		expect(xAxis?.label).toBe('Throughput');
+		expect(yAxis?.label).toBeUndefined();
+	});
+
+	it('emits a faceted plot with two value scales', () => {
+		const config = build().getConfig();
+
+		expect(config.mode).toBe(2);
+		expect(config.scales?.x).toMatchObject({ time: false, distr: 1 });
+		// The y column has a 0, so log becomes the symmetric variant.
+		expect(config.scales?.y).toMatchObject({ time: false, distr: 4 });
+	});
+
+	it('draws one faceted series per group with the plugin path builder', () => {
+		const config = build().getConfig();
+		const [, cart, checkout] = config.series ?? [];
+
+		expect(config.series).toHaveLength(3);
+		expect(cart).toMatchObject({
+			label: 'cart',
+			facets: [
+				{ scale: 'x', auto: true },
+				{ scale: 'y', auto: true },
+			],
+		});
+		expect(typeof cart?.paths).toBe('function');
+		expect(cart?.paths).toBe(checkout?.paths);
+		expect(cart?.points?.show).toBe(false);
+	});
+
+	it('formats both axes with their units', () => {
+		const config = build().getConfig();
+		const [xAxis, yAxis] = config.axes ?? [];
+
+		expect(xAxis).toMatchObject({ scale: 'x', side: 2, space: 90 });
+		expect(yAxis).toMatchObject({ scale: 'y', side: 3 });
+		expect(typeof xAxis?.values).toBe('function');
+		expect(typeof yAxis?.values).toBe('function');
+	});
+
+	it('registers a y threshold draw hook when thresholds are given', () => {
+		const config = build({
+			thresholds: [{ thresholdValue: 300, thresholdUnit: 'ms' }],
+		}).getConfig();
+
+		expect(config.hooks?.draw).toHaveLength(1);
+		expect(build().getConfig().hooks?.draw).toBeUndefined();
+	});
+});

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

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

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

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

frontend/src/pages/ApiMonitoring/stories/ApiMonitoringPage.stories.mocks.tsx

@@ -8,6 +8,7 @@ import {
 	QuickfiltertypesSourceDTO,
 	TelemetrytypesFieldContextDTO,
 	TelemetrytypesFieldDataTypeDTO,
+	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
 import { VIEWS } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
@@ -24,7 +25,10 @@ import {
 	toggleControl,
 } from '@/storybook/controls/controls';
 import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
-import { fieldValuesResponse } from '@/storybook/msw/__story_mockdata__/fields';
+import {
+	fieldKeysResponse,
+	fieldValuesResponse,
+} from '@/storybook/msw/__story_mockdata__/fields';
 import { quickFiltersResponse } from '@/storybook/msw/__story_mockdata__/quickFilters';
 
 import {
@@ -317,6 +321,21 @@ export const apiMonitoringMocks = defineStoryMocks({
 			})),
 		),
 
+		rest.get(
+			'http://localhost/api/v1/fields/keys',
+			response.json((req) =>
+				fieldKeysResponse(
+					groupByAttributeKeys(req.url.searchParams.get('searchText') ?? '').map(
+						({ key }) => key,
+					),
+					{
+						signal: TelemetrytypesSignalDTO.traces,
+						fieldContext: TelemetrytypesFieldContextDTO.attribute,
+					},
+				),
+			),
+		),
+
 		rest.get(
 			'http://localhost/api/v1/fields/values',
 			response.json((req) =>

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

@@ -8,6 +8,7 @@
 	background-color: var(--l1-background);
 	overflow-y: auto;
 	overflow-x: hidden;
+	scrollbar-gutter: stable;
 	padding-bottom: 44px;
 
 	@include custom-scrollbar;
@@ -42,11 +43,12 @@
 
 .eyebrow {
 	display: block;
-	font-size: 11px;
-	font-weight: 600;
-	padding: 16px;
-	letter-spacing: 0.06em;
-	color: var(--l1-foreground);
+	padding: 18px 20px 12px;
+	font-family: 'Geist Mono', monospace;
+	font-size: 12px;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	color: var(--l2-foreground);
 }
 
 .group {
@@ -73,9 +75,5 @@
 .sections {
 	display: flex;
 	flex-direction: column;
-
-	& > * {
-		padding: 0 16px;
-		border-top: 1px solid var(--l1-border);
-	}
+	border-bottom: 1px solid var(--l1-border);
 }

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

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type {
@@ -7,6 +8,7 @@ import type {
 import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
 import { SectionKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
 import { getSupportedSignals } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
+import { buildPluginSpec } from 'pages/DashboardPage/DashboardContainer/Panels/utils/buildPluginSpec';
 import { resolveSignal } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getBuilderQueries';
 import type { EQueryType } from 'types/common/dashboard';
 
@@ -25,6 +27,7 @@ interface ConfigPaneProps {
 	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
 	/** Switch the panel to another visualization kind. */
 	onChangePanelKind: (kind: PanelKind) => void;
+	originalPanelKind?: PanelKind;
 	/**
 	 * Active query type from the query-builder provider (the selected tab). Drives which
 	 * panel types the visualization switcher disables — read from the provider, not the
@@ -57,6 +60,7 @@ function ConfigPane({
 	spec,
 	onChangeSpec,
 	onChangePanelKind,
+	originalPanelKind,
 	queryType,
 	legendSeries,
 	tableColumns,
@@ -76,6 +80,11 @@ function ConfigPane({
 		(config) => config.kind !== SectionKind.PanelHeader,
 	);
 
+	const defaults = useMemo(
+		() => buildPluginSpec(definition.sections),
+		[definition],
+	);
+
 	const signal = resolveSignal(spec.queries, getSupportedSignals(panelKind)[0]);
 
 	// Title/description are just a slice of the spec — edit them through the same
@@ -120,11 +129,13 @@ function ConfigPane({
 						config={headerSection}
 						spec={spec}
 						onChangeSpec={onChangeSpec}
+						defaults={defaults}
 						legendSeries={legendSeries}
 						tableColumns={tableColumns}
 						signal={signal}
 						panelKind={panelKind}
 						onChangePanelKind={onChangePanelKind}
+						originalPanelKind={originalPanelKind}
 						queryType={queryType}
 						stepInterval={stepInterval}
 						metricUnit={metricUnit}
@@ -144,11 +155,13 @@ function ConfigPane({
 									config={config}
 									spec={spec}
 									onChangeSpec={onChangeSpec}
+									defaults={defaults}
 									legendSeries={legendSeries}
 									tableColumns={tableColumns}
 									signal={signal}
 									panelKind={panelKind}
 									onChangePanelKind={onChangePanelKind}
+									originalPanelKind={originalPanelKind}
 									queryType={queryType}
 									stepInterval={stepInterval}
 									metricUnit={metricUnit}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/PanelTypeSwitcher.module.scss

@@ -1,6 +1,56 @@
-// Matches ConfigPane's `.field` so the switcher lines up with the title/description fields.
-.field {
+@use '../../../../../../styles/scrollbar' as *;
+
+.trigger {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	padding: 5px 5px 5px 12px;
+	border: 1px solid var(--l2-border);
+	border-radius: 4px;
+	background: var(--l2-background);
+	font: inherit;
+	text-align: left;
+	cursor: pointer;
+
+	&:hover {
+		border-color: var(--l3-border);
+	}
+}
+
+.triggerIcon {
+	flex-shrink: 0;
+	color: var(--l2-foreground);
+}
+
+.triggerName {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	color: var(--l1-foreground);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.triggerAction {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 10px;
+	border-radius: 3px;
+	background: var(--l3-background);
+	color: var(--l2-foreground);
+	font-size: 12px;
+}
+
+.revert {
+	align-self: flex-start;
+}
+
+.drawerBody {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	min-height: 0;
+	overflow-y: auto;
+	@include custom-scrollbar;
 }

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

@@ -1,12 +1,17 @@
-import { Typography } from '@signozhq/ui/typography';
+import { useCallback, useState } from 'react';
+import { ArrowRightLeft, Undo2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import type { EQueryType } from 'types/common/dashboard';
 
+import PanelTypeBrowser from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeBrowser';
+import { getPanelDefinition } from '../../../Panels/registry';
 import type { PanelKind } from '../../../Panels/types/panelKind';
-import ConfigSelect from '../controls/ConfigSelect/ConfigSelect';
+import ConfigField from '../controls/ConfigField/ConfigField';
 
 import styles from './PanelTypeSwitcher.module.scss';
-import { usePanelTypeSelectItems } from './usePanelTypeSelectItems';
+import { getPanelTypeDisabledReason } from './utils';
 
 interface PanelTypeSwitcherProps {
 	/** The current panel kind (selected value). */
@@ -15,33 +20,96 @@ interface PanelTypeSwitcherProps {
 	queryType: EQueryType;
 	/** Panel's current signal — also gates the disabled rule (List needs logs/traces, not metrics). */
 	signal?: TelemetrytypesSignalDTO;
+	/** Kind the panel was opened with; a revert button appears once it differs. */
+	originalPanelKind?: PanelKind;
 	onChange: (kind: PanelKind) => void;
 }
 
 /**
- * Visualization-type selector (rendered inside the Visualization section). A type is
- * disabled when the active query type or signal is incompatible with it — resolved
- * through the capabilities guard. The signal is unknown for PromQL/ClickHouse, but
- * those query types still disable kinds that only support Query Builder (e.g. List).
+ * Visualization-type selector (rendered inside the Visualization section): opens the
+ * panel type browser in a drawer. A type is disabled when the active query type or
+ * signal is incompatible with it — resolved through the capabilities guard.
  */
 function PanelTypeSwitcher({
 	panelKind,
 	queryType,
 	signal,
+	originalPanelKind,
 	onChange,
 }: PanelTypeSwitcherProps): JSX.Element {
-	const items = usePanelTypeSelectItems({ queryType, signal });
+	const [isOpen, setIsOpen] = useState(false);
+	const { displayName, icon: Icon } = getPanelDefinition(panelKind);
+
+	const getDisabledReason = useCallback(
+		(kind: PanelKind): string | undefined =>
+			getPanelTypeDisabledReason({
+				kind,
+				queryType,
+				signal,
+				label: getPanelDefinition(kind).displayName,
+			}),
+		[queryType, signal],
+	);
+
+	const canRevert = !!originalPanelKind && originalPanelKind !== panelKind;
+	const revertBlockedReason = canRevert
+		? getDisabledReason(originalPanelKind)
+		: undefined;
+
+	const handleSelect = (kind: PanelKind): void => {
+		setIsOpen(false);
+		if (kind !== panelKind) {
+			onChange(kind);
+		}
+	};
 
 	return (
-		<div className={styles.field}>
-			<Typography.Text>Panel Type</Typography.Text>
-			<ConfigSelect
-				testId="panel-editor-v2-type-switcher"
-				value={panelKind}
-				items={items}
-				onChange={(value): void => onChange(value)}
-			/>
-		</div>
+		<ConfigField label="Panel type">
+			<button
+				type="button"
+				className={styles.trigger}
+				onClick={(): void => setIsOpen(true)}
+				data-testid="panel-editor-v2-type-switcher"
+			>
+				<Icon size={14} className={styles.triggerIcon} />
+				<span className={styles.triggerName}>{displayName}</span>
+				<span className={styles.triggerAction}>
+					<ArrowRightLeft size={14} />
+					Change
+				</span>
+			</button>
+			{canRevert && (
+				<Button
+					variant="link"
+					color="primary"
+					size="sm"
+					prefix={<Undo2 />}
+					className={styles.revert}
+					disabled={!!revertBlockedReason}
+					title={revertBlockedReason}
+					onClick={(): void => onChange(originalPanelKind)}
+					testId="panel-editor-v2-type-revert"
+				>
+					Revert to {getPanelDefinition(originalPanelKind).displayName}
+				</Button>
+			)}
+			<DrawerWrapper
+				open={isOpen}
+				onOpenChange={setIsOpen}
+				title="Change panel type"
+				subTitle="Pick a visualization for this panel."
+				direction="right"
+				width="wide"
+				testId="panel-type-switcher-drawer"
+				drawerDescriptionProps={{ className: styles.drawerBody }}
+			>
+				<PanelTypeBrowser
+					selectedKind={panelKind}
+					onSelect={handleSelect}
+					getDisabledReason={getDisabledReason}
+				/>
+			</DrawerWrapper>
+		</ConfigField>
 	);
 }
 

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

@@ -1,22 +1,30 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
 
 import PanelTypeSwitcher from '../PanelTypeSwitcher';
 import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
+const OPTIONS = [
+	{ kind: 'signoz/TimeSeriesPanel', displayName: 'Time Series' },
+	{ kind: 'signoz/NumberPanel', displayName: 'Number' },
+	{ kind: 'signoz/TablePanel', displayName: 'Table' },
+	{ kind: 'signoz/BarChartPanel', displayName: 'Bar Chart' },
+	{ kind: 'signoz/AreaChartPanel', displayName: 'Area' },
+	{ kind: 'signoz/PieChartPanel', displayName: 'Pie Chart' },
+	{ kind: 'signoz/HistogramPanel', displayName: 'Histogram' },
+	{ kind: 'signoz/ListPanel', displayName: 'List' },
+	{ kind: 'signoz/TextPanel', displayName: 'Text' },
+].map((option) => ({ ...option, icon: (): null => null }));
+
 // Stub the registry so the test doesn't pull in the real renderers and chart libs.
 jest.mock('pages/DashboardPage/DashboardContainer/Panels/registry', () => ({
 	getPanelDefinition: jest.fn(),
-	PANEL_OPTIONS: [
-		{ kind: 'signoz/TimeSeriesPanel', displayName: 'Time Series' },
-		{ kind: 'signoz/NumberPanel', displayName: 'Number' },
-		{ kind: 'signoz/TablePanel', displayName: 'Table' },
-		{ kind: 'signoz/BarChartPanel', displayName: 'Bar Chart' },
-		{ kind: 'signoz/PieChartPanel', displayName: 'Pie Chart' },
-		{ kind: 'signoz/HistogramPanel', displayName: 'Histogram' },
-		{ kind: 'signoz/ListPanel', displayName: 'List' },
-	].map((option) => ({ ...option, icon: (): null => null })),
+	get PANEL_OPTIONS(): unknown {
+		return OPTIONS;
+	},
 }));
 
 const mockGetPanelDefinition = getPanelDefinition as unknown as jest.Mock;
@@ -28,14 +36,34 @@ const SUPPORTED_QUERY_TYPES: Record<string, EQueryType[]> = {
 	'signoz/PieChartPanel': [EQueryType.QUERY_BUILDER, EQueryType.CLICKHOUSE],
 };
 
-function disabledLabels(): (string | null)[] {
-	return Array.from(
-		document.querySelectorAll('.ant-select-item-option-disabled'),
-	).map((el) => el.textContent);
+type User = ReturnType<typeof userEvent.setup>;
+
+async function renderSwitcher(
+	props: Partial<Parameters<typeof PanelTypeSwitcher>[0]> = {},
+): Promise<{ onChange: jest.Mock; user: User }> {
+	// The open drawer sets `pointer-events: none` on the body.
+	const user = userEvent.setup({ pointerEventsCheck: 0 });
+	const onChange = jest.fn();
+	render(
+		<TooltipProvider>
+			<PanelTypeSwitcher
+				panelKind="signoz/TimeSeriesPanel"
+				queryType={EQueryType.QUERY_BUILDER}
+				onChange={onChange}
+				{...props}
+			/>
+		</TooltipProvider>,
+	);
+	await user.click(screen.getByTestId('panel-editor-v2-type-switcher'));
+	return { onChange, user };
 }
 
-function openDropdown(): void {
-	fireEvent.mouseDown(screen.getByRole('combobox'));
+function disabledKinds(): (string | undefined)[] {
+	return Array.from(
+		document.querySelectorAll('[data-testid^="panel-type-signoz/"]'),
+	)
+		.filter((el) => el.getAttribute('aria-disabled') === 'true')
+		.map((el) => el.getAttribute('data-testid')?.replace('panel-type-', ''));
 }
 
 describe('PanelTypeSwitcher', () => {
@@ -44,7 +72,8 @@ describe('PanelTypeSwitcher', () => {
 		// List supports only logs/traces; every other kind also supports metrics.
 		// Query-type support comes from SUPPORTED_QUERY_TYPES (all three by default).
 		mockGetPanelDefinition.mockImplementation((kind: string) => ({
-			mode: 'query',
+			...OPTIONS.find((option) => option.kind === kind),
+			mode: kind === 'signoz/TextPanel' ? 'static' : 'query',
 			supportedSignals:
 				kind === 'signoz/ListPanel'
 					? ['logs', 'traces']
@@ -57,83 +86,94 @@ describe('PanelTypeSwitcher', () => {
 		}));
 	});
 
-	it('fires onChange with the chosen plugin kind', () => {
-		const onChange = jest.fn();
-		render(
-			<PanelTypeSwitcher
-				panelKind="signoz/TimeSeriesPanel"
-				queryType={EQueryType.QUERY_BUILDER}
-				onChange={onChange}
-			/>,
-		);
+	it('shows the current type and switches to the chosen one', async () => {
+		const { onChange, user } = await renderSwitcher();
 
-		openDropdown();
-		fireEvent.click(screen.getByText('List'));
+		expect(screen.getByTestId('panel-editor-v2-type-switcher')).toHaveTextContent(
+			'Time SeriesChange',
+		);
+		await user.click(screen.getByTestId('panel-type-signoz/ListPanel'));
 
 		expect(onChange).toHaveBeenCalledWith('signoz/ListPanel');
 	});
 
-	it('disables types whose supported signals exclude the current signal', () => {
-		render(
-			<PanelTypeSwitcher
-				panelKind="signoz/TimeSeriesPanel"
-				queryType={EQueryType.QUERY_BUILDER}
-				signal={TelemetrytypesSignalDTO.metrics}
-				onChange={jest.fn()}
-			/>,
-		);
+	it('does not fire onChange when the current type is picked again', async () => {
+		const { onChange, user } = await renderSwitcher();
 
-		openDropdown();
-		// List can't render a metrics query, so it's disabled; Time Series stays enabled.
-		expect(disabledLabels()).toContain('List');
-		expect(disabledLabels()).not.toContain('Time Series');
+		await user.click(screen.getByTestId('panel-type-signoz/TimeSeriesPanel'));
+
+		expect(onChange).not.toHaveBeenCalled();
 	});
 
-	it('does not disable any type when the signal is unknown (builder, no signal)', () => {
-		render(
-			<PanelTypeSwitcher
-				panelKind="signoz/TimeSeriesPanel"
-				queryType={EQueryType.QUERY_BUILDER}
-				onChange={jest.fn()}
-			/>,
-		);
+	it('disables types whose supported signals exclude the current signal', async () => {
+		const { onChange, user } = await renderSwitcher({
+			signal: TelemetrytypesSignalDTO.metrics,
+		});
 
-		openDropdown();
-		expect(
-			document.querySelectorAll('.ant-select-item-option-disabled'),
-		).toHaveLength(0);
+		expect(disabledKinds()).toStrictEqual(['signoz/ListPanel']);
+		await user.click(screen.getByTestId('panel-type-signoz/ListPanel'));
+		expect(onChange).not.toHaveBeenCalled();
 	});
 
-	it('disables Query-Builder-only kinds under PromQL even without a signal', () => {
-		render(
-			<PanelTypeSwitcher
-				panelKind="signoz/TimeSeriesPanel"
-				queryType={EQueryType.PROM}
-				onChange={jest.fn()}
-			/>,
-		);
+	it('does not disable any type when the signal is unknown (builder, no signal)', async () => {
+		await renderSwitcher();
 
-		openDropdown();
-		// List/Table/Pie can't be authored in PromQL; Time Series can.
-		expect(disabledLabels()).toContain('List');
-		expect(disabledLabels()).toContain('Table');
-		expect(disabledLabels()).toContain('Pie Chart');
-		expect(disabledLabels()).not.toContain('Time Series');
+		expect(disabledKinds()).toHaveLength(0);
 	});
 
-	it('disables List under ClickHouse while Table/Pie stay enabled', () => {
-		render(
-			<PanelTypeSwitcher
-				panelKind="signoz/TablePanel"
-				queryType={EQueryType.CLICKHOUSE}
-				onChange={jest.fn()}
-			/>,
-		);
+	it('disables Query-Builder-only kinds under PromQL even without a signal', async () => {
+		await renderSwitcher({ queryType: EQueryType.PROM });
 
-		openDropdown();
-		expect(disabledLabels()).toContain('List');
-		expect(disabledLabels()).not.toContain('Table');
-		expect(disabledLabels()).not.toContain('Pie Chart');
-		expect(disabledLabels()).not.toContain('Time Series');
+		expect(disabledKinds()).toStrictEqual(
+			expect.arrayContaining([
+				'signoz/ListPanel',
+				'signoz/TablePanel',
+				'signoz/PieChartPanel',
+			]),
+		);
+		expect(disabledKinds()).not.toContain('signoz/TimeSeriesPanel');
+		expect(disabledKinds()).not.toContain('signoz/TextPanel');
+	});
+
+	it('disables List under ClickHouse while Table/Pie stay enabled', async () => {
+		await renderSwitcher({
+			panelKind: 'signoz/TablePanel',
+			queryType: EQueryType.CLICKHOUSE,
+		});
+
+		expect(disabledKinds()).toStrictEqual(['signoz/ListPanel']);
+	});
+
+	describe('revert', () => {
+		it('is hidden while the type is the original one', async () => {
+			await renderSwitcher({ originalPanelKind: 'signoz/TimeSeriesPanel' });
+
+			expect(
+				screen.queryByTestId('panel-editor-v2-type-revert'),
+			).not.toBeInTheDocument();
+		});
+
+		it('switches back to the original type', async () => {
+			const { onChange, user } = await renderSwitcher({
+				panelKind: 'signoz/TablePanel',
+				originalPanelKind: 'signoz/TimeSeriesPanel',
+			});
+
+			const revert = screen.getByTestId('panel-editor-v2-type-revert');
+			expect(revert).toHaveTextContent('Revert to Time Series');
+			await user.click(revert);
+
+			expect(onChange).toHaveBeenCalledWith('signoz/TimeSeriesPanel');
+		});
+
+		it('is disabled when the original type no longer fits the query', async () => {
+			await renderSwitcher({
+				panelKind: 'signoz/TimeSeriesPanel',
+				originalPanelKind: 'signoz/ListPanel',
+				queryType: EQueryType.PROM,
+			});
+
+			expect(screen.getByTestId('panel-editor-v2-type-revert')).toBeDisabled();
+		});
 	});
 });

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/usePanelTypeSelectItems.tsx

@@ -18,8 +18,7 @@ interface UsePanelTypeSelectItemsArgs {
 /**
  * Visualization-kind options for a `ConfigSelect`, each disabled (with a reason
  * tooltip) when the active query type or signal is incompatible — resolved through
- * the capabilities guard. Shared by the editor's `PanelTypeSwitcher` and the View
- * modal's header so the two selectors apply the same rule and can't drift.
+ * the capabilities guard, the same rule the editor's `PanelTypeSwitcher` applies.
  */
 export function usePanelTypeSelectItems({
 	queryType,

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

@@ -6,16 +6,20 @@ import {
 	type SectionConfig,
 	SectionKind,
 } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
+import type { SeededPluginSpec } from 'pages/DashboardPage/DashboardContainer/Panels/utils/buildPluginSpec';
 
 import type { SectionEditorContext } from '../sectionContext';
-import { resolveSectionEditor } from '../sectionRegistry';
+import { getSectionDefault, resolveSectionEditor } from '../sectionRegistry';
 import SettingsSection from '../SettingsSection/SettingsSection';
+import { isChanged } from '../utils/changes';
 import SectionHeaderQuickAdd from './SectionHeaderQuickAdd';
 
 type SectionSlotProps = {
 	config: SectionConfig;
 	spec: DashboardtypesPanelSpecDTO;
 	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
+	/** The kind's seeded plugin spec (`buildPluginSpec`). */
+	defaults: SeededPluginSpec;
 	/** Renders the editor alone, for a section promoted into the Panel Details fields. */
 	bare?: boolean;
 } & Omit<SectionEditorContext, 'yAxisUnit' | 'registerHeaderAction'>;
@@ -52,12 +56,14 @@ function SectionSlot({
 	config,
 	spec,
 	onChangeSpec,
+	defaults,
 	bare,
 	legendSeries,
 	tableColumns,
 	signal,
 	panelKind,
 	onChangePanelKind,
+	originalPanelKind,
 	queryType,
 	stepInterval,
 	metricUnit,
@@ -103,8 +109,10 @@ function SectionSlot({
 		return null;
 	}
 
-	const { title, icon: Icon } = SECTION_METADATA[config.kind];
-	const { Component, get, update } = editor;
+	const { title } = SECTION_METADATA[config.kind];
+	const { Component, get, update, summarize } = editor;
+	const value = get(spec);
+	const defaultValue = getSectionDefault(editor, spec, defaults);
 	// Atomic sections carry no `controls`; controlled ones do.
 	const controls = 'controls' in config ? config.controls : undefined;
 	// Forwarded to editors that scope to the panel's unit (e.g. the thresholds unit picker).
@@ -113,20 +121,26 @@ function SectionSlot({
 
 	const headerSlot = SECTION_HEADER_SLOT[config.kind]?.(triggerHeaderAction);
 
+	const context: SectionEditorContext = {
+		legendSeries,
+		yAxisUnit,
+		tableColumns,
+		signal,
+		panelKind,
+		onChangePanelKind,
+		originalPanelKind,
+		queryType,
+		stepInterval,
+		metricUnit,
+	};
+
 	const editorElement = (
 		<Component
-			value={get(spec)}
+			value={value}
+			defaultValue={defaultValue}
 			controls={controls}
 			onChange={(next): void => onChangeSpec(update(spec, next))}
-			legendSeries={legendSeries}
-			yAxisUnit={yAxisUnit}
-			tableColumns={tableColumns}
-			signal={signal}
-			panelKind={panelKind}
-			onChangePanelKind={onChangePanelKind}
-			queryType={queryType}
-			stepInterval={stepInterval}
-			metricUnit={metricUnit}
+			{...context}
 			registerHeaderAction={registerHeaderAction}
 		/>
 	);
@@ -138,7 +152,8 @@ function SectionSlot({
 	return (
 		<SettingsSection
 			title={title}
-			icon={<Icon size={15} />}
+			summary={summarize?.(value, controls, context)}
+			changed={isChanged(value, defaultValue)}
 			open={open}
 			onOpenChange={setOpen}
 			headerSlot={headerSlot}

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

@@ -28,7 +28,12 @@ function Harness({ initial = [] }: { initial?: unknown[] } = {}): JSX.Element {
 		makeSpec(initial),
 	);
 	return (
-		<SectionSlot config={THRESHOLDS_CONFIG} spec={spec} onChangeSpec={setSpec} />
+		<SectionSlot
+			config={THRESHOLDS_CONFIG}
+			spec={spec}
+			defaults={{}}
+			onChangeSpec={setSpec}
+		/>
 	);
 }
 
@@ -70,3 +75,48 @@ describe('SectionSlot header action', () => {
 		expect(screen.getByTestId('threshold-value-0')).toBeInTheDocument();
 	});
 });
+
+describe('SectionSlot header summary', () => {
+	it('summarises a collapsed section and marks it changed', async () => {
+		const user = userEvent.setup();
+		render(
+			<Harness initial={[{ value: 80, color: '#F5B225', label: 'High' }]} />,
+		);
+
+		await user.click(screen.getByTestId('config-section-thresholds'));
+
+		expect(screen.getByText('1 threshold')).toBeInTheDocument();
+		expect(screen.getByTestId('config-changed-dot')).toBeInTheDocument();
+	});
+
+	it('shows no summary or changed marker for an untouched section', () => {
+		render(<Harness />);
+
+		expect(screen.queryByTestId('config-changed-dot')).not.toBeInTheDocument();
+		expect(screen.queryByText(/threshold$/)).not.toBeInTheDocument();
+	});
+});
+
+describe('SectionSlot rendered defaults', () => {
+	it('does not mark an explicit value that matches what unset renders as', () => {
+		const spec = {
+			display: { name: 'CPU' },
+			plugin: {
+				kind: 'signoz/TimeSeriesPanel',
+				spec: { formatting: { decimalPrecision: '2' } },
+			},
+			queries: [],
+		} as unknown as DashboardtypesPanelSpecDTO;
+
+		render(
+			<SectionSlot
+				config={{ kind: SectionKind.Formatting, controls: { decimals: true } }}
+				spec={spec}
+				defaults={{}}
+				onChangeSpec={jest.fn()}
+			/>,
+		);
+
+		expect(screen.queryByTestId('config-changed-dot')).not.toBeInTheDocument();
+	});
+});

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/SettingsSection/SettingsSection.module.scss

@@ -1,51 +1,53 @@
+.section {
+	border-top: 1px solid var(--l1-border);
+}
+
 .header {
 	display: flex;
 	align-items: center;
 	gap: 6px;
-	width: 100%;
-	height: 44px;
+	padding: 0 20px 0 0;
+
+	&:hover {
+		background: var(--l2-background);
+	}
 }
 
-// Disclosure control (icon tile + title); fills the row so the action slot and chevron sit right.
 .toggle {
 	display: flex;
 	flex: 1;
 	align-items: center;
-	gap: 11px;
+	gap: 10px;
 	min-width: 0;
-	padding: 0 !important;
+	padding: 18px 0 18px 20px;
 	border: none;
 	background: transparent;
+	font: inherit;
 	cursor: pointer;
-	color: var(--text-vanilla-100);
-	border-radius: 4px;
-}
-
-.iconTile {
-	display: grid;
-	place-items: center;
-	width: 27px;
-	height: 27px;
-	flex: none;
-	border-radius: 3px;
-	background: var(--l3-background);
-	color: var(--l3-foreground);
-	transition: all 0.15s ease;
-}
-
-.iconTileOpen {
-	background: color-mix(in srgb, var(--bg-robin-400) 14%, transparent);
-	color: var(--bg-robin-400);
 }
 
 .title {
+	font-size: 13px;
+	font-weight: 400;
+	white-space: nowrap;
+	color: var(--l1-foreground);
+}
+
+.summary {
 	flex: 1;
-	text-align: left;
-	font-weight: 600;
+	min-width: 0;
+	overflow: hidden;
+	font-size: 12px;
+	text-align: right;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 	color: var(--l2-foreground);
 }
 
 .chevron {
+	flex: none;
+	color: var(--l3-foreground);
+	cursor: pointer;
 	transition: transform 0.15s ease;
 
 	&.open {
@@ -56,6 +58,6 @@
 .body {
 	display: flex;
 	flex-direction: column;
-	gap: 16px;
-	padding: 2px 0 18px;
+	gap: 26px;
+	padding: 4px 20px 26px;
 }

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

@@ -1,18 +1,20 @@
 import { type ReactNode, useState } from 'react';
 import { ChevronDown } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 
+import ChangedDot from '../controls/ChangedDot/ChangedDot';
+
 import styles from './SettingsSection.module.scss';
 
 interface SettingsSectionProps {
 	title: string;
-	icon?: ReactNode;
 	defaultOpen?: boolean;
 	/** Controlled open state; when set, the section defers to `onOpenChange`. */
 	open?: boolean;
 	onOpenChange?: (open: boolean) => void;
+	/** One-line digest of the section's values, shown while collapsed. */
+	summary?: string;
+	changed?: boolean;
 	/** Rendered between the title and the chevron. */
 	headerSlot?: ReactNode;
 	children: ReactNode;
@@ -23,10 +25,11 @@ interface SettingsSectionProps {
  */
 function SettingsSection({
 	title,
-	icon,
 	defaultOpen = false,
 	open,
 	onOpenChange,
+	summary,
+	changed,
 	headerSlot,
 	children,
 }: SettingsSectionProps): JSX.Element {
@@ -51,30 +54,18 @@ function SettingsSection({
 					type="button"
 					className={styles.toggle}
 					aria-expanded={isOpen}
+					aria-label={isOpen ? `Collapse ${title}` : `Expand ${title}`}
 					data-testid={`config-section-${serializedTitle}`}
 					onClick={toggle}
 				>
-					{icon && (
-						<span className={cx(styles.iconTile, { [styles.iconTileOpen]: isOpen })}>
-							{icon}
-						</span>
-					)}
-					<Typography.Text className={styles.title}>{title}</Typography.Text>
+					<span className={styles.title}>{title}</span>
+					{changed && <ChangedDot title="Has changed settings" />}
+					<span className={styles.summary}>{isOpen ? '' : summary}</span>
 				</button>
 				{headerSlot}
-				<Button
-					type="button"
-					variant="ghost"
-					color="secondary"
-					size="icon"
-					prefix={
-						<ChevronDown
-							size={15}
-							className={cx(styles.chevron, { [styles.open]: isOpen })}
-						/>
-					}
-					aria-label={isOpen ? `Collapse ${title}` : `Expand ${title}`}
-					tabIndex={-1}
+				<ChevronDown
+					size={14}
+					className={cx(styles.chevron, { [styles.open]: isOpen })}
 					onClick={toggle}
 				/>
 			</div>

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

@@ -108,7 +108,7 @@ describe('ConfigPane', () => {
 
 		const toggle = screen.getByTestId('panel-header-hide');
 		expect(toggle).toBeInTheDocument();
-		expect(screen.getByText('Hide header')).toBeInTheDocument();
+		expect(screen.getByText('Hide panel header')).toBeInTheDocument();
 		// No collapsible wrapper of its own.
 		expect(screen.queryByText('Panel header')).not.toBeInTheDocument();
 	});

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

@@ -0,0 +1,80 @@
+.row {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+}
+
+.grid {
+	display: grid;
+	flex: none;
+	grid-template-columns: repeat(3, 28px);
+	gap: 4px;
+	padding: 6px;
+	border: 1px solid var(--l1-border);
+	border-radius: 4px;
+	background: var(--l2-background);
+}
+
+.cell {
+	position: relative;
+	display: grid;
+	place-items: center;
+	width: 28px;
+	height: 22px;
+	padding: 0;
+	border: 1px solid transparent;
+	border-radius: 3px;
+	background: transparent;
+	cursor: pointer;
+
+	&:hover {
+		background: var(--l3-background);
+	}
+
+	&:has(:focus-visible) {
+		outline: 1px solid var(--bg-robin-500);
+	}
+}
+
+.input {
+	position: absolute;
+	inset: 0;
+	margin: 0;
+	opacity: 0;
+	cursor: pointer;
+}
+
+.mark {
+	width: 10px;
+	height: 3px;
+	border-radius: 2px;
+	background: var(--l3-foreground);
+}
+
+.selected {
+	border-color: var(--bg-robin-500);
+	background: color-mix(in srgb, var(--bg-robin-500) 12%, transparent);
+
+	.mark {
+		width: 14px;
+		background: var(--bg-robin-400);
+	}
+}
+
+.text {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	min-width: 0;
+}
+
+.label {
+	font-size: 14px;
+	color: var(--l1-foreground);
+}
+
+.description {
+	font-size: 12px;
+	line-height: 17px;
+	color: var(--l2-foreground);
+}

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

@@ -0,0 +1,64 @@
+import { useId } from 'react';
+import cx from 'classnames';
+
+import { type Alignment, ALIGNMENT_CELLS, alignmentLabel } from './alignment';
+
+import styles from './AlignmentGrid.module.scss';
+
+interface AlignmentGridProps {
+	testId: string;
+	value: Alignment;
+	description?: string;
+	onChange: (next: Alignment) => void;
+}
+
+function AlignmentGrid({
+	testId,
+	value,
+	description,
+	onChange,
+}: AlignmentGridProps): JSX.Element {
+	const name = useId();
+
+	return (
+		<div className={styles.row}>
+			<div
+				role="radiogroup"
+				aria-label="Text position"
+				data-testid={testId}
+				className={styles.grid}
+			>
+				{ALIGNMENT_CELLS.map((cell) => {
+					const label = alignmentLabel(cell);
+					const selected =
+						cell.textAlign === value.textAlign &&
+						cell.verticalAlign === value.verticalAlign;
+					return (
+						<label
+							key={label}
+							title={label}
+							data-testid={`${testId}-${cell.verticalAlign}-${cell.textAlign}`}
+							className={cx(styles.cell, { [styles.selected]: selected })}
+						>
+							<input
+								type="radio"
+								className={styles.input}
+								name={name}
+								checked={selected}
+								aria-label={label}
+								onChange={(): void => onChange(cell)}
+							/>
+							<span className={styles.mark} />
+						</label>
+					);
+				})}
+			</div>
+			<div className={styles.text}>
+				<span className={styles.label}>{alignmentLabel(value)}</span>
+				{description && <span className={styles.description}>{description}</span>}
+			</div>
+		</div>
+	);
+}
+
+export default AlignmentGrid;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/AlignmentGrid/alignment.ts

@@ -0,0 +1,37 @@
+import {
+	DashboardtypesTextAlignDTO,
+	DashboardtypesVerticalAlignDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+const VERTICAL_LABELS: Record<DashboardtypesVerticalAlignDTO, string> = {
+	[DashboardtypesVerticalAlignDTO.top]: 'Top',
+	[DashboardtypesVerticalAlignDTO.center]: 'Middle',
+	[DashboardtypesVerticalAlignDTO.bottom]: 'Bottom',
+};
+
+const HORIZONTAL_LABELS: Record<DashboardtypesTextAlignDTO, string> = {
+	[DashboardtypesTextAlignDTO.left]: 'left',
+	[DashboardtypesTextAlignDTO.center]: 'center',
+	[DashboardtypesTextAlignDTO.right]: 'right',
+};
+
+export interface Alignment {
+	textAlign: DashboardtypesTextAlignDTO;
+	verticalAlign: DashboardtypesVerticalAlignDTO;
+}
+
+export const ALIGNMENT_CELLS: Alignment[] = Object.values(
+	DashboardtypesVerticalAlignDTO,
+).flatMap((verticalAlign) =>
+	Object.values(DashboardtypesTextAlignDTO).map((textAlign) => ({
+		textAlign,
+		verticalAlign,
+	})),
+);
+
+export function alignmentLabel({
+	textAlign,
+	verticalAlign,
+}: Alignment): string {
+	return `${VERTICAL_LABELS[verticalAlign]} ${HORIZONTAL_LABELS[textAlign]}`;
+}

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

@@ -1,7 +1,8 @@
 .row {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
-	gap: 6px;
+	gap: 8px 6px;
 }
 
 .swatch {

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

@@ -8,31 +8,14 @@ import {
 } from 'pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/background/presets';
 import type {
 	PanelTheme,
-	TextBackgroundPreset,
 	TextBackgroundSelection,
 } from 'pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/background/types';
 import { TextBackgroundKind } from 'pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/background/types';
 
+import { BASE_TITLES, type BaseSelection, PRESET_TITLES } from './titles';
+
 import styles from './BackgroundSwatches.module.scss';
 
-const PRESET_TITLES: Record<TextBackgroundPreset, string> = {
-	robin: 'Robin',
-	purple: 'Purple',
-	sakura: 'Sakura',
-	cherry: 'Cherry',
-	amber: 'Amber',
-	forest: 'Forest',
-	sienna: 'Sienna',
-	slate: 'Slate',
-};
-
-type BaseSelection = TextBackgroundKind.None | TextBackgroundKind.Default;
-
-const BASE_TITLES: Record<BaseSelection, string> = {
-	none: 'Transparent',
-	default: 'Default panel',
-};
-
 /** Neither base swatch shows a colour, so its tooltip says what it does. */
 const BASE_TOOLTIPS: Record<BaseSelection, string> = {
 	none: 'Transparent — no card, border or title bar',

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/BackgroundSwatches/titles.ts

@@ -0,0 +1,38 @@
+import {
+	type ResolvedTextBackground,
+	TextBackgroundKind,
+	type TextBackgroundPreset,
+} from 'pages/DashboardPage/DashboardContainer/Panels/kinds/TextPanel/background/types';
+
+export const PRESET_TITLES: Record<TextBackgroundPreset, string> = {
+	robin: 'Robin',
+	purple: 'Purple',
+	sakura: 'Sakura',
+	cherry: 'Cherry',
+	amber: 'Amber',
+	forest: 'Forest',
+	sienna: 'Sienna',
+	slate: 'Slate',
+};
+
+export type BaseSelection =
+	| TextBackgroundKind.None
+	| TextBackgroundKind.Default;
+
+export const BASE_TITLES: Record<BaseSelection, string> = {
+	none: 'Transparent',
+	default: 'Default panel',
+};
+
+export function backgroundTitle(background: ResolvedTextBackground): string {
+	switch (background.kind) {
+		case TextBackgroundKind.Preset:
+			return background.preset ? PRESET_TITLES[background.preset] : 'Custom';
+		case TextBackgroundKind.Custom:
+			return `Custom ${background.surface?.toUpperCase() ?? ''}`.trim();
+		case TextBackgroundKind.None:
+			return BASE_TITLES.none;
+		default:
+			return BASE_TITLES.default;
+	}
+}

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

@@ -0,0 +1,7 @@
+.dot {
+	flex: none;
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: var(--bg-robin-500);
+}

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

@@ -0,0 +1,18 @@
+import styles from './ChangedDot.module.scss';
+
+function ChangedDot({
+	title = 'Changed from default',
+}: {
+	title?: string;
+}): JSX.Element {
+	return (
+		<span
+			className={styles.dot}
+			title={title}
+			aria-label={title}
+			data-testid="config-changed-dot"
+		/>
+	);
+}
+
+export default ChangedDot;

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

@@ -0,0 +1,48 @@
+.field {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	min-width: 0;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	min-height: 18px;
+}
+
+.label {
+	font-family: 'Geist Mono', monospace;
+	font-size: 12px;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	white-space: nowrap;
+	color: var(--l2-foreground);
+}
+
+.plainLabel {
+	font-size: 13px;
+	color: var(--l1-foreground);
+}
+
+.reset {
+	padding: 0;
+	border: 0;
+	background: transparent;
+	font: inherit;
+	font-size: 12px;
+	color: var(--bg-robin-400);
+	cursor: pointer;
+
+	&:hover {
+		color: var(--bg-robin-300);
+	}
+}
+
+.help {
+	font-size: 12px;
+	line-height: 17px;
+	color: var(--l2-foreground);
+}

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

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+import cx from 'classnames';
+
+import styles from './ConfigField.module.scss';
+
+interface ConfigFieldProps {
+	label: ReactNode;
+	/** Shown under the control. */
+	help?: ReactNode;
+	changed?: boolean;
+	onReset?: () => void;
+	/** Plain body label instead of the uppercase field heading. */
+	plain?: boolean;
+	className?: string;
+	children: ReactNode;
+}
+
+function ConfigField({
+	label,
+	help,
+	changed,
+	onReset,
+	plain,
+	className,
+	children,
+}: ConfigFieldProps): JSX.Element {
+	return (
+		<div className={cx(styles.field, className)}>
+			<div className={styles.header}>
+				<span className={plain ? styles.plainLabel : styles.label}>{label}</span>
+				{changed && onReset && (
+					<button
+						type="button"
+						className={styles.reset}
+						data-testid="config-field-reset"
+						onClick={onReset}
+					>
+						Reset
+					</button>
+				)}
+			</div>
+			{children}
+			{help && <span className={styles.help}>{help}</span>}
+		</div>
+	);
+}
+
+export default ConfigField;

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

@@ -0,0 +1,5 @@
+.row {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+	gap: 10px;
+}

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+import styles from './ConfigFieldRow.module.scss';
+
+/** Side-by-side fields that wrap when the pane is narrow. */
+function ConfigFieldRow({ children }: { children: ReactNode }): JSX.Element {
+	return <div className={styles.row}>{children}</div>;
+}
+
+export default ConfigFieldRow;

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

@@ -0,0 +1,24 @@
+.row {
+	display: grid;
+	grid-template-columns: 76px minmax(0, 1fr);
+	align-items: center;
+	gap: 12px;
+}
+
+// Matches ConfigField's heading.
+.label {
+	font-family: 'Geist Mono', monospace;
+	font-size: 12px;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	white-space: nowrap;
+	color: var(--l2-foreground);
+}
+
+.help {
+	grid-column: 2;
+	margin-top: -4px;
+	font-size: 12px;
+	line-height: 17px;
+	color: var(--l2-foreground);
+}

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

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+import styles from './ConfigInlineField.module.scss';
+
+interface ConfigInlineFieldProps {
+	label: string;
+	/** Shown under the control. */
+	help?: ReactNode;
+	helpTestId?: string;
+	children: ReactNode;
+}
+
+/** A field whose heading sits beside the control rather than above it. */
+function ConfigInlineField({
+	label,
+	help,
+	helpTestId,
+	children,
+}: ConfigInlineFieldProps): JSX.Element {
+	return (
+		<div className={styles.row}>
+			<span className={styles.label}>{label}</span>
+			{children}
+			{help && (
+				<span className={styles.help} data-testid={helpTestId}>
+					{help}
+				</span>
+			)}
+		</div>
+	);
+}
+
+export default ConfigInlineField;

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

@@ -0,0 +1,47 @@
+import type { ChangeEvent } from 'react';
+import { Input } from 'antd';
+
+import ConfigField from '../ConfigField/ConfigField';
+
+interface ConfigNumberInputProps {
+	testId: string;
+	/** Omitted for an input whose row already names it. */
+	label?: string;
+	placeholder?: string;
+	value: number | null | undefined;
+	onChange: (next: number | null) => void;
+}
+
+/** Numeric input where empty means "auto"; transient non-numeric input (e.g. "-") clears. */
+function ConfigNumberInput({
+	testId,
+	label,
+	placeholder = 'Auto',
+	value,
+	onChange,
+}: ConfigNumberInputProps): JSX.Element {
+	const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
+		const raw = e.target.value;
+		onChange(raw === '' || Number.isNaN(Number(raw)) ? null : Number(raw));
+	};
+
+	const input = (
+		<Input
+			data-testid={testId}
+			type="number"
+			placeholder={placeholder}
+			value={value ?? ''}
+			onChange={handleChange}
+		/>
+	);
+
+	return label ? (
+		<ConfigField label={label} plain>
+			{input}
+		</ConfigField>
+	) : (
+		input
+	);
+}
+
+export default ConfigNumberInput;

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

@@ -0,0 +1,10 @@
+.range {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+	align-items: center;
+	gap: 10px;
+}
+
+.dash {
+	color: var(--l3-foreground);
+}

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

@@ -0,0 +1,40 @@
+import ConfigNumberInput from '../ConfigNumberInput/ConfigNumberInput';
+
+import styles from './ConfigRangeInput.module.scss';
+
+interface ConfigRangeInputProps {
+	/** Prefix for the `-soft-min` / `-soft-max` test ids. */
+	testIdPrefix: string;
+	min: number | null | undefined;
+	max: number | null | undefined;
+	onChangeMin: (next: number | null) => void;
+	onChangeMax: (next: number | null) => void;
+}
+
+function ConfigRangeInput({
+	testIdPrefix,
+	min,
+	max,
+	onChangeMin,
+	onChangeMax,
+}: ConfigRangeInputProps): JSX.Element {
+	return (
+		<div className={styles.range}>
+			<ConfigNumberInput
+				testId={`${testIdPrefix}-soft-min`}
+				placeholder="Min"
+				value={min}
+				onChange={onChangeMin}
+			/>
+			<span className={styles.dash}>–</span>
+			<ConfigNumberInput
+				testId={`${testIdPrefix}-soft-max`}
+				placeholder="Max"
+				value={max}
+				onChange={onChangeMax}
+			/>
+		</div>
+	);
+}
+
+export default ConfigRangeInput;

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

@@ -1,10 +0,0 @@
-.group {
-	width: 100%;
-}
-
-.segment {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	white-space: nowrap;
-}

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

@@ -1,59 +0,0 @@
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-
-import { SegmentIcon, type SegmentIconName } from '../segmentIcons';
-
-import styles from './ConfigSegmented.module.scss';
-
-export interface ConfigSegmentedItem {
-	value: string;
-	label: string;
-	icon?: SegmentIconName;
-}
-
-interface ConfigSegmentedProps<T extends string = string> {
-	testId: string;
-	value: T | undefined;
-	items: ConfigSegmentedItem[];
-	onChange: (value: T) => void;
-}
-
-/**
- * Inline segmented control for short option sets in the config pane (line style, fill
- * mode, axis scale, legend position). Each segment carries an optional muted glyph that
- * brightens with the selected state (it inherits the toggle's `currentColor`). Built on
- * the Periscope ToggleGroup so it stays theme-faithful.
- */
-function ConfigSegmented<T extends string = string>({
-	testId,
-	value,
-	items,
-	onChange,
-}: ConfigSegmentedProps<T>): JSX.Element {
-	return (
-		<ToggleGroupSimple
-			type="single"
-			testId={testId}
-			className={styles.group}
-			value={value}
-			items={items.map((item) => ({
-				value: item.value,
-				'aria-label': item.label,
-				label: (
-					<span className={styles.segment}>
-						{item.icon && <SegmentIcon name={item.icon} />}
-						{item.label}
-					</span>
-				),
-			}))}
-			// Single toggle-groups emit '' when the active segment is re-clicked; ignore that
-			// so a required choice (e.g. scale, position) can't be cleared to an empty value.
-			onChange={(next: T): void => {
-				if (next) {
-					onChange(next);
-				}
-			}}
-		/>
-	);
-}
-
-export default ConfigSegmented;

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

@@ -1,30 +1,31 @@
 .card {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	padding: 12px 14px;
-	border: 1px solid var(--l2-border);
-	border-radius: 2px;
-	background: var(--l2-background-60);
+	gap: 14px;
+	padding: 14px 16px;
+	border: 1px solid var(--l1-border);
+	border-radius: 4px;
+	background: var(--l2-background);
 }
 
 .text {
 	display: flex;
+	flex: 1;
 	flex-direction: column;
-	gap: 2px;
+	gap: 3px;
 	min-width: 0;
 }
 
 .title {
-	font-size: 12px;
-	font-weight: 600;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-	color: var(--l2-foreground);
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 14px;
+	color: var(--l1-foreground);
 }
 
 .description {
 	font-size: 12px;
-	color: var(--l3-foreground);
+	line-height: 17px;
+	color: var(--l2-foreground);
 }

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

@@ -1,39 +1,38 @@
+import type { ReactNode } from 'react';
 import { Switch } from '@signozhq/ui/switch';
-import { Typography } from '@signozhq/ui/typography';
+
+import ChangedDot from '../ChangedDot/ChangedDot';
 
 import styles from './ConfigSwitch.module.scss';
 
 interface ConfigSwitchProps {
 	testId: string;
-	/** Shown uppercased as the card title. */
 	title: string;
-	/** Optional helper line under the title. */
 	description?: string;
+	sketch?: ReactNode;
+	changed?: boolean;
 	value: boolean;
 	onChange: (checked: boolean) => void;
 }
 
-/**
- * Boolean toggle rendered as a bordered card: an uppercase title with an optional
- * description on the left and a Switch on the right. The standard presentation for
- * on/off panel-config controls (e.g. "Show points").
- */
 function ConfigSwitch({
 	testId,
 	title,
 	description,
+	sketch,
+	changed,
 	value,
 	onChange,
 }: ConfigSwitchProps): JSX.Element {
 	return (
 		<div className={styles.card}>
+			{sketch}
 			<div className={styles.text}>
-				<span className={styles.title}>{title}</span>
-				{description && (
-					<Typography.Text className={styles.description}>
-						{description}
-					</Typography.Text>
-				)}
+				<span className={styles.title}>
+					{title}
+					{changed && <ChangedDot />}
+				</span>
+				{description && <span className={styles.description}>{description}</span>}
 			</div>
 			<Switch testId={testId} value={value} onChange={onChange} />
 		</div>

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

@@ -0,0 +1,110 @@
+.container {
+	container-type: inline-size;
+}
+
+.grid {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: 8px;
+}
+
+.tile {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 14px;
+	min-width: 0;
+	height: 52px;
+	padding: 0 14px;
+	border: 1px solid var(--l1-border);
+	border-radius: 4px;
+	background: var(--l2-background);
+	color: var(--l2-foreground);
+	font: inherit;
+	font-size: 13px;
+	cursor: pointer;
+	transition:
+		border-color 150ms,
+		background 150ms;
+
+	&:hover {
+		border-color: var(--l2-border);
+	}
+
+	&:has(:focus-visible) {
+		outline: 1px solid var(--bg-robin-500);
+		outline-offset: 1px;
+	}
+}
+
+.input {
+	position: absolute;
+	inset: 0;
+	margin: 0;
+	opacity: 0;
+	cursor: pointer;
+}
+
+.selected {
+	border-color: var(--bg-robin-500);
+	background: color-mix(in srgb, var(--bg-robin-500) 12%, var(--l1-background));
+	color: var(--l1-foreground);
+
+	&:hover {
+		border-color: var(--bg-robin-500);
+	}
+}
+
+.label {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+@mixin stacked-tiles($columns) {
+	grid-template-columns: repeat($columns, minmax(0, 1fr));
+
+	.tile {
+		flex-direction: column;
+		justify-content: center;
+		gap: 10px;
+		height: 88px;
+		padding: 0 4px;
+	}
+}
+
+@container (min-width: 200px) {
+	.grid[data-count='2'] {
+		@include stacked-tiles(2);
+	}
+}
+
+@container (min-width: 216px) {
+	.grid[data-count='3'] {
+		@include stacked-tiles(3);
+	}
+}
+
+@container (min-width: 220px) {
+	.grid[data-count='4'] {
+		@include stacked-tiles(2);
+	}
+}
+
+@container (min-width: 420px) {
+	.grid[data-count='4'] {
+		@include stacked-tiles(4);
+	}
+}
+
+.grid.compact {
+	grid-auto-flow: column;
+	grid-auto-columns: minmax(0, 1fr);
+	gap: 6px;
+
+	.tile {
+		justify-content: center;
+		height: 36px;
+		padding: 0 4px;
+	}
+}

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

@@ -0,0 +1,72 @@
+import { type ReactNode, useId } from 'react';
+import cx from 'classnames';
+
+import styles from './ConfigTiles.module.scss';
+
+export interface ConfigTileItem<T extends string = string> {
+	value: T;
+	label: string;
+	drawing?: ReactNode;
+}
+
+interface ConfigTilesProps<T extends string> {
+	testId: string;
+	value: T | undefined;
+	items: ConfigTileItem<T>[];
+	onChange: (value: T) => void;
+	/** Compact text-only tiles on one row (e.g. decimal places). */
+	compact?: boolean;
+	'aria-label'?: string;
+}
+
+/**
+ * Single-choice tiles. Columns follow the container width: rows of 4 fold to 2×2 and
+ * any row too narrow for its tiles becomes a full-width list.
+ */
+function ConfigTiles<T extends string>({
+	testId,
+	value,
+	items,
+	onChange,
+	compact,
+	'aria-label': ariaLabel,
+}: ConfigTilesProps<T>): JSX.Element {
+	const name = useId();
+
+	return (
+		<div className={styles.container}>
+			<div
+				role="radiogroup"
+				aria-label={ariaLabel}
+				data-testid={testId}
+				data-count={items.length}
+				className={cx(styles.grid, { [styles.compact]: compact })}
+			>
+				{items.map((item) => {
+					const selected = item.value === value;
+					return (
+						<label
+							key={item.value}
+							data-testid={`${testId}-${item.value}`}
+							className={cx(styles.tile, { [styles.selected]: selected })}
+						>
+							<input
+								type="radio"
+								className={styles.input}
+								name={name}
+								value={item.value}
+								checked={selected}
+								aria-label={item.label}
+								onChange={(): void => onChange(item.value)}
+							/>
+							{item.drawing}
+							<span className={styles.label}>{item.label}</span>
+						</label>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
+
+export default ConfigTiles;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/LegendColorRow.tsx

@@ -1,6 +1,5 @@
 import { ColorPicker } from 'antd';
 import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
 
 import styles from './LegendColors.module.scss';
 
@@ -41,9 +40,9 @@ function LegendColorRow({
 					data-testid={`legend-color-${label}`}
 				>
 					<span className={styles.swatch} style={{ backgroundColor: color }} />
-					<Typography.Text className={styles.label} title={label}>
+					<span className={styles.label} title={label}>
 						{label}
-					</Typography.Text>
+					</span>
 				</button>
 			</ColorPicker>
 			{isOverridden && (

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

@@ -42,7 +42,9 @@
 
 .label {
 	overflow: hidden;
-	font-size: 12px;
+	font-family: var(--font-mono);
+	font-size: var(--font-size-xs);
+	letter-spacing: -0.01em;
 	color: var(--l2-foreground);
 	white-space: nowrap;
 	text-overflow: ellipsis;

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

@@ -40,7 +40,7 @@ function LegendColors({
 	if (series.length === 0) {
 		return (
 			<Typography.Text className={styles.empty}>
-				Run the panel to customise series colors.
+				Run the query to set a color for each series.
 			</Typography.Text>
 		);
 	}

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

@@ -15,7 +15,7 @@ describe('LegendColors', () => {
 		expect(
 			screen.queryByTestId('panel-editor-v2-legend-colors'),
 		).not.toBeInTheDocument();
-		expect(screen.getByText(/run the panel/i)).toBeInTheDocument();
+		expect(screen.getByText(/run the query/i)).toBeInTheDocument();
 	});
 
 	it('renders the search box once series are present', () => {

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+
+function LegendFrame({ children }: { children: ReactNode }): JSX.Element {
+	return (
+		<svg
+			width={56}
+			height={30}
+			viewBox="0 0 56 30"
+			fill="none"
+			strokeLinecap="round"
+			style={{ flex: 'none' }}
+			aria-hidden
+		>
+			<rect
+				x={1}
+				y={1}
+				width={54}
+				height={28}
+				rx={2}
+				stroke="var(--l3-border)"
+				strokeWidth={1.4}
+			/>
+			{children}
+		</svg>
+	);
+}
+
+export default LegendFrame;

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+
+function SketchSvg({ children }: { children: ReactNode }): JSX.Element {
+	return (
+		<svg
+			width={40}
+			height={22}
+			viewBox="0 0 40 22"
+			fill="none"
+			stroke="var(--l3-foreground)"
+			strokeWidth={1.8}
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			style={{ flex: 'none' }}
+			aria-hidden
+		>
+			{children}
+		</svg>
+	);
+}
+
+export default SketchSvg;

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

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+export type Tone = 'robin' | 'sakura' | 'forest' | 'amber';
+
+const TONE_COLOR: Record<Tone, string> = {
+	robin: 'var(--bg-robin-300)',
+	sakura: 'var(--bg-sakura-400)',
+	forest: 'var(--bg-forest-400)',
+	amber: 'var(--bg-amber-400)',
+};
+
+function TileSvg({
+	tone,
+	children,
+}: {
+	tone: Tone;
+	children: ReactNode;
+}): JSX.Element {
+	return (
+		<svg
+			width={64}
+			height={24}
+			viewBox="0 0 64 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth={2.4}
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			style={{ color: TONE_COLOR[tone], flex: 'none' }}
+			aria-hidden
+		>
+			{children}
+		</svg>
+	);
+}
+
+export default TileSvg;

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

@@ -0,0 +1,37 @@
+import SketchSvg from './SketchSvg';
+
+/** Muted sketches for on/off cards. */
+export const SWITCH_SKETCHES = {
+	hideHeader: (
+		<SketchSvg>
+			<rect x={3} y={3} width={34} height={16} rx={2} />
+			<path d="M3 8 H37" strokeDasharray="3 3" />
+		</SketchSvg>
+	),
+	fillGaps: (
+		<SketchSvg>
+			<path d="M3 9 L11 7 L16 19 L26 19 L30 8 L37 6" />
+		</SketchSvg>
+	),
+	points: (
+		<SketchSvg>
+			<path d="M4 17 L14 9 L24 13 L36 6" />
+			{[
+				[4, 17],
+				[14, 9],
+				[24, 13],
+				[36, 6],
+			].map(([cx, cy]) => (
+				<circle key={cx} cx={cx} cy={cy} r={2} fill="var(--l3-foreground)" />
+			))}
+		</SketchSvg>
+	),
+	combine: (
+		<SketchSvg>
+			<rect x={4} y={10} width={6} height={10} />
+			<rect x={13} y={4} width={6} height={16} />
+			<rect x={22} y={8} width={6} height={12} />
+			<rect x={31} y={13} width={6} height={7} />
+		</SketchSvg>
+	),
+} satisfies Record<string, JSX.Element>;

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

@@ -0,0 +1,164 @@
+import LegendFrame from './LegendFrame';
+import TileSvg from './TileSvg';
+
+const FILLED = { fill: 'currentColor', stroke: 'none' } as const;
+const LINE = 'M4 17 L18 9 L30 14 L44 5 L60 11';
+const POINTS = [
+	[4, 18],
+	[22, 8],
+	[40, 14],
+	[58, 6],
+];
+
+function interpDrawing(path: string): JSX.Element {
+	return (
+		<TileSvg tone="robin">
+			<path d={path} />
+			{POINTS.map(([cx, cy]) => (
+				<circle key={cx} cx={cx} cy={cy} r={2.2} {...FILLED} />
+			))}
+		</TileSvg>
+	);
+}
+
+export const TILE_DRAWINGS = {
+	lineSolid: (
+		<TileSvg tone="sakura">
+			<path d={LINE} />
+		</TileSvg>
+	),
+	lineDashed: (
+		<TileSvg tone="sakura">
+			<path d={LINE} strokeDasharray="5 5" />
+		</TileSvg>
+	),
+	interpLinear: interpDrawing('M4 18 L22 8 L40 14 L58 6'),
+	interpSpline: interpDrawing(
+		'M4 18 C 12 18, 14 8, 22 8 S 34 14, 40 14 S 52 6, 58 6',
+	),
+	interpStepBefore: interpDrawing('M4 18 V8 H22 V14 H40 V6 H58'),
+	interpStepAfter: interpDrawing('M4 18 H22 V8 H40 V14 H58 V6'),
+	fillNone: (
+		<TileSvg tone="forest">
+			<path d={LINE} />
+		</TileSvg>
+	),
+	fillSolid: (
+		<TileSvg tone="forest">
+			<path d={`${LINE} L60 22 L4 22Z`} {...FILLED} opacity={0.4} />
+			<path d={LINE} />
+		</TileSvg>
+	),
+	fillGradient: (
+		<TileSvg tone="forest">
+			<defs>
+				<linearGradient id="config-tile-fill-gradient" x1="0" y1="0" x2="0" y2="1">
+					<stop offset="0" stopColor="currentColor" stopOpacity={0.55} />
+					<stop offset="1" stopColor="currentColor" stopOpacity={0} />
+				</linearGradient>
+			</defs>
+			<path
+				d={`${LINE} L60 22 L4 22Z`}
+				fill="url(#config-tile-fill-gradient)"
+				stroke="none"
+			/>
+			<path d={LINE} />
+		</TileSvg>
+	),
+	gapsConnect: (
+		<TileSvg tone="amber">
+			<path d="M4 16 L14 11 L22 14" />
+			<path d="M22 14 L42 8" strokeDasharray="3 4" />
+			<path d="M42 8 L50 11 L60 6" />
+		</TileSvg>
+	),
+	gapsBreak: (
+		<TileSvg tone="amber">
+			<path d="M4 16 L14 11 L22 14" />
+			<path d="M42 8 L50 11 L60 6" />
+		</TileSvg>
+	),
+	scaleLinear: (
+		<TileSvg tone="robin">
+			<path d="M4 20 L60 4" />
+		</TileSvg>
+	),
+	scaleLog: (
+		<TileSvg tone="robin">
+			<path d="M4 20 C 8 8, 20 5, 60 4" />
+		</TileSvg>
+	),
+	barsSideBySide: (
+		<TileSvg tone="robin">
+			<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} />
+		</TileSvg>
+	),
+	barsStacked: (
+		<TileSvg tone="robin">
+			<rect x={14} y={13} width={11} height={9} {...FILLED} opacity={0.5} />
+			<rect x={14} y={4} width={11} height={8} {...FILLED} />
+			<rect x={38} y={15} width={11} height={7} {...FILLED} opacity={0.5} />
+			<rect x={38} y={8} width={11} height={6} {...FILLED} />
+		</TileSvg>
+	),
+	areaOverlap: (
+		<TileSvg tone="robin">
+			<path d="M4 15 L18 9 L32 13 L46 6 L60 9" />
+			<path d="M4 20 L18 15 L32 18 L46 13 L60 15" opacity={0.5} />
+		</TileSvg>
+	),
+	areaStacked: (
+		<TileSvg tone="robin">
+			<path
+				d="M4 22 L4 17 L18 15 L32 16 L46 14 L60 15 L60 22Z"
+				{...FILLED}
+				opacity={0.45}
+			/>
+			<path
+				d="M4 17 L18 15 L32 16 L46 14 L60 15 L60 8 L46 5 L32 9 L18 6 L4 10Z"
+				{...FILLED}
+			/>
+		</TileSvg>
+	),
+	areaPercent: (
+		<TileSvg tone="robin">
+			<path
+				d="M4 22 L4 12 L18 10 L32 13 L46 9 L60 11 L60 22Z"
+				{...FILLED}
+				opacity={0.45}
+			/>
+			<path d="M4 12 L18 10 L32 13 L46 9 L60 11 L60 2 L4 2Z" {...FILLED} />
+		</TileSvg>
+	),
+	legendBottom: (
+		<LegendFrame>
+			<path
+				d="M8 15 L18 10 L28 13 L38 7 L48 9"
+				stroke="var(--bg-robin-300)"
+				strokeWidth={2}
+			/>
+			<path
+				d="M8 23 H16 M22 23 H30 M36 23 H44"
+				stroke="var(--l2-foreground)"
+				strokeWidth={2.4}
+			/>
+		</LegendFrame>
+	),
+	legendRight: (
+		<LegendFrame>
+			<path
+				d="M6 20 L14 12 L22 16 L32 8"
+				stroke="var(--bg-robin-300)"
+				strokeWidth={2}
+			/>
+			<path
+				d="M40 9 H48 M40 15 H48 M40 21 H48"
+				stroke="var(--l2-foreground)"
+				strokeWidth={2.4}
+			/>
+		</LegendFrame>
+	),
+} satisfies Record<string, JSX.Element>;

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

@@ -1,145 +0,0 @@
-/**
- * Small glyph icons for the panel-editor segmented/select controls, ported from the
- * Configure-panel design. They render at 14px and inherit `currentColor` so the
- * surrounding control can dim them when unselected and brighten them when active.
- */
-export type SegmentIconName =
-	| 'solid-line'
-	| 'dashed-line'
-	| 'fill-none'
-	| 'fill-solid'
-	| 'fill-gradient'
-	| 'pos-bottom'
-	| 'pos-right'
-	| 'scale-linear'
-	| 'scale-log'
-	| 'interp-linear'
-	| 'interp-spline'
-	| 'interp-step-before'
-	| 'interp-step-after';
-
-function Svg({ children }: { children: React.ReactNode }): JSX.Element {
-	return (
-		<svg
-			width={14}
-			height={14}
-			viewBox="0 0 16 16"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth={1.5}
-			strokeLinecap="round"
-			strokeLinejoin="round"
-			style={{ flex: 'none' }}
-			aria-hidden
-		>
-			{children}
-		</svg>
-	);
-}
-
-const FILLED = { fill: 'currentColor', stroke: 'none' } as const;
-
-export function SegmentIcon({
-	name,
-}: {
-	name: SegmentIconName;
-}): JSX.Element | null {
-	switch (name) {
-		case 'solid-line':
-			return (
-				<Svg>
-					<path d="M2 8 H14" />
-				</Svg>
-			);
-		case 'dashed-line':
-			return (
-				<Svg>
-					<path d="M2 8 H4.5" />
-					<path d="M6.75 8 H9.25" />
-					<path d="M11.5 8 H14" />
-				</Svg>
-			);
-		case 'fill-none':
-			return (
-				<Svg>
-					<path d="M2 11 L6 6 L10 9 L14 5" />
-				</Svg>
-			);
-		case 'fill-solid':
-			return (
-				<Svg>
-					<path
-						d="M2 10.5 L6 5.5 L10 8.5 L14 4.5 V13.5 H2 Z"
-						fill="currentColor"
-						fillOpacity={0.85}
-						stroke="none"
-					/>
-					<path d="M2 10.5 L6 5.5 L10 8.5 L14 4.5" />
-				</Svg>
-			);
-		case 'fill-gradient':
-			return (
-				<Svg>
-					<path
-						d="M2 10.5 L6 5.5 L10 8.5 L14 4.5 V13.5 H2 Z"
-						fill="currentColor"
-						fillOpacity={0.3}
-						stroke="none"
-					/>
-					<path d="M2 10.5 L6 5.5 L10 8.5 L14 4.5" />
-				</Svg>
-			);
-		case 'pos-bottom':
-			return (
-				<Svg>
-					<rect x={2} y={2.5} width={12} height={9} rx={1.2} />
-					<rect x={2} y={9} width={12} height={2.5} {...FILLED} />
-				</Svg>
-			);
-		case 'pos-right':
-			return (
-				<Svg>
-					<rect x={2} y={2.5} width={12} height={9} rx={1.2} />
-					<rect x={10.5} y={2.5} width={3.5} height={9} {...FILLED} />
-				</Svg>
-			);
-		case 'scale-linear':
-			return (
-				<Svg>
-					<path d="M2.5 13 L13.5 3" />
-				</Svg>
-			);
-		case 'scale-log':
-			return (
-				<Svg>
-					<path d="M2.5 13 C5 13, 8 4.5, 13.5 3" />
-				</Svg>
-			);
-		case 'interp-linear':
-			return (
-				<Svg>
-					<path d="M2 12 L6 5 L10 9 L14 4" />
-				</Svg>
-			);
-		case 'interp-spline':
-			return (
-				<Svg>
-					<path d="M2 12 C5 3, 9 3, 14 8" />
-				</Svg>
-			);
-		case 'interp-step-before':
-			return (
-				<Svg>
-					<path d="M2 6 H6 V10 H10 V4.5 H14" />
-				</Svg>
-			);
-		case 'interp-step-after':
-			return (
-				<Svg>
-					<path d="M2 10 H6 V5 H10 V9.5 H14" />
-				</Svg>
-			);
-		default:
-			return null;
-	}
-}

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

@@ -16,6 +16,8 @@ export interface SectionEditorContext {
 	signal?: TelemetrytypesSignalDTO;
 	panelKind?: PanelKind;
 	onChangePanelKind?: (kind: PanelKind) => void;
+	/** Kind the panel was opened with, offered as a revert target. */
+	originalPanelKind?: PanelKind;
 	yAxisUnit?: string;
 	queryType?: EQueryType;
 	stepInterval?: number;

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

@@ -12,21 +12,32 @@ import {
 	type PanelChartAppearanceSlice,
 	type PanelFormattingSlice,
 	type PanelVisualizationSlice,
+	type SectionControlsOf,
 	type SectionEditorProps,
 	type SectionSpecMap,
 } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
+import type { SeededPluginSpec } from 'pages/DashboardPage/DashboardContainer/Panels/utils/buildPluginSpec';
 
 import type { SectionEditorContext } from './sectionContext';
 import AxesSection from './sections/AxesSection/AxesSection';
+import { summarizeAxes } from './sections/AxesSection/summary';
 import BucketsSection from './sections/BucketsSection/BucketsSection';
+import { summarizeBuckets } from './sections/BucketsSection/summary';
 import ChartAppearanceSection from './sections/ChartAppearanceSection/ChartAppearanceSection';
+import { summarizeChartAppearance } from './sections/ChartAppearanceSection/summary';
 import ContextLinksSection from './sections/ContextLinksSection/ContextLinksSection';
 import FormattingSection from './sections/FormattingSection/FormattingSection';
+import { DEFAULT_DECIMAL_PRECISION } from './sections/FormattingSection/options';
+import { summarizeFormatting } from './sections/FormattingSection/summary';
 import LegendSection from './sections/LegendSection/LegendSection';
+import { summarizeLegend } from './sections/LegendSection/summary';
 import PanelHeaderSection from './sections/PanelHeaderSection/PanelHeaderSection';
+import { summarizeTextLayout } from './sections/TextLayoutSection/summary';
 import TextLayoutSection from './sections/TextLayoutSection/TextLayoutSection';
 import ThresholdsSection from './sections/ThresholdsSection/ThresholdsSection';
+import { summarizeVisualization } from './sections/VisualizationSection/summary';
 import VisualizationSection from './sections/VisualizationSection/VisualizationSection';
+import { countSummary } from './utils/summary';
 
 type PanelSpec = DashboardtypesPanelSpecDTO;
 
@@ -39,6 +50,14 @@ export interface SectionDescriptor<K extends SectionKind> {
 	Component: ComponentType<SectionEditorProps<K>>;
 	get: (spec: PanelSpec) => SectionSpecMap[K] | undefined;
 	update: (spec: PanelSpec, value: SectionSpecMap[K]) => PanelSpec;
+	/** Values an unset field renders with, when the kind's seed leaves it unset. */
+	renderedDefaults?: Partial<SectionSpecMap[K]>;
+	/** Collapsed-header digest of the slice. */
+	summarize?: (
+		value: SectionSpecMap[K] | undefined,
+		controls: SectionControlsOf<K>,
+		ctx: SectionEditorContext,
+	) => string;
 }
 
 // The plugin spec is a discriminated union over panel kinds; reading/writing a shared
@@ -78,12 +97,15 @@ export const SECTION_REGISTRY: {
 			getPluginSlice<PanelFormattingSlice>(spec, 'formatting'),
 		update: (spec, formatting): PanelSpec =>
 			updatePluginSlice(spec, 'formatting', formatting),
+		renderedDefaults: { decimalPrecision: DEFAULT_DECIMAL_PRECISION },
+		summarize: summarizeFormatting,
 	},
 	[SectionKind.Axes]: {
 		Component: AxesSection,
 		get: (spec): DashboardtypesAxesDTO | undefined =>
 			getPluginSlice<DashboardtypesAxesDTO>(spec, 'axes'),
 		update: (spec, axes): PanelSpec => updatePluginSlice(spec, 'axes', axes),
+		summarize: summarizeAxes,
 	},
 	[SectionKind.Legend]: {
 		Component: LegendSection,
@@ -91,6 +113,7 @@ export const SECTION_REGISTRY: {
 			getPluginSlice<DashboardtypesLegendDTO>(spec, 'legend'),
 		update: (spec, legend): PanelSpec =>
 			updatePluginSlice(spec, 'legend', legend),
+		summarize: summarizeLegend,
 	},
 	[SectionKind.ChartAppearance]: {
 		Component: ChartAppearanceSection,
@@ -98,6 +121,7 @@ export const SECTION_REGISTRY: {
 			getPluginSlice<PanelChartAppearanceSlice>(spec, 'chartAppearance'),
 		update: (spec, chartAppearance): PanelSpec =>
 			updatePluginSlice(spec, 'chartAppearance', chartAppearance),
+		summarize: summarizeChartAppearance,
 	},
 	[SectionKind.Visualization]: {
 		Component: VisualizationSection,
@@ -105,6 +129,7 @@ export const SECTION_REGISTRY: {
 			getPluginSlice<PanelVisualizationSlice>(spec, 'visualization'),
 		update: (spec, visualization): PanelSpec =>
 			updatePluginSlice(spec, 'visualization', visualization),
+		summarize: summarizeVisualization,
 	},
 	[SectionKind.Buckets]: {
 		Component: BucketsSection,
@@ -112,6 +137,7 @@ export const SECTION_REGISTRY: {
 			getPluginSlice<DashboardtypesHistogramBucketsDTO>(spec, 'histogramBuckets'),
 		update: (spec, buckets): PanelSpec =>
 			updatePluginSlice(spec, 'histogramBuckets', buckets),
+		summarize: summarizeBuckets,
 	},
 	[SectionKind.TextLayout]: {
 		Component: TextLayoutSection,
@@ -119,6 +145,7 @@ export const SECTION_REGISTRY: {
 			getPluginSlice<SectionSpecMap[SectionKind.TextLayout]>(spec, 'presentation'),
 		update: (spec, presentation): PanelSpec =>
 			updatePluginSlice(spec, 'presentation', presentation),
+		summarize: summarizeTextLayout,
 	},
 	[SectionKind.PanelHeader]: {
 		Component: PanelHeaderSection,
@@ -135,6 +162,7 @@ export const SECTION_REGISTRY: {
 		// Panel-level slice (spec.links), not under the plugin spec — no cast needed.
 		get: (spec): DashboardtypesLinkDTO[] => spec.links || [],
 		update: (spec, links): PanelSpec => ({ ...spec, links }),
+		summarize: (links): string => countSummary(links, 'link'),
 	},
 	// One editor for every threshold variant (label / comparison / table); the kind's
 	// `controls.variant` picks the row editor + element shape. All persist to the same
@@ -145,6 +173,7 @@ export const SECTION_REGISTRY: {
 			getPluginSlice<AnyThreshold[]>(spec, 'thresholds'),
 		update: (spec, thresholds): PanelSpec =>
 			updatePluginSlice(spec, 'thresholds', thresholds),
+		summarize: (thresholds): string => countSummary(thresholds, 'threshold'),
 	},
 };
 
@@ -159,12 +188,19 @@ export interface ErasedSectionDescriptor {
 	Component: ComponentType<
 		{
 			value: unknown;
+			defaultValue?: unknown;
 			controls?: unknown;
 			onChange: (next: unknown) => void;
 		} & SectionEditorContext
 	>;
 	get: (spec: PanelSpec) => unknown;
 	update: (spec: PanelSpec, value: unknown) => PanelSpec;
+	renderedDefaults?: object;
+	summarize?: (
+		value: unknown,
+		controls: unknown,
+		ctx: SectionEditorContext,
+	) => string;
 }
 
 export function resolveSectionEditor(
@@ -174,3 +210,20 @@ export function resolveSectionEditor(
 		| ErasedSectionDescriptor
 		| undefined;
 }
+
+/** A slice's default, read through the same lens from the kind's seeded plugin spec. */
+export function getSectionDefault(
+	editor: ErasedSectionDescriptor,
+	spec: PanelSpec,
+	defaults: SeededPluginSpec,
+): unknown {
+	const seeded = editor.get({
+		...spec,
+		links: [],
+		plugin: { ...spec.plugin, spec: defaults },
+	} as PanelSpec);
+	if (!editor.renderedDefaults) {
+		return seeded;
+	}
+	return { ...editor.renderedDefaults, ...(seeded as object | undefined) };
+}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/AxesSection/AxesSection.module.scss

@@ -1,11 +1,5 @@
-.bounds {
+.fields {
 	display: flex;
-	gap: 8px;
-}
-
-.field {
-	display: flex;
-	flex: 1;
 	flex-direction: column;
-	gap: 8px;
+	gap: 14px;
 }

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

@@ -1,82 +1,60 @@
-import type { ChangeEvent } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import { Input } from 'antd';
 import type {
 	SectionEditorProps,
 	SectionKind,
 } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
 
-import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
+import ConfigField from '../../controls/ConfigField/ConfigField';
+import ConfigInlineField from '../../controls/ConfigInlineField/ConfigInlineField';
+import ConfigRangeInput from '../../controls/ConfigRangeInput/ConfigRangeInput';
+import ConfigTiles from '../../controls/ConfigTiles/ConfigTiles';
+import { createFieldResetter } from '../../utils/changes';
+import { AxisScale, RANGE_HELP, SCALE_HELP, SCALE_OPTIONS } from './options';
 
 import styles from './AxesSection.module.scss';
 
-type SoftBound = 'softMin' | 'softMax';
-
-const SCALE_OPTIONS = [
-	{ value: 'linear', label: 'Linear', icon: 'scale-linear' as const },
-	{ value: 'log', label: 'Log', icon: 'scale-log' as const },
-];
-
 /**
  * Edits the `axes` slice of a panel spec: soft Y-axis min/max bounds and the
  * linear/logarithmic scale toggle. Each control is gated by its `controls` flag.
  */
 function AxesSection({
 	value,
+	defaultValue,
 	controls,
 	onChange,
 }: SectionEditorProps<SectionKind.Axes>): JSX.Element {
-	// An empty field clears the bound (null); otherwise parse to a number, ignoring
-	// transient non-numeric input (e.g. a lone "-") by leaving the bound unset.
-	const handleBound =
-		(bound: SoftBound) =>
-		(e: ChangeEvent<HTMLInputElement>): void => {
-			const raw = e.target.value;
-			const next = raw === '' || Number.isNaN(Number(raw)) ? null : Number(raw);
-			onChange({ ...value, [bound]: next });
-		};
+	const reset = createFieldResetter(value, defaultValue, onChange);
+	const scale = value?.isLogScale ? AxisScale.LOG : AxisScale.LINEAR;
 
 	return (
-		<>
-			{controls.minMax && (
-				<div className={styles.bounds}>
-					<div className={styles.field}>
-						<Typography.Text>Soft min</Typography.Text>
-						<Input
-							data-testid="panel-editor-v2-soft-min"
-							type="number"
-							placeholder="Auto"
-							value={value?.softMin ?? ''}
-							onChange={handleBound('softMin')}
+		<ConfigField label="Y axis" {...reset('softMin', 'softMax', 'isLogScale')}>
+			<div className={styles.fields}>
+				{controls.minMax && (
+					<ConfigInlineField label="Range" help={RANGE_HELP}>
+						<ConfigRangeInput
+							testIdPrefix="panel-editor-v2"
+							min={value?.softMin}
+							max={value?.softMax}
+							onChangeMin={(softMin): void => onChange({ ...value, softMin })}
+							onChangeMax={(softMax): void => onChange({ ...value, softMax })}
 						/>
-					</div>
-					<div className={styles.field}>
-						<Typography.Text>Soft max</Typography.Text>
-						<Input
-							data-testid="panel-editor-v2-soft-max"
-							type="number"
-							placeholder="Auto"
-							value={value?.softMax ?? ''}
-							onChange={handleBound('softMax')}
-						/>
-					</div>
-				</div>
-			)}
+					</ConfigInlineField>
+				)}
 
-			{controls.logScale && (
-				<div className={styles.field}>
-					<Typography.Text>Y-axis scale</Typography.Text>
-					<ConfigSegmented
-						testId="panel-editor-v2-log-scale"
-						value={value?.isLogScale ? 'log' : 'linear'}
-						items={SCALE_OPTIONS}
-						onChange={(next): void =>
-							onChange({ ...value, isLogScale: next === 'log' })
-						}
-					/>
-				</div>
-			)}
-		</>
+				{controls.logScale && (
+					<ConfigField label="Scale" help={SCALE_HELP[scale]}>
+						<ConfigTiles
+							testId="panel-editor-v2-log-scale"
+							aria-label="Y-axis scale"
+							value={scale}
+							items={SCALE_OPTIONS}
+							onChange={(next): void =>
+								onChange({ ...value, isLogScale: next === AxisScale.LOG })
+							}
+						/>
+					</ConfigField>
+				)}
+			</div>
+		</ConfigField>
 	);
 }
 

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/AxesSection/__tests__/AxesSection.test.tsx

@@ -75,7 +75,7 @@ describe('AxesSection', () => {
 			/>,
 		);
 
-		await user.click(screen.getByText('Log'));
+		await user.click(screen.getByTestId('panel-editor-v2-log-scale-log'));
 
 		expect(onChange).toHaveBeenCalledWith({ isLogScale: true });
 	});

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/AxesSection/options.ts

@@ -0,0 +1,28 @@
+import type { ConfigTileItem } from '../../controls/ConfigTiles/ConfigTiles';
+import { TILE_DRAWINGS } from '../../controls/drawings/tileDrawings';
+
+export enum AxisScale {
+	LINEAR = 'linear',
+	LOG = 'log',
+}
+
+export const SCALE_OPTIONS: ConfigTileItem<AxisScale>[] = [
+	{
+		value: AxisScale.LINEAR,
+		label: 'Linear',
+		drawing: TILE_DRAWINGS.scaleLinear,
+	},
+	{
+		value: AxisScale.LOG,
+		label: 'Logarithmic',
+		drawing: TILE_DRAWINGS.scaleLog,
+	},
+];
+
+export const RANGE_HELP =
+	'The axis always shows at least this range. Data outside it still stretches the axis.';
+
+export const SCALE_HELP: Record<AxisScale, string> = {
+	[AxisScale.LINEAR]: 'Evenly spaced values.',
+	[AxisScale.LOG]: 'Spreads out values that span several orders of magnitude.',
+};

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/AxesSection/summary.ts

@@ -0,0 +1,26 @@
+import type { DashboardtypesAxesDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	SectionControlsOf,
+	SectionKind,
+} from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
+
+import { joinSummary } from '../../utils/summary';
+
+function describeRange({ softMin, softMax }: DashboardtypesAxesDTO): string {
+	const hasMin = typeof softMin === 'number';
+	const hasMax = typeof softMax === 'number';
+	if (!hasMin && !hasMax) {
+		return 'auto range';
+	}
+	return `${hasMin ? softMin : 'auto'} to ${hasMax ? softMax : 'auto'}`;
+}
+
+export function summarizeAxes(
+	value: DashboardtypesAxesDTO | undefined,
+	controls: SectionControlsOf<SectionKind.Axes>,
+): string {
+	return joinSummary([
+		controls.logScale && (value?.isLogScale ? 'Log' : 'Linear'),
+		controls.minMax && describeRange(value ?? {}),
+	]);
+}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/BucketsSection/BucketsSection.module.scss

@@ -1,5 +0,0 @@
-.field {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}

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

@@ -1,21 +1,14 @@
-import type { ChangeEvent } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import { Input } from 'antd';
-import type { DashboardtypesHistogramBucketsDTO } from 'api/generated/services/sigNoz.schemas';
 import type {
 	SectionEditorProps,
 	SectionKind,
 } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
 
+import ConfigField from '../../controls/ConfigField/ConfigField';
+import ConfigFieldRow from '../../controls/ConfigFieldRow/ConfigFieldRow';
+import ConfigNumberInput from '../../controls/ConfigNumberInput/ConfigNumberInput';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
-
-import styles from './BucketsSection.module.scss';
-
-// The two numeric bounds of the histogram-buckets spec (derived from the BE DTO).
-type NumericBound = keyof Pick<
-	DashboardtypesHistogramBucketsDTO,
-	'bucketCount' | 'bucketWidth'
->;
+import { SWITCH_SKETCHES } from '../../controls/drawings/switchSketches';
+import { createFieldResetter } from '../../utils/changes';
 
 /**
  * Edits the `histogramBuckets` slice of a Histogram panel spec: bucket count / width
@@ -24,55 +17,51 @@ type NumericBound = keyof Pick<
  */
 function BucketsSection({
 	value,
+	defaultValue,
 	controls,
 	onChange,
 }: SectionEditorProps<SectionKind.Buckets>): JSX.Element {
-	// Empty clears the bound to null (chart auto-sizes); otherwise parse to a number,
-	// ignoring transient non-numeric input by leaving it unset.
-	const handleNumber =
-		(bound: NumericBound) =>
-		(e: ChangeEvent<HTMLInputElement>): void => {
-			const raw = e.target.value;
-			const next = raw === '' || Number.isNaN(Number(raw)) ? null : Number(raw);
-			onChange({ ...value, [bound]: next });
-		};
+	const reset = createFieldResetter(value, defaultValue, onChange);
 
 	return (
 		<>
-			{controls.count && (
-				<div className={styles.field}>
-					<Typography.Text>Bucket count</Typography.Text>
-					<Input
-						data-testid="panel-editor-v2-bucket-count"
-						type="number"
-						placeholder="Auto"
-						value={value?.bucketCount ?? ''}
-						onChange={handleNumber('bucketCount')}
-					/>
-				</div>
-			)}
-
-			{controls.width && (
-				<div className={styles.field}>
-					<Typography.Text>Bucket width</Typography.Text>
-					<Input
-						data-testid="panel-editor-v2-bucket-width"
-						type="number"
-						placeholder="Auto"
-						value={value?.bucketWidth ?? ''}
-						onChange={handleNumber('bucketWidth')}
-					/>
-				</div>
+			{(controls.count || controls.width) && (
+				<ConfigField
+					label="Buckets"
+					help="How values are grouped into bars. Leave on Auto to size buckets from the data."
+					{...reset('bucketCount', 'bucketWidth')}
+				>
+					<ConfigFieldRow>
+						{controls.count && (
+							<ConfigNumberInput
+								testId="panel-editor-v2-bucket-count"
+								label="Count"
+								value={value?.bucketCount}
+								onChange={(bucketCount): void => onChange({ ...value, bucketCount })}
+							/>
+						)}
+						{controls.width && (
+							<ConfigNumberInput
+								testId="panel-editor-v2-bucket-width"
+								label="Width"
+								value={value?.bucketWidth}
+								onChange={(bucketWidth): void => onChange({ ...value, bucketWidth })}
+							/>
+						)}
+					</ConfigFieldRow>
+				</ConfigField>
 			)}
 
 			{controls.mergeQueries && (
 				<ConfigSwitch
 					testId="panel-editor-v2-merge-queries"
-					title="Merge active queries"
-					description="Bucket all active queries together into one distribution"
+					title="Combine queries"
+					description="Puts every active query into one distribution. Hides the legend."
+					sketch={SWITCH_SKETCHES.combine}
+					changed={reset('mergeAllActiveQueries').changed}
 					value={value?.mergeAllActiveQueries ?? false}
-					onChange={(checked): void =>
-						onChange({ ...value, mergeAllActiveQueries: checked })
+					onChange={(mergeAllActiveQueries): void =>
+						onChange({ ...value, mergeAllActiveQueries })
 					}
 				/>
 			)}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/BucketsSection/summary.ts

@@ -0,0 +1,15 @@
+import type { DashboardtypesHistogramBucketsDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { joinSummary } from '../../utils/summary';
+
+export function summarizeBuckets(
+	value: DashboardtypesHistogramBucketsDTO | undefined,
+): string {
+	const custom =
+		typeof value?.bucketCount === 'number' ||
+		typeof value?.bucketWidth === 'number';
+	return joinSummary([
+		custom ? 'Custom' : 'Auto',
+		value?.mergeAllActiveQueries && 'combined',
+	]);
+}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/ChartAppearanceSection.module.scss

@@ -1,7 +1,27 @@
-.field {
+.inset {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: 10px;
+	padding: 12px 14px;
+	border: 1px solid var(--l1-border);
+	border-radius: 4px;
+	background: var(--l2-background);
+}
+
+.insetRow {
+	flex-direction: row;
+	align-items: center;
+	gap: 12px;
+}
+
+.insetLabel {
+	font-size: 13px;
+	color: var(--l1-foreground);
+}
+
+.opacitySlider {
+	flex: 1;
+	min-width: 0;
 }
 
 .thresholdField {

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

@@ -1,91 +1,31 @@
-import { Typography } from '@signozhq/ui/typography';
-import {
-	DashboardtypesFillModeDTO,
-	DashboardtypesLineInterpolationDTO,
-	DashboardtypesLineStyleDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import cx from 'classnames';
+import { resolveFillOpacity } from 'lib/uPlotV2/utils/fillOpacity';
 import type {
 	SectionEditorProps,
 	SectionKind,
 } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
 
-import { resolveFillOpacity } from 'lib/uPlotV2/utils/fillOpacity';
-
-import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
-import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
+import ConfigField from '../../controls/ConfigField/ConfigField';
 import ConfigSlider from '../../controls/ConfigSlider/ConfigSlider';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
-import { SegmentIcon } from '../../controls/segmentIcons';
+import ConfigTiles from '../../controls/ConfigTiles/ConfigTiles';
+import { SWITCH_SKETCHES } from '../../controls/drawings/switchSketches';
 import type { SectionEditorContext } from '../../sectionContext';
+import { createFieldResetter } from '../../utils/changes';
 import DisconnectValuesField from './DisconnectValuesField';
+import {
+	FILL_MODE_OPTIONS,
+	FILLED_FILL_MODE_OPTIONS,
+	LINE_INTERPOLATION_HELP,
+	LINE_INTERPOLATION_OPTIONS,
+	LINE_STYLE_OPTIONS,
+} from './options';
+import { formatOpacity } from './utils';
 
 import styles from './ChartAppearanceSection.module.scss';
 
-const LINE_STYLE_OPTIONS = [
-	{
-		value: DashboardtypesLineStyleDTO.solid,
-		label: 'Solid',
-		icon: 'solid-line' as const,
-	},
-	{
-		value: DashboardtypesLineStyleDTO.dashed,
-		label: 'Dashed',
-		icon: 'dashed-line' as const,
-	},
-];
-
-const LINE_INTERPOLATION_OPTIONS = [
-	{
-		value: DashboardtypesLineInterpolationDTO.linear,
-		label: 'Linear',
-		icon: <SegmentIcon name="interp-linear" />,
-	},
-	{
-		value: DashboardtypesLineInterpolationDTO.spline,
-		label: 'Spline',
-		icon: <SegmentIcon name="interp-spline" />,
-	},
-	{
-		value: DashboardtypesLineInterpolationDTO.step_before,
-		label: 'Step before',
-		icon: <SegmentIcon name="interp-step-before" />,
-	},
-	{
-		value: DashboardtypesLineInterpolationDTO.step_after,
-		label: 'Step after',
-		icon: <SegmentIcon name="interp-step-after" />,
-	},
-];
-
-const FILL_MODE_OPTIONS = [
-	{
-		value: DashboardtypesFillModeDTO.none,
-		label: 'None',
-		icon: 'fill-none' as const,
-	},
-	{
-		value: DashboardtypesFillModeDTO.solid,
-		label: 'Solid',
-		icon: 'fill-solid' as const,
-	},
-	{
-		value: DashboardtypesFillModeDTO.gradient,
-		label: 'Gradient',
-		icon: 'fill-gradient' as const,
-	},
-];
-
-// An always-filled kind's wire enum (`AreaFillMode`) has no `none`.
-const FILLED_FILL_MODE_OPTIONS = FILL_MODE_OPTIONS.filter(
-	(option) => option.value !== DashboardtypesFillModeDTO.none,
-);
-
 const FILL_OPACITY_STEP = 0.01;
 
-function formatOpacity(opacity: number): string {
-	return `${Math.round(opacity * 100)}%`;
-}
-
 /**
  * Edits the `chartAppearance` slice of a TimeSeries panel spec: line style /
  * interpolation, fill mode, fill opacity, point markers, and the connect-null-gaps
@@ -93,84 +33,90 @@ function formatOpacity(opacity: number): string {
  */
 function ChartAppearanceSection({
 	value,
+	defaultValue,
 	controls,
 	onChange,
 	stepInterval,
 }: SectionEditorProps<SectionKind.ChartAppearance> &
 	Pick<SectionEditorContext, 'stepInterval'>): JSX.Element {
+	const reset = createFieldResetter(value, defaultValue, onChange);
+	const interpolation = value?.lineInterpolation;
+
 	return (
 		<>
 			{controls.lineStyle && (
-				<div className={styles.field}>
-					<Typography.Text>Line style</Typography.Text>
-					<ConfigSegmented
+				<ConfigField label="Line" {...reset('lineStyle')}>
+					<ConfigTiles
 						testId="panel-editor-v2-line-style"
+						aria-label="Line style"
 						value={value?.lineStyle}
 						items={LINE_STYLE_OPTIONS}
-						onChange={(next): void =>
-							onChange({ ...value, lineStyle: next as DashboardtypesLineStyleDTO })
-						}
+						onChange={(lineStyle): void => onChange({ ...value, lineStyle })}
 					/>
-				</div>
+				</ConfigField>
 			)}
 
 			{controls.lineInterpolation && (
-				<div className={styles.field}>
-					<Typography.Text>Line interpolation</Typography.Text>
-					<ConfigSelect
+				<ConfigField
+					label="How points connect"
+					help={interpolation && LINE_INTERPOLATION_HELP[interpolation]}
+					{...reset('lineInterpolation')}
+				>
+					<ConfigTiles
 						testId="panel-editor-v2-line-interpolation"
-						placeholder="Select interpolation…"
-						value={value?.lineInterpolation}
+						aria-label="How points connect"
+						value={interpolation}
 						items={LINE_INTERPOLATION_OPTIONS}
-						onChange={(next): void =>
-							onChange({
-								...value,
-								lineInterpolation: next,
-							})
+						onChange={(lineInterpolation): void =>
+							onChange({ ...value, lineInterpolation })
 						}
 					/>
-				</div>
+				</ConfigField>
 			)}
 
 			{controls.fillMode && (
-				<div className={styles.field}>
-					<Typography.Text>Fill mode</Typography.Text>
-					<ConfigSegmented
+				<ConfigField
+					label="Area under the line"
+					{...reset('fillMode', 'fillOpacity')}
+				>
+					<ConfigTiles
 						testId="panel-editor-v2-fill-mode"
+						aria-label="Area under the line"
 						value={value?.fillMode}
 						items={
 							controls.fillOpacity ? FILLED_FILL_MODE_OPTIONS : FILL_MODE_OPTIONS
 						}
-						onChange={(next): void =>
-							onChange({ ...value, fillMode: next as DashboardtypesFillModeDTO })
-						}
+						onChange={(fillMode): void => onChange({ ...value, fillMode })}
 					/>
-				</div>
-			)}
-
-			{controls.fillOpacity && (
-				<div className={styles.field}>
-					<Typography.Text>Fill opacity</Typography.Text>
-					<ConfigSlider
-						testId="panel-editor-v2-fill-opacity"
-						// The chart's own default, so the thumb starts where an unset fill renders.
-						value={resolveFillOpacity(value?.fillOpacity)}
-						min={0}
-						max={1}
-						step={FILL_OPACITY_STEP}
-						formatValue={formatOpacity}
-						onChange={(fillOpacity): void => onChange({ ...value, fillOpacity })}
-					/>
-				</div>
+					{controls.fillOpacity && (
+						<div className={cx(styles.inset, styles.insetRow)}>
+							<span className={styles.insetLabel}>Opacity</span>
+							<div className={styles.opacitySlider}>
+								<ConfigSlider
+									testId="panel-editor-v2-fill-opacity"
+									// The chart's own default, so the thumb starts where an unset fill renders.
+									value={resolveFillOpacity(value?.fillOpacity)}
+									min={0}
+									max={1}
+									step={FILL_OPACITY_STEP}
+									formatValue={formatOpacity}
+									onChange={(fillOpacity): void => onChange({ ...value, fillOpacity })}
+								/>
+							</div>
+						</div>
+					)}
+				</ConfigField>
 			)}
 
 			{controls.showPoints && (
 				<ConfigSwitch
 					testId="panel-editor-v2-show-points"
 					title="Show points"
-					description="Display individual data points on the chart"
+					description="Marks each sample the query returned."
+					sketch={SWITCH_SKETCHES.points}
+					changed={reset('showPoints').changed}
 					value={value?.showPoints ?? false}
-					onChange={(checked): void => onChange({ ...value, showPoints: checked })}
+					onChange={(showPoints): void => onChange({ ...value, showPoints })}
 				/>
 			)}
 
@@ -179,6 +125,7 @@ function ChartAppearanceSection({
 					testId="panel-editor-v2-span-gaps"
 					value={value?.spanGaps}
 					stepInterval={stepInterval}
+					{...reset('spanGaps')}
 					onChange={(spanGaps): void => onChange({ ...value, spanGaps })}
 				/>
 			)}

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

@@ -1,24 +1,16 @@
 import { useEffect, useState } from 'react';
-import { rangeUtil } from '@grafana/data';
-import { Typography } from '@signozhq/ui/typography';
 import type { DashboardtypesSpanGapsDTO } from 'api/generated/services/sigNoz.schemas';
 
-import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
+import ConfigField from '../../controls/ConfigField/ConfigField';
+import ConfigTiles from '../../controls/ConfigTiles/ConfigTiles';
+import type { FieldResetProps } from '../../utils/changes';
 import DisconnectValuesThresholdInput from './DisconnectValuesThresholdInput';
+import { DISCONNECT_MODE_OPTIONS, DisconnectValuesMode } from './options';
+import { defaultDisconnectDuration } from './utils';
 
 import styles from './ChartAppearanceSection.module.scss';
 
-const DEFAULT_THRESHOLD = '1m';
-enum DisconnectValuesMode {
-	NEVER = 'never',
-	THRESHOLD = 'threshold',
-}
-const MODE_OPTIONS = [
-	{ value: DisconnectValuesMode.NEVER, label: 'Never' },
-	{ value: DisconnectValuesMode.THRESHOLD, label: 'Threshold' },
-];
-
-interface DisconnectValuesFieldProps {
+interface DisconnectValuesFieldProps extends FieldResetProps {
 	testId: string;
 	value: DashboardtypesSpanGapsDTO | undefined;
 	/** Query step interval (seconds): seeds the default threshold and floors it. */
@@ -26,13 +18,6 @@ interface DisconnectValuesFieldProps {
 	onChange: (next: DashboardtypesSpanGapsDTO | undefined) => void;
 }
 
-/** Default threshold duration: the step interval (smallest meaningful), else 1m. */
-function defaultDuration(stepInterval?: number): string {
-	return stepInterval && stepInterval > 0
-		? rangeUtil.secondsToHms(stepInterval)
-		: DEFAULT_THRESHOLD;
-}
-
 /**
  * "Disconnect values": Never (span every gap — the chart default) vs Threshold
  * (only bridge gaps shorter than a duration). The threshold persists as a
@@ -43,6 +28,8 @@ function DisconnectValuesField({
 	testId,
 	value,
 	stepInterval,
+	changed,
+	onReset,
 	onChange,
 }: DisconnectValuesFieldProps): JSX.Element {
 	const duration = value?.fillLessThan || undefined;
@@ -63,7 +50,7 @@ function DisconnectValuesField({
 				...value,
 				fillOnlyBelow: true,
 				// Seed from the live stepInterval (async — undefined until results load), not mount.
-				fillLessThan: lastDuration ?? defaultDuration(stepInterval),
+				fillLessThan: lastDuration ?? defaultDisconnectDuration(stepInterval),
 			});
 			return;
 		}
@@ -72,21 +59,24 @@ function DisconnectValuesField({
 	};
 
 	return (
-		<>
-			<div className={styles.field}>
-				<Typography.Text>Disconnect values</Typography.Text>
-				<ConfigSegmented
-					testId={testId}
-					value={
-						isThreshold ? DisconnectValuesMode.THRESHOLD : DisconnectValuesMode.NEVER
-					}
-					items={MODE_OPTIONS}
-					onChange={handleMode}
-				/>
-			</div>
+		<ConfigField
+			label="When data is missing"
+			help="Breaking the line makes outages and restarts visible."
+			changed={changed}
+			onReset={onReset}
+		>
+			<ConfigTiles
+				testId={testId}
+				aria-label="When data is missing"
+				value={
+					isThreshold ? DisconnectValuesMode.THRESHOLD : DisconnectValuesMode.NEVER
+				}
+				items={DISCONNECT_MODE_OPTIONS}
+				onChange={handleMode}
+			/>
 			{isThreshold && duration && (
-				<div className={styles.field}>
-					<Typography.Text>Threshold value</Typography.Text>
+				<div className={styles.inset}>
+					<span className={styles.insetLabel}>Break when a gap is longer than</span>
 					<DisconnectValuesThresholdInput
 						testId={`${testId}-value`}
 						value={duration}
@@ -97,7 +87,7 @@ function DisconnectValuesField({
 					/>
 				</div>
 			)}
-		</>
+		</ConfigField>
 	);
 }
 

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

@@ -30,16 +30,6 @@ function StatefulSpanGaps({
 	);
 }
 
-// Open the antd Select by clicking its selector, then pick the option by label. The
-// line-style and fill-mode controls are ConfigSegmented (buttons), so this helper is
-// only used for the line-interpolation ConfigSelect.
-async function pickOption(triggerTestId: string, label: string): Promise<void> {
-	const user = userEvent.setup();
-	const trigger = screen.getByTestId(triggerTestId);
-	await user.click(trigger.querySelector('.ant-select-selector') as HTMLElement);
-	await user.click(await screen.findByRole('option', { name: label }));
-}
-
 const ALL_CONTROLS = {
 	lineStyle: true,
 	lineInterpolation: true,
@@ -109,7 +99,7 @@ describe('ChartAppearanceSection', () => {
 		render(
 			<ChartAppearanceSection
 				value={undefined}
-				controls={{ fillOpacity: true }}
+				controls={{ fillMode: true, fillOpacity: true }}
 				onChange={jest.fn()}
 			/>,
 		);
@@ -126,7 +116,7 @@ describe('ChartAppearanceSection', () => {
 		render(
 			<ChartAppearanceSection
 				value={{ fillOpacity: 0.25 }}
-				controls={{ fillOpacity: true }}
+				controls={{ fillMode: true, fillOpacity: true }}
 				onChange={jest.fn()}
 			/>,
 		);
@@ -165,7 +155,7 @@ describe('ChartAppearanceSection', () => {
 		expect(screen.getByText('Gradient')).toBeInTheDocument();
 	});
 
-	it('writes the chosen line interpolation through the dropdown', async () => {
+	it('writes the chosen line interpolation through the tiles', async () => {
 		const onChange = jest.fn();
 		render(
 			<ChartAppearanceSection
@@ -175,7 +165,9 @@ describe('ChartAppearanceSection', () => {
 			/>,
 		);
 
-		await pickOption('panel-editor-v2-line-interpolation', 'Spline');
+		await userEvent
+			.setup()
+			.click(screen.getByTestId('panel-editor-v2-line-interpolation-spline'));
 
 		expect(onChange).toHaveBeenCalledWith({ lineInterpolation: 'spline' });
 	});
@@ -205,7 +197,9 @@ describe('ChartAppearanceSection', () => {
 			/>,
 		);
 
-		expect(screen.getByText('Never')).toBeInTheDocument();
+		expect(
+			screen.getByTestId('panel-editor-v2-span-gaps-never'),
+		).toBeInTheDocument();
 		expect(
 			screen.queryByTestId('panel-editor-v2-span-gaps-value'),
 		).not.toBeInTheDocument();
@@ -222,7 +216,7 @@ describe('ChartAppearanceSection', () => {
 			/>,
 		);
 
-		await user.click(screen.getByText('Threshold'));
+		await user.click(screen.getByTestId('panel-editor-v2-span-gaps-threshold'));
 
 		expect(onChange).toHaveBeenLastCalledWith({
 			spanGaps: { fillOnlyBelow: true, fillLessThan: '1m' },
@@ -284,7 +278,7 @@ describe('ChartAppearanceSection', () => {
 			/>,
 		);
 
-		await user.click(screen.getByText('Never'));
+		await user.click(screen.getByTestId('panel-editor-v2-span-gaps-never'));
 
 		expect(onChange).toHaveBeenLastCalledWith({
 			spanGaps: { fillOnlyBelow: false, fillLessThan: undefined },
@@ -360,7 +354,7 @@ describe('ChartAppearanceSection', () => {
 			/>,
 		);
 
-		await user.click(screen.getByText('Threshold'));
+		await user.click(screen.getByTestId('panel-editor-v2-span-gaps-threshold'));
 
 		expect(onChange).toHaveBeenLastCalledWith({
 			spanGaps: { fillOnlyBelow: true, fillLessThan: '5m' },
@@ -388,7 +382,7 @@ describe('ChartAppearanceSection', () => {
 			/>,
 		);
 
-		await user.click(screen.getByText('Threshold'));
+		await user.click(screen.getByTestId('panel-editor-v2-span-gaps-threshold'));
 
 		// Regression: a value seeded at mount would still be the 1m fallback.
 		expect(onChange).toHaveBeenLastCalledWith({
@@ -442,7 +436,7 @@ describe('ChartAppearanceSection', () => {
 
 		// Focus the input first so clicking Never also fires its blur (the toggle race).
 		await user.click(screen.getByTestId('panel-editor-v2-span-gaps-value'));
-		await user.click(screen.getByText('Never'));
+		await user.click(screen.getByTestId('panel-editor-v2-span-gaps-never'));
 
 		expect(
 			screen.queryByTestId('panel-editor-v2-span-gaps-value'),
@@ -453,8 +447,8 @@ describe('ChartAppearanceSection', () => {
 		const user = userEvent.setup();
 		render(<StatefulSpanGaps initial={{ spanGaps: { fillLessThan: '5m' } }} />);
 
-		await user.click(screen.getByText('Never'));
-		await user.click(screen.getByText('Threshold'));
+		await user.click(screen.getByTestId('panel-editor-v2-span-gaps-never'));
+		await user.click(screen.getByTestId('panel-editor-v2-span-gaps-threshold'));
 
 		expect(screen.getByTestId('panel-editor-v2-span-gaps-value')).toHaveValue(
 			'5m',

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/options.ts

@@ -0,0 +1,101 @@
+import {
+	DashboardtypesFillModeDTO,
+	DashboardtypesLineInterpolationDTO,
+	DashboardtypesLineStyleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import type { ConfigTileItem } from '../../controls/ConfigTiles/ConfigTiles';
+import { TILE_DRAWINGS } from '../../controls/drawings/tileDrawings';
+
+export const LINE_STYLE_OPTIONS: ConfigTileItem<DashboardtypesLineStyleDTO>[] =
+	[
+		{
+			value: DashboardtypesLineStyleDTO.solid,
+			label: 'Solid',
+			drawing: TILE_DRAWINGS.lineSolid,
+		},
+		{
+			value: DashboardtypesLineStyleDTO.dashed,
+			label: 'Dashed',
+			drawing: TILE_DRAWINGS.lineDashed,
+		},
+	];
+
+export const LINE_INTERPOLATION_OPTIONS: ConfigTileItem<DashboardtypesLineInterpolationDTO>[] =
+	[
+		{
+			value: DashboardtypesLineInterpolationDTO.linear,
+			label: 'Straight',
+			drawing: TILE_DRAWINGS.interpLinear,
+		},
+		{
+			value: DashboardtypesLineInterpolationDTO.spline,
+			label: 'Smooth',
+			drawing: TILE_DRAWINGS.interpSpline,
+		},
+		{
+			value: DashboardtypesLineInterpolationDTO.step_before,
+			label: 'Step before',
+			drawing: TILE_DRAWINGS.interpStepBefore,
+		},
+		{
+			value: DashboardtypesLineInterpolationDTO.step_after,
+			label: 'Step after',
+			drawing: TILE_DRAWINGS.interpStepAfter,
+		},
+	];
+
+export const LINE_INTERPOLATION_HELP: Record<
+	DashboardtypesLineInterpolationDTO,
+	string
+> = {
+	[DashboardtypesLineInterpolationDTO.linear]:
+		'Joins each point with a straight line.',
+	[DashboardtypesLineInterpolationDTO.spline]:
+		'Curves through each point. Can overshoot between points.',
+	[DashboardtypesLineInterpolationDTO.step_before]:
+		'Jumps to each new value before its timestamp.',
+	[DashboardtypesLineInterpolationDTO.step_after]:
+		'Holds each value until the next point arrives.',
+};
+
+export const FILL_MODE_OPTIONS: ConfigTileItem<DashboardtypesFillModeDTO>[] = [
+	{
+		value: DashboardtypesFillModeDTO.none,
+		label: 'None',
+		drawing: TILE_DRAWINGS.fillNone,
+	},
+	{
+		value: DashboardtypesFillModeDTO.solid,
+		label: 'Solid',
+		drawing: TILE_DRAWINGS.fillSolid,
+	},
+	{
+		value: DashboardtypesFillModeDTO.gradient,
+		label: 'Gradient',
+		drawing: TILE_DRAWINGS.fillGradient,
+	},
+];
+
+// An always-filled kind's wire enum (`AreaFillMode`) has no `none`.
+export const FILLED_FILL_MODE_OPTIONS = FILL_MODE_OPTIONS.filter(
+	(option) => option.value !== DashboardtypesFillModeDTO.none,
+);
+
+export enum DisconnectValuesMode {
+	NEVER = 'never',
+	THRESHOLD = 'threshold',
+}
+
+export const DISCONNECT_MODE_OPTIONS: ConfigTileItem<DisconnectValuesMode>[] = [
+	{
+		value: DisconnectValuesMode.NEVER,
+		label: 'Connect the line',
+		drawing: TILE_DRAWINGS.gapsConnect,
+	},
+	{
+		value: DisconnectValuesMode.THRESHOLD,
+		label: 'Break long gaps',
+		drawing: TILE_DRAWINGS.gapsBreak,
+	},
+];

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/summary.ts

@@ -0,0 +1,41 @@
+import {
+	DashboardtypesFillModeDTO,
+	DashboardtypesLineStyleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type {
+	PanelChartAppearanceSlice,
+	SectionControlsOf,
+	SectionKind,
+} from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
+
+import { joinSummary } from '../../utils/summary';
+import { FILL_MODE_OPTIONS, LINE_INTERPOLATION_OPTIONS } from './options';
+
+function describeLine(value: PanelChartAppearanceSlice): string | undefined {
+	const interpolation = LINE_INTERPOLATION_OPTIONS.find(
+		(option) => option.value === value.lineInterpolation,
+	)?.label;
+	const dashed = value.lineStyle === DashboardtypesLineStyleDTO.dashed;
+	if (!interpolation) {
+		return dashed ? 'Dashed' : undefined;
+	}
+	return dashed ? `${interpolation}, dashed` : interpolation;
+}
+
+export function summarizeChartAppearance(
+	value: PanelChartAppearanceSlice | undefined,
+	controls: SectionControlsOf<SectionKind.ChartAppearance>,
+): string {
+	const appearance = value ?? {};
+	const fill = FILL_MODE_OPTIONS.find(
+		(option) =>
+			option.value === (appearance.fillMode ?? DashboardtypesFillModeDTO.none),
+	);
+	return joinSummary([
+		(controls.lineStyle || controls.lineInterpolation) &&
+			describeLine(appearance),
+		controls.fillMode && fill && `${fill.label} fill`,
+		controls.showPoints && appearance.showPoints && 'points',
+		controls.spanGaps && appearance.spanGaps?.fillOnlyBelow && 'breaks gaps',
+	]);
+}