chore(openapi): regenerate spec for span scope

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/__mocks__/uplotMock.ts

@@ -57,7 +57,6 @@ const mockPaths = {
 const mockTzDate = jest.fn(
 	(date: Date, _timezone: string) => new Date(date.getTime()),
 );
-const mockOrient = jest.fn();
 
 // Mock uPlot constructor - this needs to be a proper constructor function
 function MockUPlot(
@@ -71,7 +70,6 @@ function MockUPlot(
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
-MockUPlot.orient = mockOrient;
 // Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
 MockUPlot.pxRatio = 1;
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/constants.ts

@@ -1 +0,0 @@
-export const DEFAULT_VISIBLE_ITEMS_COUNT = 10;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxDisclosure.ts

@@ -2,9 +2,10 @@ import { useMemo, useState } from 'react';
 import { IQuickFiltersConfig } from 'components/QuickFilters/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 
-import { DEFAULT_VISIBLE_ITEMS_COUNT } from './constants';
 import { isKeyMatch } from './utils';
 
+const DEFAULT_VISIBLE_ITEMS_COUNT = 10;
+
 interface UseCheckboxDisclosureProps {
 	filter: IQuickFiltersConfig;
 	activeQueryIndex: number;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.module.scss

@@ -6,6 +6,44 @@
 	border-bottom: 1px solid var(--l1-border);
 }
 
+.sectionActions {
+	width: 0;
+	overflow: hidden;
+	opacity: 0;
+	transform: translateX(4px);
+	pointer-events: none;
+	transition:
+		opacity 0.16s ease,
+		transform 0.16s ease,
+		width 0s linear 0.16s;
+}
+
+.checkboxFilter:hover .sectionActions,
+.sectionActions.sectionActionsPinned {
+	width: auto;
+	opacity: 1;
+	transform: translateX(0);
+	pointer-events: auto;
+	transition:
+		opacity 0.16s ease,
+		transform 0.16s ease;
+}
+
+.sectionActionsPinned .sectionActionHoverOnly {
+	opacity: 0;
+	transform: translateX(4px);
+	pointer-events: none;
+	transition:
+		opacity 0.16s ease,
+		transform 0.16s ease;
+}
+
+.checkboxFilter:hover .sectionActionsPinned .sectionActionHoverOnly {
+	opacity: 1;
+	transform: translateX(0);
+	pointer-events: auto;
+}
+
 .search {
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.testUtils.tsx

@@ -11,7 +11,6 @@ import {
 	QuickFiltersSource,
 } from '../../../types';
 import CheckboxFilterV2 from './CheckboxFilterV2';
-import { DEFAULT_VISIBLE_ITEMS_COUNT } from '../constants';
 
 export const DEFAULT_FILTER: IQuickFiltersConfig = {
 	type: FiltersType.CHECKBOX,
@@ -31,13 +30,6 @@ export const DEFAULT_USE_FIELD_APIS: QuickFilterCheckboxUseFieldApis = {
 	existingQuery: null,
 };
 
-// Enough extra values to push a section past the count that shows its search box.
-// Named to sort last, so a test's own values stay within the first page.
-export const EXTRA_VALUES = Array.from(
-	{ length: DEFAULT_VISIBLE_ITEMS_COUNT },
-	(_, index) => `zz-extra-value-${index + 1}`,
-);
-
 export function mockFieldsValuesAPI(response: {
 	relatedValues?: (string | null)[];
 	stringValues?: (string | null)[];

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Input } from '@signozhq/ui/input';
 import { Skeleton } from 'antd';
+import classNames from 'classnames';
 import { Typography } from '@signozhq/ui/typography';
 import { LoaderCircle } from '@signozhq/icons';
 import {
@@ -16,7 +17,6 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { NON_SELECTED_OPERATORS } from '../checkboxFilterQuery';
 import useActiveQueryIndex from 'components/QuickFilters/hooks/useActiveQueryIndex';
-import { DEFAULT_VISIBLE_ITEMS_COUNT } from '../constants';
 import useCheckboxDisclosure from '../useCheckboxDisclosure';
 import useCheckboxFilterActions from '../useCheckboxFilterActions';
 import useCheckboxFilterState from '../useCheckboxFilterState';
@@ -45,8 +45,14 @@ export default function CheckboxFilterV2(
 	const { source, filter, onFilterChange, onQuickFilterChange, useFieldApis } =
 		props;
 	const [searchText, setSearchText] = useState<string>('');
+	const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);
 	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
 
+	const handleToggleSearch = (): void => {
+		setIsSearchOpen((prev) => !prev);
+		setSearchText('');
+	};
+
 	const { currentQuery } = useQueryBuilder();
 	const activeQueryIndex = useActiveQueryIndex(source);
 
@@ -115,14 +121,6 @@ export default function CheckboxFilterV2(
 		setSearchText(args[0] as string);
 	}, DEBOUNCE_DELAY);
 
-	const handleToggleOpen = (): void => {
-		if (isOpen) {
-			setSearchTextDebounced.cancel();
-			setSearchText('');
-		}
-		onToggleOpen();
-	};
-
 	const currentFilterOp = useMemo(() => {
 		const filterSync = currentQuery?.builder.queryData?.[
 			activeQueryIndex
@@ -168,22 +166,19 @@ export default function CheckboxFilterV2(
 		relatedExclusions,
 	});
 
-	// Kept while a search is typed, so narrowing the list does not remove the box,
-	// and while a refetch still shows the previous, narrowed results.
-	const wasSearchShown = useRef(false);
-	const isSearchShown =
-		searchText !== '' ||
-		totalCount > DEFAULT_VISIBLE_ITEMS_COUNT ||
-		(isFetching && wasSearchShown.current);
-	wasSearchShown.current = isSearchShown;
-
 	return (
 		<div className={styles.checkboxFilter} data-testid="checkbox-filter-v2">
 			<CheckboxFilterV2Header
 				title={filter.title}
 				isOpen={isOpen}
-				canReset={isSomeFilterPresentForCurrentAttribute}
-				onToggleOpen={handleToggleOpen}
+				actionsClassName={classNames(styles.sectionActions, {
+					[styles.sectionActionsPinned]: isSearchOpen,
+				})}
+				resetActionClassName={
+					isSearchOpen ? styles.sectionActionHoverOnly : undefined
+				}
+				onToggleOpen={onToggleOpen}
+				onToggleSearch={handleToggleSearch}
 				onClear={onClear}
 			/>
 			{isOpen && isLoading && !hasLoadedOnce.current && (
@@ -193,9 +188,10 @@ export default function CheckboxFilterV2(
 			)}
 			{isOpen && (!isLoading || hasLoadedOnce.current) && (
 				<>
-					{isSearchShown && (
+					{isSearchOpen && (
 						<section className={styles.search}>
 							<Input
+								autoFocus
 								placeholder="Filter values"
 								onChange={(e): void => setSearchTextDebounced(e.target.value)}
 								disabled={isFilterDisabled}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.tsx

@@ -1,25 +1,31 @@
 import { useState } from 'react';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import { ChevronDown, ChevronRight, Undo2 } from '@signozhq/icons';
+import { ChevronDown, ChevronRight, Search, Undo2 } from '@signozhq/icons';
 
 import { SectionActionButton } from '../../shared/SectionActionButton/SectionActionButton';
 
+import classNames from 'classnames';
+
 import styles from './CheckboxFilterV2Header.module.scss';
 
 interface CheckboxFilterHeaderProps {
 	title: string;
 	isOpen: boolean;
-	canReset: boolean;
+	actionsClassName?: string;
+	resetActionClassName?: string;
 	onToggleOpen: () => void;
+	onToggleSearch: () => void;
 	onClear: () => void;
 }
 
 export function CheckboxFilterV2Header({
 	title,
 	isOpen,
-	canReset,
+	actionsClassName,
+	resetActionClassName,
 	onToggleOpen,
+	onToggleSearch,
 	onClear,
 }: CheckboxFilterHeaderProps): JSX.Element {
 	const [isTitleTruncated, setIsTitleTruncated] = useState(false);
@@ -58,14 +64,21 @@ export function CheckboxFilterV2Header({
 				)}
 				<Tooltip title={isTitleTruncated ? title : undefined}>{titleText}</Tooltip>
 			</section>
-			{isOpen && canReset && (
-				<section className={styles.rightAction}>
+			{isOpen && (
+				<section className={classNames(styles.rightAction, actionsClassName)}>
 					<SectionActionButton
 						icon={<Undo2 size={14} />}
+						className={resetActionClassName}
 						tooltip="Reset"
 						onClick={onClear}
 						testId="checkbox-filter-clear-all"
 					/>
+					<SectionActionButton
+						icon={<Search size={14} />}
+						tooltip="Search"
+						onClick={onToggleSearch}
+						testId="checkbox-filter-search-toggle"
+					/>
 				</section>
 			)}
 		</section>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.interactions.test.tsx

@@ -10,7 +10,6 @@ import {
 	buildQueryBuilderOverrides,
 	DEFAULT_FILTER,
 	DEFAULT_USE_FIELD_APIS,
-	EXTRA_VALUES,
 	getFilterFromCall,
 	mockFieldsValuesAPI,
 	renderWithFilter,
@@ -50,7 +49,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 					const values =
 						searchTextReceived === ''
-							? ['production', 'staging', 'development', ...EXTRA_VALUES]
+							? ['production', 'staging', 'development']
 							: ['production'];
 
 					return res(
@@ -80,6 +79,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			await screen.findByTestId('checkbox-value-row-production');
 			expect(screen.getByTestId('checkbox-value-row-staging')).toBeInTheDocument();
 
+			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 
@@ -92,41 +92,6 @@ describe('CheckboxFilterV2 - interactions', () => {
 					screen.queryByTestId('checkbox-value-row-staging'),
 				).not.toBeInTheDocument();
 			});
-			expect(screen.getByTestId('checkbox-filter-search')).toBeInTheDocument();
-		});
-
-		it('shows no search box when every value fits', async () => {
-			mockFieldsValuesAPI({ stringValues: EXTRA_VALUES });
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId(`checkbox-value-row-${EXTRA_VALUES[0]}`);
-
-			expect(
-				screen.queryByTestId('checkbox-filter-search'),
-			).not.toBeInTheDocument();
-		});
-
-		it('shows the search box once there are more values than fit', async () => {
-			mockFieldsValuesAPI({ stringValues: ['production', ...EXTRA_VALUES] });
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await expect(
-				screen.findByTestId('checkbox-filter-search'),
-			).resolves.toBeInTheDocument();
 		});
 
 		it('filters values via search while preserving existingQuery context', async () => {
@@ -146,7 +111,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 								data: {
 									values: {
 										relatedValues: ['production'],
-										stringValues: ['staging', 'development', ...EXTRA_VALUES],
+										stringValues: ['staging', 'development'],
 										numberValues: [],
 									},
 								},
@@ -198,6 +163,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			// Related values now appear in "Related" section (no badge, uses divider instead)
 			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
 
+			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 
@@ -225,10 +191,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 							data: {
 								values: {
 									relatedValues: [],
-									stringValues:
-										searchText === ''
-											? ['prod', 'staging', ...EXTRA_VALUES]
-											: ['prod-match'],
+									stringValues: searchText === '' ? ['prod', 'staging'] : ['prod-match'],
 									numberValues: [],
 								},
 							},
@@ -250,6 +213,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-prod');
 
+			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 
@@ -275,8 +239,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 							data: {
 								values: {
 									relatedValues: [],
-									stringValues:
-										searchText === '' ? ['prod', 'staging', ...EXTRA_VALUES] : [],
+									stringValues: searchText === '' ? ['prod', 'staging'] : [],
 									numberValues: [],
 								},
 							},
@@ -295,6 +258,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-prod');
 
+			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'xyz-no-match');
 
@@ -371,9 +335,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 					const relatedValues =
 						searchText === '' ? ['pod-a-v1', 'pod-b-v1', 'pod-c-v1'] : ['pod-a-v1']; // filtered to match 'pod-a'
 					const stringValues =
-						searchText === ''
-							? ['pod-a-v2', 'pod-b-v2', 'pod-c-v2', ...EXTRA_VALUES]
-							: ['pod-a-v2']; // filtered to match 'pod-a'
+						searchText === '' ? ['pod-a-v2', 'pod-b-v2', 'pod-c-v2'] : ['pod-a-v2']; // filtered to match 'pod-a'
 
 					return res(
 						ctx.status(200),
@@ -404,6 +366,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-pod-a-v1');
 
+			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'pod-a');
 
@@ -538,56 +501,6 @@ describe('CheckboxFilterV2 - interactions', () => {
 			expect(header).toHaveAttribute('data-state', 'open');
 			await screen.findByTestId('checkbox-value-row-production');
 		});
-
-		it('clears the search when the filter is collapsed', async () => {
-			const user = userEvent.setup();
-			const values = Array.from(
-				{ length: 12 },
-				(_, i) => `value-${String(i).padStart(2, '0')}`,
-			);
-
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					const searchText = req.url.searchParams.get('searchText') || '';
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									relatedValues: [],
-									stringValues: values.filter((value) => value.includes(searchText)),
-									numberValues: [],
-								},
-							},
-						}),
-					);
-				}),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-value-00');
-			await user.type(screen.getByTestId('checkbox-filter-search'), '11');
-			await waitFor(() =>
-				expect(
-					screen.queryByTestId('checkbox-value-row-value-00'),
-				).not.toBeInTheDocument(),
-			);
-
-			const header = screen.getByTestId('checkbox-filter-header');
-			await user.click(header);
-			await user.click(header);
-
-			await screen.findByTestId('checkbox-value-row-value-00');
-			expect(screen.getByTestId('checkbox-filter-search')).toHaveValue('');
-		});
 	});
 
 	describe('show more functionality', () => {
@@ -683,7 +596,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
 		});
 
-		it('hides reset when the section has no filter applied', async () => {
+		it('shows the reset action when expanded even with no active filter', async () => {
 			mockFieldsValuesAPI({
 				stringValues: ['production'],
 			});
@@ -698,9 +611,45 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-production');
 
-			expect(
-				screen.queryByTestId('checkbox-filter-clear-all'),
-			).not.toBeInTheDocument();
+			// Reset is always available on an expanded section now (hover-gated via
+			// CSS), not conditional on an active filter.
+			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
+		});
+
+		it('does not dispatch on clear when the key has no filter', async () => {
+			const user = userEvent.setup();
+			const onFilterChange = jest.fn();
+
+			mockFieldsValuesAPI({
+				stringValues: ['production'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+					onFilterChange={onFilterChange}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: { items: [], op: 'AND' },
+									filter: { expression: '' },
+								},
+							],
+						},
+					}),
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
+
+			expect(onFilterChange).not.toHaveBeenCalled();
 		});
 
 		it('calls onFilterChange when clear clicked', async () => {

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.states.test.tsx

@@ -9,7 +9,6 @@ import CheckboxFilterV2 from '../CheckboxFilterV2';
 import {
 	DEFAULT_FILTER,
 	DEFAULT_USE_FIELD_APIS,
-	EXTRA_VALUES,
 	mockFieldsValuesAPI,
 	mockFieldsValuesAPILoading,
 	setupServer,
@@ -90,7 +89,7 @@ describe('CheckboxFilterV2 - states', () => {
 								data: {
 									values: {
 										relatedValues: [],
-										stringValues: ['production', 'staging', ...EXTRA_VALUES],
+										stringValues: ['production', 'staging'],
 										numberValues: [],
 									},
 								},
@@ -111,6 +110,7 @@ describe('CheckboxFilterV2 - states', () => {
 
 			await screen.findByTestId('checkbox-value-row-production');
 
+			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2Header.test.tsx

@@ -7,8 +7,8 @@ describe('CheckboxFilterV2Header', () => {
 	const defaultProps = {
 		title: 'Environment',
 		isOpen: false,
-		canReset: true,
 		onToggleOpen: jest.fn(),
+		onToggleSearch: jest.fn(),
 		onClear: jest.fn(),
 	};
 
@@ -30,9 +30,12 @@ describe('CheckboxFilterV2Header', () => {
 			expect(header).toHaveAttribute('data-state', 'closed');
 		});
 
-		it('does not render reset when collapsed', () => {
+		it('does not render the section actions when collapsed', () => {
 			render(<CheckboxFilterV2Header {...defaultProps} isOpen={false} />);
 
+			expect(
+				screen.queryByTestId('checkbox-filter-search-toggle'),
+			).not.toBeInTheDocument();
 			expect(
 				screen.queryByTestId('checkbox-filter-clear-all'),
 			).not.toBeInTheDocument();
@@ -47,18 +50,13 @@ describe('CheckboxFilterV2Header', () => {
 			expect(header).toHaveAttribute('data-state', 'open');
 		});
 
-		it('renders reset when the section has a filter applied', () => {
+		it('renders both search and reset actions when expanded', () => {
 			render(<CheckboxFilterV2Header {...defaultProps} isOpen />);
 
-			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
-		});
-
-		it('hides reset when there is nothing to reset', () => {
-			render(<CheckboxFilterV2Header {...defaultProps} isOpen canReset={false} />);
-
 			expect(
-				screen.queryByTestId('checkbox-filter-clear-all'),
-			).not.toBeInTheDocument();
+				screen.getByTestId('checkbox-filter-search-toggle'),
+			).toBeInTheDocument();
+			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
 		});
 	});
 
@@ -101,6 +99,25 @@ describe('CheckboxFilterV2Header', () => {
 			expect(onToggleOpen).toHaveBeenCalledTimes(1);
 		});
 
+		it('calls onToggleSearch on search click without toggling open', async () => {
+			const user = userEvent.setup();
+			const onToggleSearch = jest.fn();
+			const onToggleOpen = jest.fn();
+			render(
+				<CheckboxFilterV2Header
+					{...defaultProps}
+					isOpen
+					onToggleSearch={onToggleSearch}
+					onToggleOpen={onToggleOpen}
+				/>,
+			);
+
+			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
+
+			expect(onToggleSearch).toHaveBeenCalledTimes(1);
+			expect(onToggleOpen).not.toHaveBeenCalled();
+		});
+
 		it('calls onClear on reset click without toggling open', async () => {
 			const user = userEvent.setup();
 			const onClear = jest.fn();

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -9,7 +9,6 @@ import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 
 import QuickFilters from '../QuickFilters';
 import { SIDEBAR_TOOLTIP_DELAY_MS } from './constants';
-import { useCloseOnOutsidePress } from './useCloseOnOutsidePress';
 
 import styles from './QuickFiltersLayout.module.scss';
 
@@ -62,20 +61,12 @@ function QuickFiltersLayout({
 
 	const isSliding = hasQuickFilters && isViewsListOpen;
 
-	const openViews = (): void => setIsViewsListOpen(true);
-	const toggleViews = (): void => setIsViewsListOpen((isOpen) => !isOpen);
-	const closeViews = (): void => setIsViewsListOpen(false);
-	const markSidebarPress = useCloseOnOutsidePress(
-		showSidebar && isSliding,
-		closeViews,
-	);
-
 	const savedViewsHeader = hasSavedViews ? (
 		<SavedViewsHeader
 			{...savedViewProps}
-			onOpenViews={isViewsListVisible ? undefined : openViews}
-			isViewsOpen={isViewsListOpen}
-			onToggleViews={isViewsListPinned ? undefined : toggleViews}
+			onOpenViews={
+				isViewsListVisible ? undefined : (): void => setIsViewsListOpen(true)
+			}
 			onCollapse={hasQuickFilters ? undefined : onToggleFilters}
 		/>
 	) : undefined;
@@ -86,7 +77,6 @@ function QuickFiltersLayout({
 			{showSidebar && (
 				<aside
 					className={cx(styles.sidebar, { [styles.isStatic]: !hasQuickFilters })}
-					onPointerDownCapture={markSidebarPress}
 					data-testid="quick-filters-layout-filters"
 				>
 					<TooltipProvider delay={SIDEBAR_TOOLTIP_DELAY_MS}>
@@ -108,7 +98,9 @@ function QuickFiltersLayout({
 							{hasSavedViews && isViewsListVisible && (
 								<SavedViewsPanel
 									{...savedViewProps}
-									onClose={isViewsListPinned ? undefined : closeViews}
+									onClose={
+										isViewsListPinned ? undefined : (): void => setIsViewsListOpen(false)
+									}
 								/>
 							)}
 						</div>

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -218,62 +218,6 @@ describe('QuickFiltersLayout', () => {
 			expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
 		});
 
-		it('opens and closes the panel from the view name', async () => {
-			render(
-				<QuickFiltersLayout
-					showFilters
-					quickFilterProps={quickFilterProps}
-					savedViewProps={savedViewProps}
-				>
-					<div>content</div>
-				</QuickFiltersLayout>,
-			);
-			const user = userEvent.setup();
-			const toggle = await screen.findByTestId('saved-views-name-toggle');
-
-			expect(toggle).toHaveAttribute('aria-expanded', 'false');
-			await user.click(toggle);
-
-			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
-			expect(drawer()).toHaveClass('isOpen');
-			expect(toggle).toHaveAttribute('aria-expanded', 'true');
-
-			await user.click(toggle);
-
-			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
-			expect(drawer()).not.toHaveClass('isOpen');
-		});
-
-		it('closes the panel on a click outside the sidebar, not inside it', async () => {
-			render(
-				<>
-					<button type="button" data-testid="page-tab">
-						Pipelines
-					</button>
-					<QuickFiltersLayout
-						showFilters
-						quickFilterProps={quickFilterProps}
-						savedViewProps={savedViewProps}
-					>
-						<div data-testid="page-content">content</div>
-					</QuickFiltersLayout>
-				</>,
-			);
-			const user = userEvent.setup();
-
-			await user.click(await screen.findByTestId('saved-views-name-toggle'));
-			await user.click(screen.getByTestId('saved-views-panel-header'));
-			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
-
-			await user.click(screen.getByTestId('page-tab'));
-			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
-			expect(drawer()).not.toHaveClass('isOpen');
-
-			await user.click(await screen.findByTestId('saved-views-name-toggle'));
-			await user.click(screen.getByTestId('page-content'));
-			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
-		});
-
 		it('hands the source to the header and the panel', async () => {
 			render(
 				<QuickFiltersLayout
@@ -314,9 +258,6 @@ describe('QuickFiltersLayout', () => {
 			expect(screen.getByTestId('saved-views-header')).toBeInTheDocument();
 			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
 			expect(screen.queryByTestId('saved-views-open')).not.toBeInTheDocument();
-			expect(
-				screen.queryByTestId('saved-views-name-toggle'),
-			).not.toBeInTheDocument();
 			expect(
 				screen.queryByTestId('saved-views-panel-header'),
 			).not.toBeInTheDocument();

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/useCloseOnOutsidePress.test.tsx

@@ -1,63 +0,0 @@
-import { createPortal } from 'react-dom';
-import { render, screen, userEvent } from 'tests/test-utils';
-
-import { useCloseOnOutsidePress } from '../useCloseOnOutsidePress';
-
-function Harness({
-	enabled,
-	onClose,
-}: {
-	enabled: boolean;
-	onClose: () => void;
-}): JSX.Element {
-	const markInside = useCloseOnOutsidePress(enabled, onClose);
-
-	return (
-		<>
-			<div onPointerDownCapture={markInside}>
-				<button type="button" data-testid="inside">
-					inside
-				</button>
-				{createPortal(
-					<button type="button" data-testid="portal">
-						menu item
-					</button>,
-					document.body,
-				)}
-			</div>
-			<button type="button" data-testid="outside">
-				outside
-			</button>
-		</>
-	);
-}
-
-describe('useCloseOnOutsidePress', () => {
-	it('closes on a press outside', async () => {
-		const onClose: jest.MockedFunction<() => void> = jest.fn();
-		render(<Harness enabled onClose={onClose} />);
-
-		await userEvent.click(screen.getByTestId('outside'));
-
-		expect(onClose).toHaveBeenCalledTimes(1);
-	});
-
-	it('stays open on a press inside, including a portal rendered from inside', async () => {
-		const onClose: jest.MockedFunction<() => void> = jest.fn();
-		render(<Harness enabled onClose={onClose} />);
-
-		await userEvent.click(screen.getByTestId('inside'));
-		await userEvent.click(screen.getByTestId('portal'));
-
-		expect(onClose).not.toHaveBeenCalled();
-	});
-
-	it('does nothing while disabled', async () => {
-		const onClose: jest.MockedFunction<() => void> = jest.fn();
-		render(<Harness enabled={false} onClose={onClose} />);
-
-		await userEvent.click(screen.getByTestId('outside'));
-
-		expect(onClose).not.toHaveBeenCalled();
-	});
-});

frontend/src/components/QuickFilters/QuickFiltersLayout/useCloseOnOutsidePress.ts

@@ -1,39 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-/**
- * Calls `onClose` on any press outside the element given the returned handler as
- * `onPointerDownCapture`. Menus and dialogs rendered in portals still count as
- * inside: React events follow the component tree, so their presses reach the
- * handler before the document listener runs.
- */
-export function useCloseOnOutsidePress(
-	enabled: boolean,
-	onClose: () => void,
-): () => void {
-	const isPressInside = useRef(false);
-	const onCloseRef = useRef(onClose);
-	onCloseRef.current = onClose;
-
-	useEffect(() => {
-		if (!enabled) {
-			return undefined;
-		}
-		isPressInside.current = false;
-
-		const handlePointerDown = (): void => {
-			if (isPressInside.current) {
-				isPressInside.current = false;
-				return;
-			}
-			onCloseRef.current();
-		};
-
-		document.addEventListener('pointerdown', handlePointerDown);
-		return (): void =>
-			document.removeEventListener('pointerdown', handlePointerDown);
-	}, [enabled]);
-
-	return useCallback((): void => {
-		isPressInside.current = true;
-	}, []);
-}

frontend/src/container/SavedViews/SavedViewsHeader.tsx

@@ -12,7 +12,6 @@ import {
 	SavedViewCreatePermission,
 	SavedViewListPermission,
 } from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 
 import {
 	MY_VIEW_NAME,
@@ -26,7 +25,6 @@ import { useSaveNewView } from './hooks/useSaveNewView';
 import { useSavedViewActions } from './hooks/useSavedViewActions';
 import SaveChangesMenu from './SaveChangesMenu';
 import SavedViewsIconButton from './SavedViewsIconButton';
-import SavedViewsNameToggle from './SavedViewsNameToggle';
 import SaveViewModal from './SaveViewModal';
 import { SaveViewModalMode } from './types';
 
@@ -35,16 +33,11 @@ import styles from './SavedViewsHeader.module.scss';
 function SavedViewsHeader({
 	source,
 	onOpenViews,
-	isViewsOpen = false,
-	onToggleViews,
 	onCollapse,
 }: {
 	source: SavedviewtypesSourceDTO;
 	// Absent while the list is on screen.
 	onOpenViews?: () => void;
-	isViewsOpen?: boolean;
-	// Absent while the list is pinned open.
-	onToggleViews?: () => void;
 	onCollapse?: () => void;
 }): JSX.Element {
 	const {
@@ -57,11 +50,6 @@ function SavedViewsHeader({
 	} = useActiveSavedView(source);
 	const { viewKey } = useGetSavedViewParams();
 	const readPermission = buildSavedViewReadPermission(viewKey);
-	const { isLoading: isCheckingList, deniedPermissions: deniedList } = useAuthZ(
-		[SavedViewListPermission],
-		{ enabled: !!onToggleViews },
-	);
-	const canListViews = !isCheckingList && deniedList.length === 0;
 	const { revertView, clearView, createView, updateView, isSaving } =
 		useSavedViewActions(source);
 
@@ -95,9 +83,6 @@ function SavedViewsHeader({
 		name = SAVED_VIEW_LOAD_FAILED_NAME;
 	}
 	const isDirty = !isError && !!view && hasUnsavedChanges;
-	// Same gates as the All views button; an open panel can always be closed.
-	const canToggleViews =
-		isViewsOpen || (canListViews && !isDirty && !isReadDenied);
 
 	const nameChip = (
 		<span
@@ -138,17 +123,10 @@ function SavedViewsHeader({
 						className={styles.skeleton}
 						testId="saved-views-loading"
 					/>
+				) : isReadDenied ? (
+					<AuthZTooltip checks={[readPermission]}>{nameChip}</AuthZTooltip>
 				) : (
-					<SavedViewsNameToggle
-						isOpen={isViewsOpen}
-						onToggle={canToggleViews ? onToggleViews : undefined}
-					>
-						{isReadDenied ? (
-							<AuthZTooltip checks={[readPermission]}>{nameChip}</AuthZTooltip>
-						) : (
-							<Tooltip title={errorMessage ?? name}>{nameChip}</Tooltip>
-						)}
-					</SavedViewsNameToggle>
+					<Tooltip title={errorMessage ?? name}>{nameChip}</Tooltip>
 				)}
 			</div>
 

frontend/src/container/SavedViews/SavedViewsNameToggle.module.scss

@@ -1,14 +0,0 @@
-.toggle {
-	display: flex;
-	min-width: 0;
-	--button-height: auto;
-	// A flex label lets the chip shrink and use its own ellipsis.
-	--button-label-display: flex;
-}
-
-// The chip inherits its type from the button; doubled to outrank the button's
-// size rule so the chip reads the same as when it is not a toggle.
-.toggle.toggle > button {
-	font: inherit;
-	letter-spacing: inherit;
-}

frontend/src/container/SavedViews/SavedViewsNameToggle.tsx

@@ -1,36 +0,0 @@
-import { ReactElement } from 'react';
-import { Button } from '@signozhq/ui/button';
-
-import styles from './SavedViewsNameToggle.module.scss';
-
-function SavedViewsNameToggle({
-	isOpen,
-	onToggle,
-	children,
-}: {
-	isOpen: boolean;
-	onToggle?: () => void;
-	children: ReactElement;
-}): JSX.Element {
-	if (!onToggle) {
-		return children;
-	}
-
-	return (
-		<span className={styles.toggle}>
-			<Button
-				variant="link"
-				color="secondary"
-				size="sm"
-				textOverflow="hidden"
-				onClick={onToggle}
-				aria-expanded={isOpen}
-				testId="saved-views-name-toggle"
-			>
-				{children}
-			</Button>
-		</span>
-	);
-}
-
-export default SavedViewsNameToggle;

frontend/src/container/SavedViews/__tests__/SavedViews.authz.test.tsx

@@ -52,7 +52,6 @@ function renderHeader(
 		<SavedViewsHeader
 			source={SavedviewtypesSourceDTO.traces}
 			onOpenViews={jest.fn()}
-			onToggleViews={jest.fn()}
 		/>,
 		url,
 	);
@@ -263,46 +262,4 @@ describe('SavedViews - AuthZ', () => {
 			expect(screen.queryAllByText(message).length).toBeGreaterThan(0),
 		);
 	});
-
-	describe('view name toggle', () => {
-		it('toggles the views from the name when list is allowed', async () => {
-			mockSavedViewsApi([]);
-			renderHeader(explorerUrl(PATH, {}));
-
-			await expect(
-				screen.findByTestId('saved-views-name-toggle'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('leaves the name plain without list, the All views button says why', async () => {
-			mockSavedViewsApi([]);
-			server.use(setupAuthzDeny(SavedViewListPermission));
-			renderHeader(explorerUrl(PATH, {}));
-
-			await waitFor(() =>
-				expect(screen.getByTestId('saved-views-open')).toHaveAttribute(
-					'aria-disabled',
-					'true',
-				),
-			);
-			expect(
-				screen.queryByTestId('saved-views-name-toggle'),
-			).not.toBeInTheDocument();
-		});
-
-		it('leaves the name plain on a view it cannot read', async () => {
-			mockSavedViewsApi([errors]);
-			server.use(setupAuthzDeny(buildSavedViewReadPermission(errors.id)));
-			renderHeader(viewUrl(PATH, errors));
-
-			await waitFor(() =>
-				expect(screen.getByTestId('saved-views-name')).toHaveTextContent(
-					'No view access',
-				),
-			);
-			expect(
-				screen.queryByTestId('saved-views-name-toggle'),
-			).not.toBeInTheDocument();
-		});
-	});
 });

frontend/src/container/SavedViews/__tests__/SavedViewsHeader.save.test.tsx

@@ -30,14 +30,11 @@ const PATH = ROUTES.TRACES_EXPLORER;
 
 function renderHeader(
 	url: string,
-	isViewsOpen = false,
 ): ReturnType<typeof renderWithExplorerProviders> {
 	return renderWithExplorerProviders(
 		<SavedViewsHeader
 			source={SavedviewtypesSourceDTO.traces}
 			onOpenViews={jest.fn()}
-			isViewsOpen={isViewsOpen}
-			onToggleViews={jest.fn()}
 		/>,
 		url,
 	);
@@ -48,9 +45,8 @@ const isModalOpen = (): boolean => !!screen.queryByTestId('save-view-modal');
 
 async function openDirtyView(
 	view: ReturnType<typeof makeView>,
-	isViewsOpen = false,
 ): Promise<ReturnType<typeof renderWithExplorerProviders>> {
-	const rendered = renderHeader(viewUrl(PATH, view), isViewsOpen);
+	const rendered = renderHeader(viewUrl(PATH, view));
 	await waitFor(() =>
 		expect(screen.getByTestId('saved-views-name')).toHaveTextContent(
 			view.spec.displayName,
@@ -230,36 +226,4 @@ describe('SavedViewsHeader saving', () => {
 		);
 		expect(requests.created).toHaveLength(0);
 	});
-
-	describe('view name toggle with unsaved changes', () => {
-		const errors = makeView({ id: 'view-1', displayName: 'Errors' });
-
-		it('stops opening the views from the name once the view changes', async () => {
-			mockSavedViewsApi([errors]);
-			const { history } = renderHeader(viewUrl(PATH, errors));
-			await screen.findByTestId('saved-views-name-toggle');
-
-			act(() => {
-				history.push(
-					explorerUrl(PATH, {
-						query: queryWith(DataSource.TRACES, 'has_error = false'),
-						panelType: PANEL_TYPES.LIST,
-						viewKey: errors.id,
-					}),
-				);
-			});
-			await screen.findByTestId('saved-views-discard');
-
-			expect(
-				screen.queryByTestId('saved-views-name-toggle'),
-			).not.toBeInTheDocument();
-		});
-
-		it('still closes open views from the name', async () => {
-			mockSavedViewsApi([errors]);
-			await openDirtyView(errors, true);
-
-			expect(screen.getByTestId('saved-views-name-toggle')).toBeInTheDocument();
-		});
-	});
 });

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

@@ -1,89 +0,0 @@
-// Sections own the padding so the footer spans edge to edge.
-.container {
-	font-family: 'Inter';
-	font-size: 12px;
-	background: var(--l2-background);
-	-webkit-font-smoothing: antialiased;
-	color: var(--l2-foreground);
-	border-radius: 6px;
-	border: 1px solid var(--l2-border);
-	display: flex;
-	flex-direction: column;
-	min-width: 200px;
-
-	&.pinned {
-		border-color: var(--ring);
-	}
-}
-
-.divider {
-	display: block;
-	width: 100%;
-	height: 1px;
-	background-color: var(--l2-border);
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	padding: var(--spacing-3) var(--spacing-4);
-}
-
-// Matches the legend row's marker.
-.marker {
-	width: 10px;
-	height: 10px;
-	border-radius: var(--radius);
-	flex-shrink: 0;
-}
-
-.title {
-	flex: 1;
-	min-width: 0;
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	font-weight: 600;
-	color: var(--text-vanilla-100);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.rows {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-1);
-	padding: var(--spacing-3) var(--spacing-4);
-}
-
-.row {
-	display: flex;
-	align-items: baseline;
-	justify-content: space-between;
-	gap: var(--spacing-4);
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	font-variant-numeric: tabular-nums;
-	color: var(--text-vanilla-100);
-}
-
-.rowMuted {
-	color: var(--text-vanilla-400);
-}
-
-.rowLabel {
-	flex: 1;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.rowValue {
-	flex: 0 0 auto;
-	max-width: 60%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}

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

@@ -1,136 +0,0 @@
-import { useMemo } from 'react';
-import cx from 'classnames';
-import { Pin } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-
-import { ScatterTooltipProps } from '../types';
-import { buildChannelRows, resolveHoveredPoint } from './scatterTooltipContent';
-
-import Styles from './ScatterTooltip.module.scss';
-
-/** Own component: the shared Tooltip lists one row per series at a shared x. */
-export default function ScatterTooltip({
-	uPlotInstance,
-	dataIndexes,
-	seriesIndex,
-	channels,
-	resolvePointGroupValues,
-	decimalPrecision,
-	isPinned,
-	dismiss,
-	renderTooltipFooter,
-}: ScatterTooltipProps): JSX.Element | null {
-	const hoveredPoint = useMemo(
-		() => resolveHoveredPoint(uPlotInstance, seriesIndex, dataIndexes),
-		[uPlotInstance, seriesIndex, dataIndexes],
-	);
-
-	const rows = useMemo(
-		() =>
-			hoveredPoint
-				? buildChannelRows(hoveredPoint, channels, decimalPrecision)
-				: [],
-		[hoveredPoint, channels, decimalPrecision],
-	);
-
-	const labels = useMemo(
-		() =>
-			hoveredPoint
-				? (resolvePointGroupValues?.(
-						hoveredPoint.seriesIndex,
-						hoveredPoint.dataIndex,
-					) ?? [])
-				: [],
-		[hoveredPoint, resolvePointGroupValues],
-	);
-
-	if (!hoveredPoint) {
-		return null;
-	}
-
-	return (
-		<div
-			className={cx(Styles.container, { [Styles.pinned]: isPinned })}
-			data-pinned={isPinned}
-			data-testid="scatter-tooltip"
-		>
-			<div className={Styles.header}>
-				<span
-					className={Styles.marker}
-					style={{ backgroundColor: hoveredPoint.color }}
-				/>
-				<Typography.Text
-					as="span"
-					className={Styles.title}
-					title={hoveredPoint.label}
-					testId="scatter-tooltip-title"
-				>
-					{hoveredPoint.label}
-				</Typography.Text>
-				{isPinned && (
-					<Button
-						variant="ghost"
-						color="secondary"
-						size="sm"
-						prefix={<Pin size={12} />}
-						testId="scatter-tooltip-status"
-					>
-						Pinned
-					</Button>
-				)}
-			</div>
-
-			<span className={Styles.divider} />
-
-			<div className={Styles.rows}>
-				{rows.map((row) => (
-					<div
-						key={row.label}
-						className={Styles.row}
-						data-testid="scatter-tooltip-row"
-					>
-						<Typography.Text as="span" className={Styles.rowLabel}>
-							{row.label}
-						</Typography.Text>
-						<Typography.Text as="span" className={Styles.rowValue}>
-							{row.value}
-						</Typography.Text>
-					</div>
-				))}
-			</div>
-
-			{labels.length > 0 && (
-				<>
-					<span className={Styles.divider} />
-					<div className={Styles.rows}>
-						{labels.map((label) => (
-							<div
-								key={label.key}
-								className={cx(Styles.row, Styles.rowMuted)}
-								data-testid="scatter-tooltip-label"
-							>
-								<Typography.Text
-									as="span"
-									className={Styles.rowLabel}
-									title={label.key}
-								>
-									{label.key}
-								</Typography.Text>
-								<Typography.Text
-									as="span"
-									className={Styles.rowValue}
-									title={label.value}
-								>
-									{label.value}
-								</Typography.Text>
-							</div>
-						))}
-					</div>
-				</>
-			)}
-
-			{renderTooltipFooter?.({ isPinned, dismiss })}
-		</div>
-	);
-}

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

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

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

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

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

@@ -6,10 +6,6 @@ import uPlot from 'uplot';
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { LegendItem } from '../config/types';
 import { HeatmapSeries, HeatmapYAxis } from '../plugins/HeatmapPlugin/types';
-import type {
-	ScatterChannels,
-	ScatterPointLabel,
-} from '../plugins/ScatterPlugin/types';
 import { SyncTooltipFilterMode } from '../plugins/TooltipPlugin/types';
 
 /**
@@ -123,16 +119,6 @@ export interface HeatmapTooltipProps
 	groupColor: string;
 }
 
-export interface ScatterTooltipProps
-	extends BaseTooltipProps, TooltipRenderArgs {
-	channels: ScatterChannels;
-	/** The group values behind a point, e.g. `service.name` → `cart`. */
-	resolvePointGroupValues?: (
-		seriesIndex: number,
-		dataIndex: number,
-	) => ScatterPointLabel[];
-}
-
 export type TooltipProps =
 	| TimeSeriesTooltipProps
 	| BarTooltipProps

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

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

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

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

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

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

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

@@ -88,8 +88,6 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			lineConfig.fill = finalFillColor;
 		} else if (this.props.drawStyle === DrawStyle.Histogram) {
 			lineConfig.fill = `${finalFillColor}40`;
-		} else if (this.props.drawStyle === DrawStyle.Scatter) {
-			lineConfig.fill = `${finalFillColor}${toAlphaHex(resolveFillOpacity(fillOpacity))}`;
 		} else if (fillMode && fillMode !== FillMode.None) {
 			const resolvedOpacity = resolveFillOpacity(fillOpacity);
 			if (fillMode === FillMode.Solid) {
@@ -125,7 +123,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			return { paths: pathBuilder };
 		}
 
-		if (isMarkerOnlyDrawStyle(drawStyle)) {
+		if (drawStyle === DrawStyle.Points) {
 			return { paths: (): null => null };
 		}
 
@@ -197,10 +195,6 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 		if (drawStyle === DrawStyle.Points) {
 			return true;
 		}
-		// The discs are the series path; uPlot's own points would double-draw them.
-		if (drawStyle === DrawStyle.Scatter) {
-			return false;
-		}
 		return !!showPoints;
 	}
 
@@ -232,7 +226,6 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			show = true,
 			metric,
 			partialTimestamps,
-			facets,
 		} = this.props;
 
 		const resolvedLineColor = this.getLineColor();
@@ -262,7 +255,6 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			points: Object.keys(pointsConfig).length > 0 ? pointsConfig : undefined,
 			metric,
 			...(partialTimestamps?.size ? { partialTimestamps } : {}),
-			...(facets && { facets }),
 		};
 	}
 }
@@ -278,11 +270,6 @@ interface PathBuilders {
 /**
  * Get path builder based on draw style and interpolation
  */
-/** Draws standalone markers, never a connecting line. */
-function isMarkerOnlyDrawStyle(drawStyle: DrawStyle): boolean {
-	return drawStyle === DrawStyle.Points || drawStyle === DrawStyle.Scatter;
-}
-
 function getPathBuilder({
 	drawStyle,
 	lineInterpolation,

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

@@ -120,41 +120,6 @@ describe('UPlotAxisBuilder', () => {
 		});
 	});
 
-	it('draws the axis line by default, styled like the grid', () => {
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ isDarkMode: true, grid: { width: 0.5 } }),
-		).getConfig();
-
-		expect(config.border).toStrictEqual({
-			show: true,
-			stroke: config.grid?.stroke,
-			width: 0.5,
-		});
-	});
-
-	it('leaves the axis line off when showBorder is false', () => {
-		expect(
-			new UPlotAxisBuilder(createAxisProps({ showBorder: false })).getConfig(),
-		).not.toHaveProperty('border');
-	});
-
-	it('leaves the axis line off when the grid is hidden', () => {
-		expect(
-			new UPlotAxisBuilder(createAxisProps({ grid: { show: false } })).getConfig(),
-		).not.toHaveProperty('border');
-	});
-
-	it('passes explicit splits and a label filter through to uPlot', () => {
-		const splits = jest.fn();
-		const filter = jest.fn();
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ splits, filter }),
-		).getConfig();
-
-		expect(config.splits).toBe(splits);
-		expect(config.filter).toBe(filter);
-	});
-
 	it('uses provided ticks config when present and falls back to defaults otherwise', () => {
 		const customTicks = { width: 1, show: false };
 		const withTicks = new UPlotAxisBuilder(
@@ -411,51 +376,3 @@ describe('UPlotAxisBuilder', () => {
 		expect(config.values).toBeDefined();
 	});
 });
-
-describe('UPlotAxisBuilder value x axis', () => {
-	it('formats a non-time x axis with its unit', () => {
-		(getToolTipValue as jest.Mock).mockReturnValue('1.2K req/s');
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'x', isTimeAxis: false, yAxisUnit: 'reqps' }),
-		).getConfig();
-
-		const values = (config.values as uPlot.Axis.DynamicValues)(
-			{} as uPlot,
-			[1200],
-			0,
-			0,
-			0,
-		);
-
-		expect(values).toStrictEqual(['1.2K req/s']);
-		expect(getToolTipValue).toHaveBeenCalledWith('1200', 'reqps', undefined);
-	});
-
-	it('leaves a non-time x axis to uPlot when nothing says how to format it', () => {
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'x', isTimeAxis: false }),
-		).getConfig();
-
-		expect(config.values).toBeUndefined();
-	});
-});
-
-describe('UPlotAxisBuilder out-of-range splits', () => {
-	it('leaves a split the scale cannot place unlabelled', () => {
-		(getToolTipValue as jest.Mock).mockImplementation((v: string) => `${v} ms`);
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'y', yAxisUnit: 'ms' }),
-		).getConfig();
-		const u = { scales: { y: { min: 0, max: 1000 } } } as unknown as uPlot;
-
-		const values = (config.values as uPlot.Axis.DynamicValues)(
-			u,
-			[-10, 0, 500, 5000],
-			0,
-			0,
-			0,
-		);
-
-		expect(values).toStrictEqual(['', '0 ms', '500 ms', '']);
-	});
-});

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

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

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

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

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

@@ -80,10 +80,6 @@ export interface AxisProps {
 	values?: uPlot.Axis.Values;
 	/** Explicit axis splits, overriding the default tick calculation. */
 	splits?: uPlot.Axis.Splits;
-	/** Which splits get a label, replacing uPlot's per-distribution default. */
-	filter?: uPlot.Axis.Filter;
-	/** Draw the axis line along the plot edge, styled like the grid. Default true. */
-	showBorder?: boolean;
 	/** Pixels between the ticks and their labels; also feeds the y axis width calculation. */
 	gap?: number;
 	/** Explicit axis thickness. Left unset, the y axis sizes itself to its widest label. */
@@ -94,7 +90,7 @@ export interface AxisProps {
 	isDarkMode?: boolean;
 	/** Axis is on a log scale — thins the grid lines to keep dense decades readable. */
 	isLogScale?: boolean;
-	/** Unit the y axis ticks are formatted in (`spec.formatting.unit`); a non-time x axis reads it too. */
+	/** Unit the y axis ticks are formatted in (`spec.formatting.unit`). */
 	yAxisUnit?: string;
 	/**
 	 * X axis carries timestamps, so its ticks format as dates/times. Declared by the caller
@@ -113,13 +109,6 @@ export interface AxisProps {
 export enum DistributionType {
 	Linear = 'linear',
 	Logarithmic = 'logarithmic',
-	/** arcsinh: linear within ±`asinhThreshold`, log beyond; places zero and negatives. */
-	SymmetricLog = 'symlog',
-}
-
-export enum PlotMode {
-	Aligned = 1,
-	Faceted = 2,
 }
 
 export interface ScaleProps {
@@ -136,8 +125,6 @@ export interface ScaleProps {
 	auto?: boolean;
 	logBase?: uPlot.Scale.LogBase;
 	distribution?: DistributionType;
-	/** Half-width of a `SymmetricLog` scale's linear band around zero. Default 1. */
-	asinhThreshold?: number;
 }
 
 export enum DisconnectedValuesMode {
@@ -159,7 +146,6 @@ export enum DrawStyle {
 	Points = 'points',
 	Bar = 'bar',
 	Histogram = 'histogram',
-	Scatter = 'scatter',
 }
 
 export enum LineInterpolation {
@@ -246,8 +232,6 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	metric?: { [key: string]: string };
 	/** Epoch-second x values whose bucket doesn't cover a full step; marked with a dotted ring. */
 	partialTimestamps?: Set<number>;
-	/** Mode 2 only: the scales the series' own x and y columns are read against. */
-	facets?: Series.Facet[];
 }
 
 export interface LegendItem {

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

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

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

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

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

@@ -1,89 +0,0 @@
-import type uPlot from 'uplot';
-
-import type { Quadtree } from '../../utils/quadtree';
-import type { ScatterHit, ScatterPointSize, ScatterSeriesData } from './types';
-
-export interface SizeDomain {
-	min: number;
-	max: number;
-}
-
-/** Size extent across all series, so equal values draw equal discs. */
-export function resolveSizeDomain(data: uPlot.AlignedData): SizeDomain | null {
-	let min = Infinity;
-	let max = -Infinity;
-	for (let seriesIndex = 1; seriesIndex < data.length; seriesIndex++) {
-		const sizes = (data[seriesIndex] as unknown as ScatterSeriesData)[2];
-		if (!sizes) {
-			continue;
-		}
-		for (const size of sizes) {
-			if (size == null || !Number.isFinite(size)) {
-				continue;
-			}
-			min = Math.min(min, size);
-			max = Math.max(max, size);
-		}
-	}
-	return min <= max ? { min, max } : null;
-}
-
-/**
- * Diameter for a size-channel value. Grows the disc's area, not its width,
- * linearly with the value, so a value twice as large reads as twice the ink.
- */
-export function resolvePointDiameter(
-	size: number | null | undefined,
-	domain: SizeDomain | null,
-	pointSize: ScatterPointSize,
-): number {
-	if (size == null || domain == null || !Number.isFinite(size)) {
-		return pointSize.fixed;
-	}
-	if (domain.max === domain.min) {
-		return (pointSize.min + pointSize.max) / 2;
-	}
-	const t = Math.min(
-		1,
-		Math.max(0, (size - domain.min) / (domain.max - domain.min)),
-	);
-	const minArea = pointSize.min ** 2;
-	const maxArea = pointSize.max ** 2;
-	return Math.sqrt(minArea + (maxArea - minArea) * t);
-}
-
-/**
- * The disc under the cursor, counting `tolerance` px beyond its edge as a hit.
- * Where discs overlap, the one whose centre is closest wins; `null` if none.
- */
-export function resolveHit(
-	tree: Quadtree<ScatterHit>,
-	cx: number,
-	cy: number,
-	tolerance: number,
-): ScatterHit | null {
-	let best: ScatterHit | null = null;
-	let bestDistance = Infinity;
-
-	tree.get(
-		cx - tolerance,
-		cy - tolerance,
-		tolerance * 2,
-		tolerance * 2,
-		(hit) => {
-			const dx = cx - (hit.x + hit.w / 2);
-			const dy = cy - (hit.y + hit.h / 2);
-			const distance = dx * dx + dy * dy;
-			const reach = hit.w / 2 + tolerance;
-			if (distance > reach * reach) {
-				return;
-			}
-			if (distance < bestDistance) {
-				best = hit;
-				bestDistance = distance;
-			}
-		},
-	);
-
-	return best;
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -195,22 +195,3 @@ describe('scale utils', () => {
 		});
 	});
 });
-
-describe('symmetric log scale', () => {
-	it('maps to uPlot arcsinh with the given linear threshold', () => {
-		expect(
-			scaleUtils.getDistributionConfig({
-				time: false,
-				distr: DistributionType.SymmetricLog,
-				asinhThreshold: 0.01,
-			}),
-		).toStrictEqual({ distr: 4, log: 10, asinh: 0.01 });
-
-		expect(
-			scaleUtils.getDistributionConfig({
-				time: false,
-				distr: DistributionType.SymmetricLog,
-			}).asinh,
-		).toBe(scaleUtils.DEFAULT_ASINH_THRESHOLD);
-	});
-});

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

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

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

@@ -1,101 +0,0 @@
-export interface QuadtreeRect {
-	x: number;
-	y: number;
-	w: number;
-	h: number;
-}
-
-const MAX_OBJECTS = 10;
-const MAX_LEVELS = 4;
-
-/** Rect index for cursor hit-testing; items straddling quadrants are stored in each, so `get` may repeat them. */
-export class Quadtree<T extends QuadtreeRect = QuadtreeRect> {
-	private items: T[] = [];
-	private quadrants: Quadtree<T>[] | null = null;
-
-	constructor(
-		private readonly x: number,
-		private readonly y: number,
-		private readonly w: number,
-		private readonly h: number,
-		private readonly level = 0,
-	) {}
-
-	add(item: T): void {
-		if (this.quadrants) {
-			this.forEachQuadrant(item, (quadrant) => quadrant.add(item));
-			return;
-		}
-
-		this.items.push(item);
-
-		if (this.items.length > MAX_OBJECTS && this.level < MAX_LEVELS) {
-			this.split();
-			const items = this.items;
-			this.items = [];
-			for (const existing of items) {
-				this.forEachQuadrant(existing, (quadrant) => quadrant.add(existing));
-			}
-		}
-	}
-
-	/** Visits every item whose quadrant overlaps the rectangle; callers refine the test. */
-	get(
-		x: number,
-		y: number,
-		w: number,
-		h: number,
-		visit: (item: T) => void,
-	): void {
-		for (const item of this.items) {
-			visit(item);
-		}
-		if (this.quadrants) {
-			this.forEachQuadrant({ x, y, w, h }, (quadrant) =>
-				quadrant.get(x, y, w, h, visit),
-			);
-		}
-	}
-
-	private split(): void {
-		const w = this.w / 2;
-		const h = this.h / 2;
-		const level = this.level + 1;
-		// North-east, north-west, south-west, south-east.
-		this.quadrants = [
-			new Quadtree<T>(this.x + w, this.y, w, h, level),
-			new Quadtree<T>(this.x, this.y, w, h, level),
-			new Quadtree<T>(this.x, this.y + h, w, h, level),
-			new Quadtree<T>(this.x + w, this.y + h, w, h, level),
-		];
-	}
-
-	private forEachQuadrant(
-		rect: QuadtreeRect,
-		visit: (quadrant: Quadtree<T>) => void,
-	): void {
-		if (!this.quadrants) {
-			return;
-		}
-		const midX = this.x + this.w / 2;
-		const midY = this.y + this.h / 2;
-		const startsNorth = rect.y < midY;
-		const startsWest = rect.x < midX;
-		// Inclusive, so a zero-size query on a midline still reaches a quadrant.
-		const endsEast = rect.x + rect.w >= midX;
-		const endsSouth = rect.y + rect.h >= midY;
-
-		if (startsNorth && endsEast) {
-			visit(this.quadrants[0]);
-		}
-		if (startsWest && startsNorth) {
-			visit(this.quadrants[1]);
-		}
-		if (startsWest && endsSouth) {
-			visit(this.quadrants[2]);
-		}
-		if (endsEast && endsSouth) {
-			visit(this.quadrants[3]);
-		}
-	}
-}

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

@@ -58,23 +58,18 @@ function normalizeLogLimit(
 	return logBase ** exp;
 }
 
-export const DEFAULT_ASINH_THRESHOLD = 1;
-
 /**
- * Returns uPlot scale distribution options for a value axis.
- * Time scales get no distr/log; value scales get distr 1 (linear), 3 (log) or
- * 4 (arcsinh, uPlot's symmetric log) and log base 2 or 10.
+ * Returns uPlot scale distribution options for the Y axis.
+ * Time (X) scale gets no distr/log; Y scale gets distr 1 (linear) or 3 (log) and log base 2 or 10.
  */
 export function getDistributionConfig({
 	time,
 	distr,
 	logBase,
-	asinhThreshold,
 }: {
 	time: ScaleProps['time'];
 	distr?: DistributionType;
 	logBase?: number;
-	asinhThreshold?: number;
 }): Partial<Scale> {
 	if (time) {
 		return {};
@@ -82,14 +77,6 @@ export function getDistributionConfig({
 
 	const resolvedLogBase = (logBase ?? 10) === 2 ? 2 : 10;
 
-	if (distr === DistributionType.SymmetricLog) {
-		return {
-			distr: 4,
-			log: resolvedLogBase,
-			asinh: asinhThreshold ?? DEFAULT_ASINH_THRESHOLD,
-		};
-	}
-
 	return {
 		distr: distr === DistributionType.Logarithmic ? 3 : 1,
 		log: resolvedLogBase,

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

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

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

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

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

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

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

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

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

@@ -1,112 +0,0 @@
-import { DistributionType } from 'lib/uPlotV2/config/types';
-
-import { resolveAxisDistribution } from '../axisDistribution';
-import { ScatterAxisScale } from '../types';
-
-describe('resolveAxisDistribution', () => {
-	it('is linear when asked, whatever the values', () => {
-		expect(
-			resolveAxisDistribution([1, 1e6], ScatterAxisScale.Linear),
-		).toStrictEqual({ distribution: DistributionType.Linear });
-	});
-
-	it('is a plain log when every value is positive', () => {
-		expect(resolveAxisDistribution([1, 100], ScatterAxisScale.Log)).toStrictEqual(
-			{ distribution: DistributionType.Logarithmic },
-		);
-	});
-
-	it('falls back from log to a symmetric log around the smallest magnitude when zero is present', () => {
-		expect(
-			resolveAxisDistribution([0, 0.05, 300], ScatterAxisScale.Log),
-		).toStrictEqual({
-			distribution: DistributionType.SymmetricLog,
-			asinhThreshold: 0.01,
-		});
-	});
-
-	it('keeps an explicit log axis for a soft min it cannot place', () => {
-		expect(
-			resolveAxisDistribution([1, 100], ScatterAxisScale.Log, [-10]),
-		).toStrictEqual({ distribution: DistributionType.Logarithmic });
-	});
-
-	it('is a symmetric log when asked, even with only positive values', () => {
-		expect(
-			resolveAxisDistribution([2, 300], ScatterAxisScale.SymLog),
-		).toStrictEqual({
-			distribution: DistributionType.SymmetricLog,
-			asinhThreshold: 1,
-		});
-	});
-
-	it('uses a unit threshold when nothing is positive', () => {
-		expect(
-			resolveAxisDistribution([0, -5], ScatterAxisScale.SymLog),
-		).toStrictEqual({
-			distribution: DistributionType.SymmetricLog,
-			asinhThreshold: 1,
-		});
-	});
-
-	describe('auto', () => {
-		const SKEWED = [1, 2, 3, 5, 8, 10, 20, 50, 1000];
-
-		it.each([
-			['skewed positive values', SKEWED, DistributionType.Logarithmic],
-			[
-				'values spread evenly across decades',
-				[1, 250, 500, 750, 1000],
-				DistributionType.Linear,
-			],
-			[
-				'a single outlier among clustered values',
-				[0.001, 40, 45, 50, 55, 60],
-				DistributionType.Linear,
-			],
-			[
-				'skewed values spanning under two decades',
-				[10, 10, 10, 11, 50],
-				DistributionType.Linear,
-			],
-			['no finite values', [Number.NaN], DistributionType.Linear],
-		])('picks a scale for %s', (_, values, distribution) => {
-			expect(resolveAxisDistribution(values, ScatterAxisScale.Auto)).toStrictEqual(
-				{ distribution },
-			);
-		});
-
-		it('picks symlog for skewed values that include zero', () => {
-			expect(
-				resolveAxisDistribution(
-					[0, 0, 1, 2, 5, 10, 50, 100, 10_000],
-					ScatterAxisScale.Auto,
-				),
-			).toStrictEqual({
-				distribution: DistributionType.SymmetricLog,
-				asinhThreshold: 1,
-			});
-		});
-
-		it('picks symlog when a soft limit reaches zero or below', () => {
-			expect(
-				resolveAxisDistribution(SKEWED, ScatterAxisScale.Auto, [0]),
-			).toStrictEqual({
-				distribution: DistributionType.SymmetricLog,
-				asinhThreshold: 1,
-			});
-		});
-
-		it('counts a soft limit towards the decades it spans', () => {
-			expect(
-				resolveAxisDistribution([5, 50], ScatterAxisScale.Auto, [null, 5000]),
-			).toStrictEqual({ distribution: DistributionType.Logarithmic });
-		});
-
-		it('is the default', () => {
-			expect(resolveAxisDistribution(SKEWED)).toStrictEqual({
-				distribution: DistributionType.Logarithmic,
-			});
-		});
-	});
-});

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

@@ -1,88 +0,0 @@
-import { ScatterAxisScale, type ScatterSeries } from '../types';
-import { buildScatterConfig } from '../utils';
-
-jest.mock('lib/visualization/panels/utils/legendVisibilityUtils', () => ({
-	getStoredSeriesVisibility: jest.fn(),
-}));
-
-const SERIES: ScatterSeries[] = [
-	{ label: 'cart', xs: [10, 20], ys: [100, 200], sizes: [1, null] },
-	{ label: 'checkout', xs: [30], ys: [0] },
-];
-
-describe('buildScatterConfig', () => {
-	const build = (
-		overrides: Partial<Parameters<typeof buildScatterConfig>[0]> = {},
-	): ReturnType<typeof buildScatterConfig> =>
-		buildScatterConfig({
-			id: 'scatter',
-			series: SERIES,
-			isDarkMode: true,
-			x: { unit: 'reqps' },
-			y: { unit: 'ms', scale: ScatterAxisScale.Log },
-			...overrides,
-		});
-
-	it('draws a line along both plot edges', () => {
-		const [xAxis, yAxis] = build().getConfig().axes ?? [];
-
-		expect(xAxis?.border?.show).toBe(true);
-		expect(yAxis?.border?.show).toBe(true);
-	});
-
-	it('titles each axis with its label, and leaves an unlabelled one bare', () => {
-		const config = build({
-			x: { unit: 'reqps', label: 'Throughput' },
-			y: { unit: 'ms', label: '' },
-		}).getConfig();
-		const [xAxis, yAxis] = config.axes ?? [];
-
-		expect(xAxis?.label).toBe('Throughput');
-		expect(yAxis?.label).toBeUndefined();
-	});
-
-	it('emits a faceted plot with two value scales', () => {
-		const config = build().getConfig();
-
-		expect(config.mode).toBe(2);
-		expect(config.scales?.x).toMatchObject({ time: false, distr: 1 });
-		// The y column has a 0, so log becomes the symmetric variant.
-		expect(config.scales?.y).toMatchObject({ time: false, distr: 4 });
-	});
-
-	it('draws one faceted series per group with the plugin path builder', () => {
-		const config = build().getConfig();
-		const [, cart, checkout] = config.series ?? [];
-
-		expect(config.series).toHaveLength(3);
-		expect(cart).toMatchObject({
-			label: 'cart',
-			facets: [
-				{ scale: 'x', auto: true },
-				{ scale: 'y', auto: true },
-			],
-		});
-		expect(typeof cart?.paths).toBe('function');
-		expect(cart?.paths).toBe(checkout?.paths);
-		expect(cart?.points?.show).toBe(false);
-	});
-
-	it('formats both axes with their units', () => {
-		const config = build().getConfig();
-		const [xAxis, yAxis] = config.axes ?? [];
-
-		expect(xAxis).toMatchObject({ scale: 'x', side: 2, space: 90 });
-		expect(yAxis).toMatchObject({ scale: 'y', side: 3 });
-		expect(typeof xAxis?.values).toBe('function');
-		expect(typeof yAxis?.values).toBe('function');
-	});
-
-	it('registers a y threshold draw hook when thresholds are given', () => {
-		const config = build({
-			thresholds: [{ thresholdValue: 300, thresholdUnit: 'ms' }],
-		}).getConfig();
-
-		expect(config.hooks?.draw).toHaveLength(1);
-		expect(build().getConfig().hooks?.draw).toBeUndefined();
-	});
-});

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

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

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

@@ -1,51 +0,0 @@
-import type uPlot from 'uplot';
-
-import type { ScatterSeries } from '../types';
-import { getCursorHit, prepareScatterChartData } from '../utils';
-
-jest.mock('lib/visualization/panels/utils/legendVisibilityUtils', () => ({
-	getStoredSeriesVisibility: jest.fn(),
-}));
-
-const SERIES: ScatterSeries[] = [
-	{ label: 'cart', xs: [10, 20], ys: [100, 200], sizes: [1, null] },
-	{ label: 'checkout', xs: [30], ys: [0] },
-];
-
-describe('prepareScatterChartData', () => {
-	it('lays series out as facets behind an empty x slot', () => {
-		expect(prepareScatterChartData(SERIES)).toStrictEqual([
-			null,
-			[
-				[10, 20],
-				[100, 200],
-				[1, null],
-			],
-			[[30], [0]],
-		]);
-	});
-});
-
-describe('getCursorHit', () => {
-	const plotWith = (idxs: Array<number | null>): uPlot =>
-		({ cursor: { idxs } }) as unknown as uPlot;
-
-	it('reads the series the scatter plugin answered for', () => {
-		expect(getCursorHit(plotWith([null, null, 4, null]))).toStrictEqual({
-			seriesIndex: 2,
-			dataIndex: 4,
-		});
-	});
-
-	it('takes a data index of 0 as a hit', () => {
-		expect(getCursorHit(plotWith([0, 0]))).toStrictEqual({
-			seriesIndex: 1,
-			dataIndex: 0,
-		});
-	});
-
-	it('is null off every dot', () => {
-		expect(getCursorHit(plotWith([null, null]))).toBeNull();
-		expect(getCursorHit({ cursor: {} } as unknown as uPlot)).toBeNull();
-	});
-});

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

@@ -1,130 +0,0 @@
-import { DistributionType } from 'lib/uPlotV2/config/types';
-
-import { getScaleTransform } from './scatterRange';
-import { type AxisDistribution, ScatterAxisScale } from './types';
-
-const LINEAR_DISTRIBUTION: AxisDistribution = {
-	distribution: DistributionType.Linear,
-};
-
-/** Orders of magnitude `auto` needs before it considers leaving linear. */
-export const AUTO_MIN_DECADES = 2;
-
-/** How many times more axis the middle half of the points must cover for `auto` to leave linear. */
-export const AUTO_SPREAD_GAIN = 2;
-
-function getMagnitudeRange(values: number[]): {
-	minMagnitude: number;
-	maxMagnitude: number;
-	hasNonPositive: boolean;
-} {
-	let minMagnitude = Infinity;
-	let maxMagnitude = -Infinity;
-	let hasNonPositive = false;
-	for (const value of values) {
-		if (!Number.isFinite(value)) {
-			continue;
-		}
-		if (value <= 0) {
-			hasNonPositive = true;
-		}
-		if (value !== 0) {
-			minMagnitude = Math.min(minMagnitude, Math.abs(value));
-			maxMagnitude = Math.max(maxMagnitude, Math.abs(value));
-		}
-	}
-	return { minMagnitude, maxMagnitude, hasNonPositive };
-}
-
-/** The linear band ends at the smallest non-zero magnitude so small values still spread. */
-function symmetricLogDistribution(minMagnitude: number): AxisDistribution {
-	const asinhThreshold = Number.isFinite(minMagnitude)
-		? 10 ** Math.floor(Math.log10(minMagnitude))
-		: 1;
-	return { distribution: DistributionType.SymmetricLog, asinhThreshold };
-}
-
-function quantile(sorted: number[], q: number): number {
-	const position = (sorted.length - 1) * q;
-	const lower = Math.floor(position);
-	const upper = Math.ceil(position);
-	return sorted[lower] + (sorted[upper] - sorted[lower]) * (position - lower);
-}
-
-/** Share of the axis the middle half of the points covers. */
-function middleHalfSpread(
-	sorted: number[],
-	[min, max]: [number, number],
-	distribution: AxisDistribution,
-): number {
-	const { forward } = getScaleTransform(distribution);
-	const span = forward(max) - forward(min);
-	return span > 0
-		? (forward(quantile(sorted, 0.75)) - forward(quantile(sorted, 0.25))) / span
-		: 0;
-}
-
-/**
- * Log (symlog with zero or negatives) when it spreads the points out clearly
- * more than linear does; min/max alone would let one outlier decide.
- */
-function resolveAutoDistribution(
-	values: number[],
-	softLimits: number[],
-): AxisDistribution {
-	const sorted = values
-		.filter((value) => Number.isFinite(value))
-		.sort((a, b) => a - b);
-	if (sorted.length < 2) {
-		return LINEAR_DISTRIBUTION;
-	}
-	const { minMagnitude, maxMagnitude, hasNonPositive } = getMagnitudeRange([
-		...sorted,
-		...softLimits,
-	]);
-	if (!(Math.log10(maxMagnitude / minMagnitude) >= AUTO_MIN_DECADES)) {
-		return LINEAR_DISTRIBUTION;
-	}
-	const candidate = hasNonPositive
-		? symmetricLogDistribution(minMagnitude)
-		: { distribution: DistributionType.Logarithmic };
-	const extent: [number, number] = [
-		Math.min(sorted[0], ...softLimits),
-		Math.max(sorted[sorted.length - 1], ...softLimits),
-	];
-	const candidateSpread = middleHalfSpread(sorted, extent, candidate);
-	const linearSpread = middleHalfSpread(sorted, extent, LINEAR_DISTRIBUTION);
-	return candidateSpread > 0 &&
-		candidateSpread >= AUTO_SPREAD_GAIN * linearSpread
-		? candidate
-		: LINEAR_DISTRIBUTION;
-}
-
-/** `log` falls back to symlog rather than drop zero or negatives; callers filter first to drop them. */
-export function resolveAxisDistribution(
-	values: number[],
-	scale: ScatterAxisScale = ScatterAxisScale.Auto,
-	/** Soft limits and thresholds the axis must reach; only `auto` weighs them. */
-	softLimits: Array<number | null | undefined> = [],
-): AxisDistribution {
-	switch (scale) {
-		case ScatterAxisScale.Linear:
-			return LINEAR_DISTRIBUTION;
-		case ScatterAxisScale.SymLog:
-			return symmetricLogDistribution(getMagnitudeRange(values).minMagnitude);
-		case ScatterAxisScale.Log: {
-			const { minMagnitude, hasNonPositive } = getMagnitudeRange(values);
-			return hasNonPositive
-				? symmetricLogDistribution(minMagnitude)
-				: { distribution: DistributionType.Logarithmic };
-		}
-		case ScatterAxisScale.Auto:
-		default:
-			return resolveAutoDistribution(
-				values,
-				softLimits.filter(
-					(limit): limit is number => limit != null && Number.isFinite(limit),
-				),
-			);
-	}
-}

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

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

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

@@ -1,67 +0,0 @@
-import type { PrecisionOption } from 'components/Graph/types';
-import type {
-	DistributionType,
-	SelectionPreferencesSource,
-} from 'lib/uPlotV2/config/types';
-import type { Threshold } from 'lib/uPlotV2/hooks/types';
-import type { ScatterPointSize } from 'lib/uPlotV2/plugins/ScatterPlugin/types';
-
-export interface ScatterSeries {
-	label: string;
-	xs: number[];
-	ys: number[];
-	/** Optional third channel, in the caller's units. */
-	sizes?: Array<number | null>;
-}
-
-export enum ScatterAxisScale {
-	/** Log or symlog when it spreads the points out more than linear does. */
-	Auto = 'auto',
-	Linear = 'linear',
-	Log = 'log',
-	/** Log-like, but places zero and negatives. */
-	SymLog = 'symlog',
-}
-
-export interface ScatterAxisOptions {
-	label?: string;
-	unit?: string;
-	softMin?: number | null;
-	softMax?: number | null;
-	scale?: ScatterAxisScale;
-}
-
-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;
-}
-
-export interface AxisDistribution {
-	distribution: DistributionType;
-	asinhThreshold?: number;
-}
-
-export interface ScaleTransform {
-	forward: (value: number) => number;
-	inverse: (position: number) => number;
-}
-
-export interface ScatterRangeOptions extends AxisDistribution {
-	dimension: 'x' | 'y';
-	/** CSS pixels kept clear at each end so the largest dot draws whole. */
-	marginPx: number;
-	softMin?: number | null;
-	softMax?: number | null;
-}

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

@@ -1,194 +0,0 @@
-import {
-	type AxisProps,
-	DistributionType,
-	DrawStyle,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import {
-	applyScatterPlugin,
-	createScatterPlugin,
-	SCATTER_FACETS,
-} from 'lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin';
-import {
-	DEFAULT_SCATTER_POINT_SIZE,
-	ScatterChartData,
-	ScatterSeriesData,
-} from 'lib/uPlotV2/plugins/ScatterPlugin/types';
-import {
-	logScaleSplits,
-	spacedLogLabels,
-} from 'lib/uPlotV2/utils/logGridSplits';
-import { adjustSoftLimitsWithThresholds } from 'lib/uPlotV2/utils/scale';
-import uPlot from 'uplot';
-
-import { resolveAxisDistribution } from './axisDistribution';
-import { createScatterRange } from './scatterRange';
-import type {
-	AxisDistribution,
-	BuildScatterConfigArgs,
-	ScatterSeries,
-} from './types';
-
-const POINT_STROKE_WIDTH = 1;
-
-/** Unit-suffixed x labels are wider than uPlot's 50px default assumes. */
-const X_AXIS_TICK_SPACE_PX = 90;
-const X_AXIS_END_LABEL_PADDING_PX = 40;
-
-/** The plugin's `dataIdx` answers only for the hit series. */
-export function getCursorHit(
-	plot: uPlot,
-): { seriesIndex: number; dataIndex: number } | null {
-	const idxs = plot.cursor.idxs ?? [];
-	for (let seriesIndex = 1; seriesIndex < idxs.length; seriesIndex++) {
-		const dataIndex = idxs[seriesIndex];
-		if (dataIndex != null) {
-			return { seriesIndex, dataIndex };
-		}
-	}
-	return null;
-}
-
-/** `[null, [xs, ys, sizes?], …]`: uPlot's faceted layout, series 0 empty. */
-export function prepareScatterChartData(
-	series: ScatterSeries[],
-): uPlot.AlignedData {
-	const data: ScatterChartData = [
-		null,
-		...series.map((entry): ScatterSeriesData =>
-			entry.sizes ? [entry.xs, entry.ys, entry.sizes] : [entry.xs, entry.ys],
-		),
-	];
-	return data as unknown as uPlot.AlignedData;
-}
-
-/** The scatter range is unsnapped, so a log axis places and labels its own ticks. */
-function getLogAxisTicks({
-	distribution,
-}: AxisDistribution): Pick<AxisProps, 'splits' | 'filter'> {
-	return distribution === DistributionType.Logarithmic
-		? { splits: logScaleSplits, filter: spacedLogLabels }
-		: {};
-}
-
-export function buildScatterConfig({
-	id,
-	series,
-	isDarkMode,
-	x,
-	y,
-	pointSize = DEFAULT_SCATTER_POINT_SIZE,
-	fillOpacity,
-	colorMapping = {},
-	thresholds,
-	decimalPrecision,
-	selectionPreferencesSource,
-	shouldSaveSelectionPreference,
-}: BuildScatterConfigArgs): UPlotConfigBuilder {
-	const builder = new UPlotConfigBuilder({
-		id,
-		selectionPreferencesSource,
-		shouldSaveSelectionPreference,
-	});
-
-	const plugin = createScatterPlugin({ pointSize });
-	applyScatterPlugin(builder, plugin);
-	// The last x label is centred on the plot's right edge; room for its unit.
-	builder.setPadding([16, X_AXIS_END_LABEL_PADDING_PX, 8, 8]);
-
-	const ySoftLimits = adjustSoftLimitsWithThresholds(
-		y.softMin ?? null,
-		y.softMax ?? null,
-		thresholds,
-		y.unit,
-	);
-	const xDistribution = resolveAxisDistribution(
-		series.flatMap((entry) => entry.xs),
-		x.scale,
-		[x.softMin, x.softMax],
-	);
-	const yDistribution = resolveAxisDistribution(
-		series.flatMap((entry) => entry.ys),
-		y.scale,
-		[ySoftLimits.softMin, ySoftLimits.softMax],
-	);
-
-	const yThresholds =
-		thresholds && thresholds.length > 0
-			? { scaleKey: 'y', thresholds, yAxisUnit: y.unit }
-			: undefined;
-
-	// The largest disc drawn, plus its outline, kept clear of each plot edge.
-	const largestDiameter = series.some((entry) => entry.sizes)
-		? pointSize.max
-		: pointSize.fixed;
-	const marginPx = largestDiameter / 2 + POINT_STROKE_WIDTH;
-
-	builder.addScale({
-		scaleKey: 'x',
-		time: false,
-		range: createScatterRange({
-			dimension: 'x',
-			marginPx,
-			softMin: x.softMin,
-			softMax: x.softMax,
-			...xDistribution,
-		}),
-		...xDistribution,
-	});
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		range: createScatterRange({
-			dimension: 'y',
-			marginPx,
-			...ySoftLimits,
-			...yDistribution,
-		}),
-		...yDistribution,
-	});
-
-	builder.addAxis({
-		scaleKey: 'x',
-		side: 2,
-		label: x.label || undefined,
-		isDarkMode,
-		isTimeAxis: false,
-		yAxisUnit: x.unit ?? '',
-		decimalPrecision,
-		isLogScale: xDistribution.distribution !== DistributionType.Linear,
-		...getLogAxisTicks(xDistribution),
-		space: X_AXIS_TICK_SPACE_PX,
-	});
-	builder.addAxis({
-		scaleKey: 'y',
-		side: 3,
-		label: y.label || undefined,
-		isDarkMode,
-		yAxisUnit: y.unit ?? '',
-		decimalPrecision,
-		isLogScale: yDistribution.distribution !== DistributionType.Linear,
-		...getLogAxisTicks(yDistribution),
-	});
-
-	series.forEach((entry) => {
-		builder.addSeries({
-			scaleKey: 'y',
-			label: entry.label,
-			colorMapping,
-			drawStyle: DrawStyle.Scatter,
-			pathBuilder: plugin.pathBuilder,
-			facets: SCATTER_FACETS,
-			lineWidth: POINT_STROKE_WIDTH,
-			pointSize: pointSize.fixed,
-			fillOpacity,
-			isDarkMode,
-		});
-	});
-
-	if (yThresholds) {
-		builder.addThresholds(yThresholds);
-	}
-
-	return builder;
-}

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

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

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanAIMessages/MessagesAccordion.module.scss

@@ -25,6 +25,9 @@
 		.ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box
 	) {
 		@include custom-scrollbar;
+
+		max-height: 150px;
+		overflow-y: auto;
 		padding: var(--spacing-4) !important;
 	}
 }

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanAIMessages/MessagesAccordion.tsx

@@ -5,6 +5,7 @@ import { Collapse } from 'antd';
 import { AIThreadMessageProps } from '../../AIThreadMessage/AIThreadMessage';
 import { ThreadMessage } from '../../AIThreadMessage/types';
 import MessagesSection from '../../SpanMessages/MessagesSection';
+import { RawMessagesValue } from '../../utils/spanMessages';
 import { ThreadView } from '../../TraceDetailsThread/types';
 import ThreadViewToggle from '../../TraceDetailsThread/ThreadViewToggle';
 
@@ -19,6 +20,7 @@ interface MessagesAccordionProps extends Pick<
 	icon: ReactNode;
 	title: string;
 	messages: ThreadMessage[];
+	raw?: RawMessagesValue;
 	testId: string;
 }
 
@@ -26,6 +28,7 @@ function MessagesAccordion({
 	icon,
 	title,
 	messages,
+	raw,
 	testId,
 	messageType,
 	canLinkToToolCall,
@@ -33,8 +36,10 @@ function MessagesAccordion({
 }: MessagesAccordionProps): JSX.Element | null {
 	const [isOpen, setIsOpen] = useState(false);
 	const [view, setView] = useState(ThreadView.Formatted);
+	const canFormat = messages.length > 0;
+	const effectiveView = canFormat ? view : ThreadView.Json;
 
-	if (messages.length === 0) {
+	if (!canFormat && !raw) {
 		return null;
 	}
 
@@ -61,12 +66,12 @@ function MessagesAccordion({
 								{title}
 							</span>
 						),
-						extra: isOpen && (
+						extra: isOpen && canFormat && (
 							// The view toggle lives in the header; its clicks must not fold the panel.
 							// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
 							<span onClick={stopToggle}>
 								<ThreadViewToggle
-									value={view}
+									value={effectiveView}
 									onChange={setView}
 									testId={`${testId}-view-toggle`}
 								/>
@@ -74,8 +79,9 @@ function MessagesAccordion({
 						),
 						children: (
 							<MessagesSection
-								view={view}
+								view={effectiveView}
 								messages={messages}
+								raw={raw}
 								testId={`${testId}-body`}
 								messageType={messageType}
 								canLinkToToolCall={canLinkToToolCall}
@@ -89,4 +95,8 @@ function MessagesAccordion({
 	);
 }
 
+MessagesAccordion.defaultProps = {
+	raw: undefined,
+};
+
 export default MessagesAccordion;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanAIMessages/SpanAIMessages.tsx

@@ -3,10 +3,7 @@ import { ArrowDownRight, ArrowUpRight } from '@signozhq/icons';
 
 import { MessageType } from '../../AIThreadMessage/types';
 import { useToolCallLinks } from '../../AIThreadMessage/useToolCallLinks';
-import {
-	getSpanMessages,
-	hasFormattedMessages,
-} from '../../utils/spanMessages';
+import { getSpanMessages, hasAnyMessages } from '../../utils/spanMessages';
 import { ThreadSpan } from '../../TraceDetailsThread/types';
 import { buildToolCallIndex } from '../../TraceDetailsThread/utils';
 import MessagesAccordion from './MessagesAccordion';
@@ -28,7 +25,7 @@ function SpanAIMessages({ span }: SpanAIMessagesProps): JSX.Element | null {
 		toolCallKeys,
 	);
 
-	if (!hasFormattedMessages(data)) {
+	if (!hasAnyMessages(data)) {
 		return null;
 	}
 
@@ -38,6 +35,7 @@ function SpanAIMessages({ span }: SpanAIMessagesProps): JSX.Element | null {
 				icon={<ArrowUpRight size={14} />}
 				title="Input"
 				messages={data.formattedInput}
+				raw={data.rawInput}
 				messageType={MessageType.Input}
 				testId="span-ai-messages-input"
 				canLinkToToolCall={canLinkToToolCall}
@@ -47,6 +45,7 @@ function SpanAIMessages({ span }: SpanAIMessagesProps): JSX.Element | null {
 				icon={<ArrowDownRight size={14} />}
 				title="Output"
 				messages={data.formattedOutput}
+				raw={data.rawOutput}
 				messageType={MessageType.Output}
 				testId="span-ai-messages-output"
 				canLinkToToolCall={canLinkToToolCall}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanSummary.module.scss

@@ -47,7 +47,6 @@
 	border-radius: 50%;
 	background: var(--accent-forest);
 	flex-shrink: 0;
-	margin-right: 4px;
 }
 
 // Truncating text inside a badge (service name, status message).

frontend/src/pages/TraceDetailsV3/SpanMessages/MessagesSection.tsx

@@ -3,7 +3,8 @@ import AIThreadMessage, {
 } from '../AIThreadMessage/AIThreadMessage';
 import { ThreadMessage } from '../AIThreadMessage/types';
 import { ThreadView } from '../TraceDetailsThread/types';
-import JsonBlock from '../AIThreadMessage/JsonBlock';
+import RawMessages from './RawMessages';
+import { RawMessagesValue } from '../utils/spanMessages';
 
 import styles from './SpanMessages.module.scss';
 
@@ -16,6 +17,7 @@ interface MessagesSectionProps extends MessageProps {
 	title?: string;
 	view: ThreadView;
 	messages: ThreadMessage[];
+	raw?: RawMessagesValue;
 	testId: string;
 }
 
@@ -23,19 +25,21 @@ function MessagesSection({
 	title,
 	view,
 	messages,
+	raw,
 	testId,
 	messageType,
 	canLinkToToolCall,
 	onToolLinkClick,
 }: MessagesSectionProps): JSX.Element | null {
-	if (messages.length === 0) {
+	const isFormatted = view === ThreadView.Formatted;
+	if (isFormatted ? messages.length === 0 : !raw) {
 		return null;
 	}
 
 	return (
 		<section className={styles.section} data-testid={testId}>
 			{title && <div className={styles.sectionTitle}>{title}</div>}
-			{view === ThreadView.Formatted ? (
+			{isFormatted ? (
 				<div className={styles.messages}>
 					{messages.map((message, index) => (
 						<AIThreadMessage
@@ -50,7 +54,7 @@ function MessagesSection({
 					))}
 				</div>
 			) : (
-				<JsonBlock data={messages} />
+				<RawMessages value={raw as RawMessagesValue} />
 			)}
 		</section>
 	);
@@ -58,6 +62,7 @@ function MessagesSection({
 
 MessagesSection.defaultProps = {
 	title: undefined,
+	raw: undefined,
 };
 
 export default MessagesSection;

frontend/src/pages/TraceDetailsV3/SpanMessages/RawMessages.tsx

@@ -0,0 +1,21 @@
+import JsonBlock from '../AIThreadMessage/JsonBlock';
+import { RawMessagesValue } from '../utils/spanMessages';
+
+import styles from './SpanMessages.module.scss';
+
+interface RawMessagesProps {
+	value: RawMessagesValue;
+}
+
+function RawMessages({ value }: RawMessagesProps): JSX.Element {
+	if (typeof value === 'object') {
+		return <JsonBlock data={value} />;
+	}
+	return (
+		<span className={styles.rawUnavailable} data-testid="span-raw-messages">
+			Unable to render messages
+		</span>
+	);
+}
+
+export default RawMessages;

frontend/src/pages/TraceDetailsV3/SpanMessages/SpanMessages.module.scss

@@ -28,6 +28,12 @@
 	min-width: 0;
 }
 
+.rawUnavailable {
+	font-size: var(--periscope-font-size-base);
+	font-style: italic;
+	color: var(--l2-foreground);
+}
+
 .missing {
 	padding: var(--spacing-10) var(--spacing-6);
 	border-radius: var(--radius-2);

frontend/src/pages/TraceDetailsV3/SpanMessages/SpanMessages.tsx

@@ -6,7 +6,11 @@ import { ThreadSpan, ThreadView } from '../TraceDetailsThread/types';
 import JsonBlock from '../AIThreadMessage/JsonBlock';
 import { MessageType } from '../AIThreadMessage/types';
 import MessagesSection from './MessagesSection';
-import { getSpanMessages, hasFormattedMessages } from '../utils/spanMessages';
+import {
+	getSpanMessages,
+	hasFormattedMessages,
+	hasRawMessages,
+} from '../utils/spanMessages';
 
 import styles from './SpanMessages.module.scss';
 
@@ -28,8 +32,9 @@ function SpanMessages({
 	onToolLinkClick,
 }: SpanMessagesProps): JSX.Element {
 	const data = useMemo(() => getSpanMessages(span), [span]);
+	const isFormatted = view === ThreadView.Formatted;
 
-	if (!hasFormattedMessages(data)) {
+	if (isFormatted ? !hasFormattedMessages(data) : !hasRawMessages(data)) {
 		return (
 			<div
 				className={cx(styles.missing, className)}
@@ -40,11 +45,11 @@ function SpanMessages({
 		);
 	}
 
-	if (view === ThreadView.Json) {
+	if (!isFormatted) {
 		return (
 			<div className={cx(styles.root, className)} data-testid="span-messages-json">
 				<JsonBlock
-					data={{ input: data.formattedInput, output: data.formattedOutput }}
+					data={{ input: data.rawInput ?? [], output: data.rawOutput ?? [] }}
 				/>
 			</div>
 		);
@@ -55,6 +60,7 @@ function SpanMessages({
 			<MessagesSection
 				view={view}
 				messages={data.formattedInput}
+				raw={data.rawInput}
 				messageType={MessageType.Input}
 				testId="span-messages-input"
 				canLinkToToolCall={canLinkToToolCall}
@@ -63,6 +69,7 @@ function SpanMessages({
 			<MessagesSection
 				view={view}
 				messages={data.formattedOutput}
+				raw={data.rawOutput}
 				messageType={MessageType.Output}
 				testId="span-messages-output"
 				canLinkToToolCall={canLinkToToolCall}

frontend/src/pages/TraceDetailsV3/SpanMessages/__tests__/SpanMessages.test.tsx

@@ -48,36 +48,41 @@ describe('SpanMessages', () => {
 		).toBeInTheDocument();
 	});
 
-	it('shows the empty state in JSON view when there are no formatted messages', () => {
-		const span = makeSpan({
-			attributes: { [GEN_AI_KEYS.inputMessages]: '[{"role":"user"}]' },
-		});
-
-		render(<SpanMessages span={span} view={ThreadView.Json} />);
+	it('shows the empty state in JSON view when there are no raw messages', () => {
+		render(<SpanMessages span={makeSpan({})} view={ThreadView.Json} />);
 
 		expect(screen.getByTestId('span-messages-empty')).toBeInTheDocument();
 	});
 
-	it('renders formatted messages in JSON view, ignoring the raw attribute', () => {
+	it('renders raw messages in JSON view', () => {
 		const span = makeSpan({
-			formattedInput: [
-				{ role: 'user', parts: [{ type: 'text', content: 'formatted-text' }] },
-			],
-			attributes: {
-				[GEN_AI_KEYS.inputMessages]: '[{"role":"user","content":"raw-text"}]',
-			},
+			attributes: { [GEN_AI_KEYS.outputMessages]: '[{"role":"assistant"}]' },
 		});
 
 		render(<SpanMessages span={span} view={ThreadView.Json} />);
 
 		expect(screen.getByTestId('span-messages-json')).toBeInTheDocument();
-		expect(screen.getByText(/formatted-text/)).toBeInTheDocument();
-		expect(screen.queryByText(/raw-text/)).not.toBeInTheDocument();
+	});
+
+	it('opens every key in JSON view', () => {
+		const span = makeSpan({
+			attributes: {
+				[GEN_AI_KEYS.inputMessages]: '[{"role":"user","content":"visible-text"}]',
+			},
+		});
+
+		render(<SpanMessages span={span} view={ThreadView.Json} />);
+
+		expect(screen.getByText(/visible-text/)).toBeInTheDocument();
 	});
 
 	it('collapses tall JSON behind Show more in JSON view', () => {
 		const span = makeSpan({
-			formattedInput: [{ role: 'user', parts: [{ type: 'text', content: 'hi' }] }],
+			attributes: {
+				[GEN_AI_KEYS.inputMessages]: JSON.stringify([
+					{ role: 'user', content: 'hi' },
+				]),
+			},
 		});
 
 		render(<SpanMessages span={span} view={ThreadView.Json} />);

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -99,12 +99,10 @@ function TraceDetailsHeader({
 	const handlePreviousBtnClick = useCallback((): void => {
 		if (hasInAppHistory()) {
 			history.goBack();
-		} else if (!isOverview) {
-			history.push(ROUTES.AI_OBSERVABILITY_EXPLORER);
 		} else {
 			history.push(ROUTES.TRACES_EXPLORER);
 		}
-	}, [isOverview]);
+	}, []);
 
 	const handleToggleTraceDetails = useCallback((): void => {
 		setShowTraceDetails((prev) => !prev);

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsTabs.tsx

@@ -22,8 +22,7 @@ function TraceDetailsTabs(): JSX.Element {
 	const [tab, setTab] = useTraceDetailsTab();
 
 	const handleChange = (value: string): void => {
-		// Pushed so the thread's "Go back" returns to the previous tab, not the previous page.
-		void setTab(value as TraceDetailsTab, { history: 'push' });
+		void setTab(value as TraceDetailsTab);
 	};
 
 	return (

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/__tests__/TraceDetailsHeader.test.tsx

@@ -1,8 +1,10 @@
+import { fireEvent, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import type { SpantypesGettableTraceSummaryDTO } from 'api/generated/services/sigNoz.schemas';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import ROUTES from 'constants/routes';
-import { fireEvent, render, screen, userEvent } from 'tests/test-utils';
+import { render } from 'tests/test-utils';
 
 import TraceDetailsHeader from '../TraceDetailsHeader';
 import { useTraceSummary } from '../useTraceSummary';
@@ -98,22 +100,6 @@ describe('TraceDetailsHeader – back button', () => {
 		expect(mockPush).toHaveBeenCalledWith(ROUTES.TRACES_EXPLORER);
 		expect(mockGoBack).not.toHaveBeenCalled();
 	});
-
-	it('pushes to the AI observability explorer when opened directly on another tab', async () => {
-		mockHasInAppHistory.mockReturnValue(false);
-		const user = userEvent.setup({ delay: null });
-		render(
-			<NuqsTestingAdapter searchParams="?tab=thread">
-				<TraceDetailsHeader {...baseProps} />
-			</NuqsTestingAdapter>,
-		);
-
-		await user.click(screen.getByRole('button', { name: /back/i }));
-
-		expect(mockPush).toHaveBeenCalledTimes(1);
-		expect(mockPush).toHaveBeenCalledWith(ROUTES.AI_OBSERVABILITY_EXPLORER);
-		expect(mockGoBack).not.toHaveBeenCalled();
-	});
 });
 
 describe('TraceDetailsHeader – action cluster', () => {

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/ThreadNoAiSpans.module.scss

@@ -1,31 +1,29 @@
 .root {
-	flex: 1;
 	display: flex;
 	flex-direction: column;
-	align-items: center;
-	justify-content: center;
+	align-items: flex-start;
+	gap: var(--spacing-12);
+	padding: var(--spacing-20) var(--spacing-24);
+}
+
+.message {
+	display: flex;
+	flex-direction: column;
 	gap: var(--spacing-4);
-	padding: var(--spacing-16);
-	text-align: center;
+	max-width: 428px;
 }
 
-.noDataImg {
-	height: 32px;
-	width: 32px;
+.emoji {
+	font-size: 32px;
+	line-height: 1;
 }
 
-.title {
-	font-size: var(--periscope-font-size-medium);
-	font-weight: var(--font-weight-medium);
+.paragraphs {
+	display: flex;
+	flex-direction: column;
+	gap: var(--paragraph-base-500-line-height);
+}
+
+.highlight {
 	color: var(--l1-foreground);
 }
-
-.description {
-	max-width: 420px;
-	font-size: var(--periscope-font-size-base);
-	color: var(--l2-foreground);
-}
-
-.actions {
-	margin-top: var(--spacing-4);
-}

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/ThreadNoAiSpans.tsx

@@ -1,9 +1,8 @@
 import { ArrowRight } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
 import { openInNewTab } from 'utils/navigation';
 
-import noDataUrl from '@/assets/Icons/no-data.svg';
-
 import { LLM_OBSERVABILITY_DOCS_URL } from '../constants';
 
 import styles from './ThreadNoAiSpans.module.scss';
@@ -11,28 +10,32 @@ import styles from './ThreadNoAiSpans.module.scss';
 function ThreadNoAiSpans(): JSX.Element {
 	return (
 		<div className={styles.root} data-testid="thread-empty">
-			<img src={noDataUrl} alt="" className={styles.noDataImg} />
-			<span className={styles.title}>
-				This trace has no spans from AI-related actions
-			</span>
-			<span className={styles.description}>
-				Thread view summarising your entire AI-journey history will appear here when
-				the spans have the necessary datapoints.
-			</span>
-			<div className={styles.actions}>
-				<Button
-					variant="solid"
-					color="secondary"
-					size="md"
-					suffix={<ArrowRight size={12} />}
-					onClick={(): void => {
-						openInNewTab(LLM_OBSERVABILITY_DOCS_URL);
-					}}
-					testId="thread-empty-learn-more"
-				>
-					Learn more
-				</Button>
+			<div className={styles.message}>
+				<span className={styles.emoji} aria-hidden>
+					🚏
+				</span>
+				<div className={styles.paragraphs}>
+					<Typography size="base" weight="medium" color="muted">
+						Looks like this trace does not have any spans from AI-related actions.
+					</Typography>
+					<Typography size="base" weight="medium" className={styles.highlight}>
+						Thread view summarising your entire AI-journey history will appear here
+						when the spans have the necessary datapoints.
+					</Typography>
+				</div>
 			</div>
+			<Button
+				variant="solid"
+				color="secondary"
+				size="md"
+				suffix={<ArrowRight size={12} />}
+				onClick={(): void => {
+					openInNewTab(LLM_OBSERVABILITY_DOCS_URL);
+				}}
+				testId="thread-empty-learn-more"
+			>
+				Learn more
+			</Button>
 		</div>
 	);
 }

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/TraceDetailsThread.tsx

@@ -40,7 +40,6 @@ function TraceDetailsThread(): JSX.Element {
 		spansAboveFirstPage,
 		isLoading,
 		isError,
-		isNotFound,
 		hasNextPage,
 		hasPreviousPage,
 		isFetchingNextPage,
@@ -53,7 +52,6 @@ function TraceDetailsThread(): JSX.Element {
 		interestedSpanId,
 		spans,
 		isLoading,
-		isNotFound,
 	);
 	const interestedSpanIndex = spans.findIndex(
 		(span) => span.span_id === interestedSpanId,

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/hooks/__tests__/useTraceThread.test.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import { getTraceThread } from 'api/generated/services/tracedetail';
-import { act, renderHook, waitFor } from 'tests/test-utils';
 
 import { useTraceThread } from '../useTraceThread';
 
@@ -154,7 +154,6 @@ describe('useTraceThread', () => {
 
 		await waitFor(() => expect(result.current.isError).toBe(true));
 		expect(mockGetTraceThread).toHaveBeenCalledTimes(1);
-		expect(result.current.isNotFound).toBe(true);
 	});
 
 	it('retries other errors', async () => {
@@ -163,6 +162,5 @@ describe('useTraceThread', () => {
 
 		await waitFor(() => expect(result.current.isError).toBe(true));
 		expect(mockGetTraceThread).toHaveBeenCalledTimes(4);
-		expect(result.current.isNotFound).toBe(false);
 	});
 });

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/hooks/useTraceThread.ts

@@ -25,8 +25,6 @@ interface UseTraceThreadResult {
 	spansAboveFirstPage: number;
 	isLoading: boolean;
 	isError: boolean;
-	/** The interested span (or trace) doesn't exist; an empty thread is not this. */
-	isNotFound: boolean;
 	hasNextPage: boolean;
 	hasPreviousPage: boolean;
 	isFetchingNextPage: boolean;
@@ -101,7 +99,6 @@ export function useTraceThread({
 		spansAboveFirstPage,
 		isLoading: query.isLoading,
 		isError: query.isError,
-		isNotFound: isNotFoundError(query.error),
 		hasNextPage: !!query.hasNextPage,
 		hasPreviousPage: !!query.hasPreviousPage,
 		isFetchingNextPage: query.isFetchingNextPage,

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/utils.ts

@@ -28,7 +28,6 @@ export function getInterestedSpanStatus(
 	interestedSpanId: string | undefined,
 	spans: ThreadSpan[],
 	isLoading: boolean,
-	isNotFound: boolean,
 ): InterestedSpanStatus {
 	if (!interestedSpanId) {
 		return InterestedSpanStatus.None;
@@ -36,12 +35,8 @@ export function getInterestedSpanStatus(
 	if (isLoading) {
 		return InterestedSpanStatus.Loading;
 	}
-	if (isNotFound) {
-		return InterestedSpanStatus.NotFound;
-	}
-	// The span exists but the thread is empty, so the no-AI-spans state applies.
 	if (spans.length === 0) {
-		return InterestedSpanStatus.None;
+		return InterestedSpanStatus.NotFound;
 	}
 	return spans.some((span) => span.span_id === interestedSpanId)
 		? InterestedSpanStatus.Found

frontend/src/pages/TraceDetailsV3/constants.ts

@@ -60,4 +60,4 @@ export enum TraceDetailsTab {
 }
 
 export const LLM_OBSERVABILITY_DOCS_URL =
-	'https://signoz.io/docs/ai-observability/';
+	'https://signoz.io/docs/llm-observability/';

frontend/src/pages/TraceDetailsV3/utils/spanMessages.ts

@@ -1,19 +1,49 @@
+import { parseJsonObject } from '../AIThreadMessage/utils';
 import { ThreadMessage } from '../AIThreadMessage/types';
 import { ThreadSpan } from '../TraceDetailsThread/types';
+import { GEN_AI_KEYS } from './aiTraceUtils';
+
+/** Parsed JSON, or the original string when it isn't JSON. */
+export type RawMessagesValue = object | string;
 
 export interface SpanMessagesData {
 	formattedInput: ThreadMessage[];
 	formattedOutput: ThreadMessage[];
+	rawInput?: RawMessagesValue;
+	rawOutput?: RawMessagesValue;
+}
+
+function toRawValue(value: unknown): RawMessagesValue | undefined {
+	if (value === undefined || value === null || value === '') {
+		return undefined;
+	}
+	if (typeof value === 'string') {
+		return parseJsonObject(value) ?? value;
+	}
+	return typeof value === 'object' ? value : JSON.stringify(value);
 }
 
 export function getSpanMessages(span: ThreadSpan): SpanMessagesData {
+	const rawInput = toRawValue(span.attributes?.[GEN_AI_KEYS.inputMessages]);
+	const rawOutput = toRawValue(span.attributes?.[GEN_AI_KEYS.outputMessages]);
+
 	// Spans from before the JSON column have no formatted messages.
 	return {
 		formattedInput: span.formattedInput ?? [],
 		formattedOutput: span.formattedOutput ?? [],
+		rawInput,
+		rawOutput,
 	};
 }
 
 export function hasFormattedMessages(data: SpanMessagesData): boolean {
 	return data.formattedInput.length > 0 || data.formattedOutput.length > 0;
 }
+
+export function hasRawMessages(data: SpanMessagesData): boolean {
+	return !!data.rawInput || !!data.rawOutput;
+}
+
+export function hasAnyMessages(data: SpanMessagesData): boolean {
+	return hasFormattedMessages(data) || hasRawMessages(data);
+}

pkg/apiserver/signozapiserver/alertmanager.go

@@ -140,7 +140,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			Description:         "This endpoint creates a notification channel",
 			Request:             new(alertmanagertypes.PostableNotificationChannel),
 			RequestContentType:  "application/json",
-			RequestExamples:     createNotificationChannelExamples(),
 			Response:            new(alertmanagertypes.GettableNotificationChannel),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusCreated,
@@ -225,7 +224,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			Description:         "This endpoint replaces a notification channel's configuration in full. Neither name is part of the request body: both are immutable. The kind may change, which replaces the channel's notifier configuration.",
 			Request:             new(alertmanagertypes.UpdatableNotificationChannel),
 			RequestContentType:  "application/json",
-			RequestExamples:     updateNotificationChannelExamples(),
 			Response:            new(alertmanagertypes.GettableNotificationChannel),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,
@@ -311,7 +309,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			Description:         "This endpoint sends a test notification for the configuration in the request body. The channel need not exist and nothing is persisted, so the body carries a configuration only.",
 			Request:             new(alertmanagertypes.TestableNotificationChannel),
 			RequestContentType:  "application/json",
-			RequestExamples:     testNotificationChannelExamples(),
 			Response:            nil,
 			ResponseContentType: "",
 			SuccessStatusCode:   http.StatusNoContent,

pkg/apiserver/signozapiserver/alertmanager_examples.go

@@ -1,201 +0,0 @@
-package signozapiserver
-
-import "github.com/SigNoz/signoz/pkg/http/handler"
-
-// channelConfig wraps one provider spec in the {kind, spec} envelope every
-// channel write carries.
-func channelConfig(kind string, spec map[string]any) map[string]any {
-	return map[string]any{"kind": kind, "spec": spec}
-}
-
-func slackChannelSpec() map[string]any {
-	return map[string]any{
-		"apiUrl":       "https://hooks.slack.com/services/T000/B000/XXXXXXXX",
-		"channel":      "#alerts-platform",
-		"sendResolved": true,
-	}
-}
-
-func pagerdutyChannelSpec() map[string]any {
-	return map[string]any{
-		"routingKey": "R0000000000000000000000000000000",
-		"severity":   "critical",
-	}
-}
-
-func webhookChannelSpec() map[string]any {
-	return map[string]any{
-		"url":         "https://alerts.example.com/signoz",
-		"bearerToken": "00000000-0000-0000-0000-000000000000",
-	}
-}
-
-// createNotificationChannelExamples returns one create payload per channel
-// kind. Each carries the kind's required fields plus one or two optional ones
-// that show a default being overridden.
-func createNotificationChannelExamples() []handler.OpenAPIExample {
-	return []handler.OpenAPIExample{
-		{
-			Name:        "slack",
-			Summary:     "Slack incoming webhook",
-			Description: "Posts to a Slack channel through an incoming webhook. `sendResolved` is off by default for Slack, so it is turned on here.",
-			Value: map[string]any{
-				"name":        "slack-platform",
-				"displayName": "Slack platform",
-				"config":      channelConfig("slack", slackChannelSpec()),
-			},
-		},
-		{
-			Name:        "email",
-			Summary:     "Email recipients",
-			Description: "Sends to a comma-separated recipient list. SMTP transport comes from the deployment's global config, so only recipients and body are configurable.",
-			Value: map[string]any{
-				"name":        "email-oncall",
-				"displayName": "Email on-call",
-				"config": channelConfig("email", map[string]any{
-					"to":      "oncall@example.com, platform@example.com",
-					"headers": map[string]any{"Subject": "[SigNoz] {{ .CommonLabels.alertname }}"},
-				}),
-			},
-		},
-		{
-			Name:        "webhook_bearer",
-			Summary:     "Webhook with a bearer token",
-			Description: "Delivers the Alertmanager webhook payload to an HTTP endpoint. Use either `bearerToken` or `username`/`password`, never both.",
-			Value: map[string]any{
-				"name":        "webhook-incident-bot",
-				"displayName": "Incident bot webhook",
-				"config":      channelConfig("webhook", webhookChannelSpec()),
-			},
-		},
-		{
-			Name:        "pagerduty",
-			Summary:     "PagerDuty Events API v2",
-			Description: "Creates PagerDuty incidents through an Events API v2 integration key.",
-			Value: map[string]any{
-				"name":        "pagerduty-oncall",
-				"displayName": "PagerDuty on-call",
-				"config":      channelConfig("pagerduty", pagerdutyChannelSpec()),
-			},
-		},
-		{
-			Name:        "opsgenie",
-			Summary:     "Opsgenie API integration",
-			Description: "Creates Opsgenie alerts through an API integration key, pinned to priority P2.",
-			Value: map[string]any{
-				"name":        "opsgenie-sre",
-				"displayName": "Opsgenie SRE",
-				"config": channelConfig("opsgenie", map[string]any{
-					"apiKey":   "00000000-0000-0000-0000-000000000000",
-					"priority": "P2",
-				}),
-			},
-		},
-		{
-			Name:        "msteams",
-			Summary:     "Microsoft Teams incoming webhook",
-			Description: "Posts an adaptive card to a Teams channel through an incoming webhook.",
-			Value: map[string]any{
-				"name":        "msteams-platform",
-				"displayName": "Teams platform",
-				"config": channelConfig("msteams", map[string]any{
-					"webhookUrl": "https://example.webhook.office.com/webhookb2/00000000-0000-0000-0000-000000000000",
-				}),
-			},
-		},
-		{
-			Name:        "googlechat",
-			Summary:     "Google Chat space webhook",
-			Description: "Posts to a Google Chat space through its webhook URL.",
-			Value: map[string]any{
-				"name":        "googlechat-platform",
-				"displayName": "Google Chat platform",
-				"config": channelConfig("googlechat", map[string]any{
-					"webhookUrl": "https://chat.googleapis.com/v1/spaces/AAAA0000000/messages?key=XXXX&token=XXXX",
-				}),
-			},
-		},
-		{
-			Name:        "jira",
-			Summary:     "Jira Cloud issues",
-			Description: "Creates one Jira Cloud issue per alert group and reopens it if the alert fires again within `reopenDuration`. Authenticates with an Atlassian account email and API token.",
-			Value: map[string]any{
-				"name":        "jira-platform",
-				"displayName": "Jira platform",
-				"config": channelConfig("jira", map[string]any{
-					"site":           "https://example.atlassian.net",
-					"project":        "OPS",
-					"issueType":      "Bug",
-					"email":          "oncall@example.com",
-					"apiToken":       "XXXXXXXXXXXXXXXXXXXXXXXX",
-					"labels":         []any{"signoz", "alert"},
-					"reopenDuration": "3d",
-				}),
-			},
-		},
-		{
-			Name:        "jsmops",
-			Summary:     "Jira Service Management Ops",
-			Description: "Creates JSM Ops alerts through an integration API key. JSM Ops speaks the Opsgenie alert API, so `priority` takes P1 to P5.",
-			Value: map[string]any{
-				"name":        "jsmops-oncall",
-				"displayName": "JSM Ops on-call",
-				"config": channelConfig("jsmops", map[string]any{
-					"apiKey":   "00000000-0000-0000-0000-000000000000",
-					"priority": "P1",
-					"tags":     "signoz,platform",
-				}),
-			},
-		},
-		{
-			Name:        "incidentio",
-			Summary:     "incident.io HTTP alert source",
-			Description: "Sends alert events to an incident.io HTTP alert source. `url` and `token` are copied from the source's setup page; the token goes without the Bearer prefix.",
-			Value: map[string]any{
-				"name":        "incidentio-platform",
-				"displayName": "incident.io platform",
-				"config": channelConfig("incidentio", map[string]any{
-					"url":      "https://api.incident.io/v2/alert_events/http/00000000-0000-0000-0000-000000000000",
-					"token":    "XXXXXXXXXXXXXXXXXXXXXXXX",
-					"metadata": map[string]any{"team": "platform"},
-				}),
-			},
-		},
-	}
-}
-
-// updateNotificationChannelExamples shows that an update carries only config:
-// name and displayName are immutable, and the kind may change.
-func updateNotificationChannelExamples() []handler.OpenAPIExample {
-	return []handler.OpenAPIExample{
-		{
-			Name:        "slack_rotate_webhook",
-			Summary:     "Replace a Slack webhook URL",
-			Description: "Replaces the stored configuration in full; every field not sent falls back to its default.",
-			Value:       map[string]any{"config": channelConfig("slack", slackChannelSpec())},
-		},
-		{
-			Name:        "switch_to_pagerduty",
-			Summary:     "Change the kind to PagerDuty",
-			Description: "The kind may change on update, replacing the channel's notifier configuration while its name and references stay.",
-			Value:       map[string]any{"config": channelConfig("pagerduty", pagerdutyChannelSpec())},
-		},
-	}
-}
-
-// testNotificationChannelExamples sends one test notification; the body is a
-// configuration only because nothing is persisted.
-func testNotificationChannelExamples() []handler.OpenAPIExample {
-	return []handler.OpenAPIExample{
-		{
-			Name:    "slack",
-			Summary: "Test a Slack webhook",
-			Value:   map[string]any{"config": channelConfig("slack", slackChannelSpec())},
-		},
-		{
-			Name:    "webhook",
-			Summary: "Test a webhook endpoint",
-			Value:   map[string]any{"config": channelConfig("webhook", webhookChannelSpec())},
-		},
-	}
-}

pkg/apiserver/signozapiserver/alertmanager_examples_test.go

@@ -1,39 +0,0 @@
-package signozapiserver
-
-import (
-	"encoding/json"
-	"testing"
-
-	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
-	"github.com/stretchr/testify/require"
-)
-
-func TestNotificationChannelExamplesAreValidPayloads(t *testing.T) {
-	for _, ex := range createNotificationChannelExamples() {
-		t.Run("create/"+ex.Name, func(t *testing.T) {
-			raw, err := json.Marshal(ex.Value)
-			require.NoError(t, err)
-			var postable alertmanagertypes.PostableNotificationChannel
-			require.NoError(t, json.Unmarshal(raw, &postable))
-			require.NoError(t, postable.Validate())
-		})
-	}
-	for _, ex := range updateNotificationChannelExamples() {
-		t.Run("update/"+ex.Name, func(t *testing.T) {
-			raw, err := json.Marshal(ex.Value)
-			require.NoError(t, err)
-			var updatable alertmanagertypes.UpdatableNotificationChannel
-			require.NoError(t, json.Unmarshal(raw, &updatable))
-			require.NoError(t, updatable.Validate())
-		})
-	}
-	for _, ex := range testNotificationChannelExamples() {
-		t.Run("test/"+ex.Name, func(t *testing.T) {
-			raw, err := json.Marshal(ex.Value)
-			require.NoError(t, err)
-			var testable alertmanagertypes.TestableNotificationChannel
-			require.NoError(t, json.Unmarshal(raw, &testable))
-			require.NoError(t, testable.Validate())
-		})
-	}
-}

pkg/apiserver/signozapiserver/dashboard.go

@@ -77,7 +77,6 @@ func (provider *provider) addDashboardRoutes(router *mux.Router) error {
 			Description:         "This endpoint creates a dashboard in the v2 format that follows Perses spec.",
 			Request:             new(dashboardtypes.PostableDashboardV2),
 			RequestContentType:  "application/json",
-			RequestExamples:     createDashboardExamples(),
 			Response:            new(dashboardtypes.GettableDashboardV2),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusCreated,
@@ -201,7 +200,6 @@ func (provider *provider) addDashboardRoutes(router *mux.Router) error {
 			Description:         "This endpoint updates a v2-shape dashboard's metadata, data, and tag set. Locked dashboards are rejected.",
 			Request:             new(dashboardtypes.UpdatableDashboardV2),
 			RequestContentType:  "application/json",
-			RequestExamples:     updateDashboardExamples(),
 			Response:            new(dashboardtypes.GettableDashboardV2),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,
@@ -235,7 +233,6 @@ func (provider *provider) addDashboardRoutes(router *mux.Router) error {
 			// the array-of-ops schema visible to spec consumers; the runtime decoder
 			// parses JSON regardless of the request's actual Content-Type header.
 			RequestContentType:  "application/json",
-			RequestExamples:     patchDashboardExamples(),
 			Response:            new(dashboardtypes.GettableDashboardV2),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,

pkg/apiserver/signozapiserver/dashboard_examples.go

@@ -1,268 +0,0 @@
-package signozapiserver
-
-import "github.com/SigNoz/signoz/pkg/http/handler"
-
-// gridItem places a panel on the 12-column grid of a Grid layout.
-func gridItem(panelID string, x, y, width, height int) map[string]any {
-	return map[string]any{
-		"x": x, "y": y, "width": width, "height": height,
-		"content": map[string]any{"$ref": "#/spec/panels/" + panelID},
-	}
-}
-
-func gridLayout(items ...map[string]any) map[string]any {
-	list := make([]any, 0, len(items))
-	for _, item := range items {
-		list = append(list, item)
-	}
-	return map[string]any{"kind": "Grid", "spec": map[string]any{"items": list}}
-}
-
-// builderQuery wraps a builder query spec in the panel query envelope.
-// requestType is the result shape the panel renders: time_series, scalar or raw.
-func builderQuery(requestType string, spec map[string]any) map[string]any {
-	return map[string]any{
-		"kind": requestType,
-		"spec": map[string]any{
-			"name":   spec["name"],
-			"plugin": map[string]any{"kind": "signoz/BuilderQuery", "spec": spec},
-		},
-	}
-}
-
-func panel(name, description string, plugin map[string]any, queries ...map[string]any) map[string]any {
-	list := make([]any, 0, len(queries))
-	for _, q := range queries {
-		list = append(list, q)
-	}
-	return map[string]any{
-		"kind": "Panel",
-		"spec": map[string]any{
-			"display": map[string]any{"name": name, "description": description},
-			"links":   []any{},
-			"plugin":  plugin,
-			"queries": list,
-		},
-	}
-}
-
-func serviceNameGroupBy() []any {
-	return []any{map[string]any{"name": "service.name", "fieldContext": "resource", "fieldDataType": "string"}}
-}
-
-// createDashboardExamples returns example payloads for the dashboard create
-// endpoint. They cover a variable-driven service overview and a logs dashboard
-// that pairs a query-less text panel with a table.
-func createDashboardExamples() []handler.OpenAPIExample {
-	return []handler.OpenAPIExample{
-		{
-			Name:        "service_overview",
-			Summary:     "Service overview with a variable, a time series panel and a number panel",
-			Description: "A `$service` list variable fed by the observed `service.name` values filters both panels. The time series panel counts spans per service; the number panel renders a single scalar and turns red above 100 errors. `generateName` lets the server derive the name from the display name.",
-			Value: map[string]any{
-				"schemaVersion": "v6",
-				"generateName":  true,
-				"tags":          []any{map[string]any{"key": "team", "value": "platform"}},
-				"spec": map[string]any{
-					"display": map[string]any{"name": "Service Overview", "description": "Request rate and errors per service"},
-					"variables": []any{
-						map[string]any{
-							"kind": "ListVariable",
-							"spec": map[string]any{
-								"name":          "service",
-								"display":       map[string]any{"name": "Service"},
-								"allowMultiple": true,
-								"allowAllValue": true,
-								"sort":          "alphabetical-asc",
-								"plugin": map[string]any{
-									"kind": "signoz/DynamicVariable",
-									"spec": map[string]any{"name": "service.name", "signal": "traces"},
-								},
-							},
-						},
-					},
-					"panels": map[string]any{
-						"request-rate": panel("Requests", "Spans per service",
-							map[string]any{
-								"kind": "signoz/TimeSeriesPanel",
-								"spec": map[string]any{
-									"formatting": map[string]any{"decimalPrecision": "0"},
-									"legend":     map[string]any{"position": "bottom"},
-								},
-							},
-							builderQuery("time_series", map[string]any{
-								"name":         "A",
-								"signal":       "traces",
-								"aggregations": []any{map[string]any{"expression": "count()", "alias": "requests"}},
-								"filter":       map[string]any{"expression": "service.name IN $service"},
-								"groupBy":      serviceNameGroupBy(),
-								"legend":       "{{service.name}}",
-							}),
-						),
-						"error-count": panel("Errors", "Spans with an error status",
-							map[string]any{
-								"kind": "signoz/NumberPanel",
-								"spec": map[string]any{
-									"thresholds": []any{
-										map[string]any{"value": 100, "operator": "above", "color": "#F1575F", "format": "background"},
-									},
-								},
-							},
-							builderQuery("scalar", map[string]any{
-								"name":         "A",
-								"signal":       "traces",
-								"aggregations": []any{map[string]any{"expression": "count()", "alias": "errors"}},
-								"filter":       map[string]any{"expression": "has_error = true AND service.name IN $service"},
-							}),
-						),
-					},
-					"layouts": []any{gridLayout(
-						gridItem("request-rate", 0, 0, 8, 6),
-						gridItem("error-count", 8, 0, 4, 6),
-					)},
-					"duration": "1h",
-					"links":    []any{},
-				},
-			},
-		},
-		{
-			Name:        "logs_table_with_runbook",
-			Summary:     "Logs dashboard with a text panel and a table panel",
-			Description: "A `signoz/TextPanel` renders markdown and must send `queries: []`. The table counts error logs per service as a scalar result, orders by the `errors` alias and colors cells above 1000 errors; the threshold names the column by its key `A` (the query name), not by the alias.",
-			Value: map[string]any{
-				"schemaVersion": "v6",
-				"name":          "error-logs-by-service",
-				"tags":          []any{},
-				"spec": map[string]any{
-					"display":   map[string]any{"name": "Error Logs by Service", "description": ""},
-					"variables": []any{},
-					"panels": map[string]any{
-						"runbook": panel("Runbook", "What to do when errors spike",
-							map[string]any{
-								"kind": "signoz/TextPanel",
-								"spec": map[string]any{
-									"mode":          "markdown",
-									"text":          "## Error logs\n\n1. Find the service with the most errors in the table.\n2. Open its logs and group by `code.function`.",
-									"presentation":  map[string]any{"textAlign": "left", "verticalAlign": "top"},
-									"headerOptions": map[string]any{"hide": false},
-								},
-							},
-						),
-						"errors-by-service": panel("Error logs per service", "",
-							map[string]any{
-								"kind": "signoz/TablePanel",
-								"spec": map[string]any{
-									"formatting": map[string]any{"decimalPrecision": "0"},
-									"thresholds": []any{
-										map[string]any{"columnName": "A", "value": 1000, "operator": "above", "color": "#F1575F", "format": "background"},
-									},
-								},
-							},
-							builderQuery("scalar", map[string]any{
-								"name":         "A",
-								"signal":       "logs",
-								"aggregations": []any{map[string]any{"expression": "count()", "alias": "errors"}},
-								"filter":       map[string]any{"expression": "severity_text = 'ERROR'"},
-								"groupBy":      serviceNameGroupBy(),
-								"order":        []any{map[string]any{"key": map[string]any{"name": "errors"}, "direction": "desc"}},
-								"limit":        20,
-							}),
-						),
-					},
-					"layouts": []any{gridLayout(
-						gridItem("runbook", 0, 0, 4, 6),
-						gridItem("errors-by-service", 4, 0, 8, 6),
-					)},
-					"links": []any{},
-				},
-			},
-		},
-	}
-}
-
-// updateDashboardExamples returns the example payload for the dashboard update
-// endpoint: the full replacement shape, including the immutable name.
-func updateDashboardExamples() []handler.OpenAPIExample {
-	return []handler.OpenAPIExample{
-		{
-			Name:        "replace_dashboard",
-			Summary:     "Replace a dashboard with a single CPU time series panel",
-			Description: "Update is a full replacement: every field is written as sent, so fetch the dashboard first and resend the unchanged parts. `name` must equal the dashboard's current name.",
-			Value: map[string]any{
-				"schemaVersion": "v6",
-				"name":          "host-cpu",
-				"tags":          []any{map[string]any{"key": "team", "value": "infra"}},
-				"spec": map[string]any{
-					"display":   map[string]any{"name": "Host CPU", "description": "CPU time by state"},
-					"variables": []any{},
-					"panels": map[string]any{
-						"cpu-time": panel("CPU time", "Rate of system.cpu.time by state",
-							map[string]any{
-								"kind": "signoz/TimeSeriesPanel",
-								"spec": map[string]any{
-									"chartAppearance": map[string]any{"fillMode": "gradient"},
-									"legend":          map[string]any{"position": "right"},
-								},
-							},
-							builderQuery("time_series", map[string]any{
-								"name":   "A",
-								"signal": "metrics",
-								"aggregations": []any{map[string]any{
-									"metricName":       "system.cpu.time",
-									"timeAggregation":  "rate",
-									"spaceAggregation": "sum",
-								}},
-								"groupBy": []any{map[string]any{"name": "state", "fieldContext": "attribute", "fieldDataType": "string"}},
-								"legend":  "{{state}}",
-							}),
-						),
-					},
-					"layouts":         []any{gridLayout(gridItem("cpu-time", 0, 0, 12, 7))},
-					"duration":        "3h",
-					"refreshInterval": "30s",
-					"links":           []any{},
-				},
-			},
-		},
-	}
-}
-
-// patchDashboardExamples returns example payloads for the dashboard patch
-// endpoint. The request body is the RFC 6902 operation array itself.
-func patchDashboardExamples() []handler.OpenAPIExample {
-	return []handler.OpenAPIExample{
-		{
-			Name:        "rename",
-			Summary:     "Rename a dashboard",
-			Description: "Replaces the display name without resending anything else.",
-			Value: []any{
-				map[string]any{"op": "replace", "path": "/spec/display/name", "value": "Service Overview (production)"},
-			},
-		},
-		{
-			Name:        "add_panel",
-			Summary:     "Add a panel and place it",
-			Description: "Adding a panel takes two operations: one adds the panel under `/spec/panels/<id>`, the other appends a grid item that references it to the first layout. A panel that no layout places is accepted but not shown.",
-			Value: []any{
-				map[string]any{
-					"op":   "add",
-					"path": "/spec/panels/error-rate",
-					"value": panel("Error count", "Errored spans per time bucket",
-						map[string]any{"kind": "signoz/TimeSeriesPanel", "spec": map[string]any{}},
-						builderQuery("time_series", map[string]any{
-							"name":         "A",
-							"signal":       "traces",
-							"aggregations": []any{map[string]any{"expression": "count()"}},
-							"filter":       map[string]any{"expression": "has_error = true"},
-						}),
-					),
-				},
-				map[string]any{
-					"op":    "add",
-					"path":  "/spec/layouts/0/spec/items/-",
-					"value": gridItem("error-rate", 0, 7, 12, 6),
-				},
-			},
-		},
-	}
-}

pkg/apiserver/signozapiserver/dashboard_examples_test.go

@@ -1,49 +0,0 @@
-package signozapiserver
-
-import (
-	"encoding/json"
-	"testing"
-
-	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/stretchr/testify/require"
-)
-
-func TestDashboardExamplesAreValidPayloads(t *testing.T) {
-	for _, ex := range createDashboardExamples() {
-		t.Run("create/"+ex.Name, func(t *testing.T) {
-			raw, err := json.Marshal(ex.Value)
-			require.NoError(t, err)
-			var postable dashboardtypes.PostableDashboardV2
-			require.NoError(t, json.Unmarshal(raw, &postable))
-		})
-	}
-
-	var base dashboardtypes.UpdatableDashboardV2
-	for _, ex := range updateDashboardExamples() {
-		t.Run("update/"+ex.Name, func(t *testing.T) {
-			raw, err := json.Marshal(ex.Value)
-			require.NoError(t, err)
-			require.NoError(t, json.Unmarshal(raw, &base))
-		})
-	}
-
-	existing := &dashboardtypes.DashboardV2{
-		Identifiable:            types.Identifiable{ID: valuer.GenerateUUID()},
-		Source:                  dashboardtypes.SourceUser,
-		DashboardV2MetadataBase: base.DashboardV2MetadataBase,
-		Name:                    base.Name,
-		Spec:                    base.Spec,
-	}
-	for _, ex := range patchDashboardExamples() {
-		t.Run("patch/"+ex.Name, func(t *testing.T) {
-			raw, err := json.Marshal(ex.Value)
-			require.NoError(t, err)
-			var patch dashboardtypes.PatchableDashboardV2
-			require.NoError(t, json.Unmarshal(raw, &patch))
-			_, err = patch.Apply(existing)
-			require.NoError(t, err)
-		})
-	}
-}

pkg/apiserver/signozapiserver/metricsexplorer.go

@@ -70,7 +70,6 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 			Description:         "This endpoint returns a treemap visualization showing the proportional distribution of metrics by sample count or time series count",
 			Request:             new(metricsexplorertypes.TreemapRequest),
 			RequestContentType:  "application/json",
-			RequestExamples:     treemapRequestExamples(),
 			Response:            new(metricsexplorertypes.TreemapResponse),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,

pkg/apiserver/signozapiserver/metricsexplorer_examples.go

@@ -1,33 +0,0 @@
-package signozapiserver
-
-import "github.com/SigNoz/signoz/pkg/http/handler"
-
-// treemapRequestExamples returns example payloads for the metrics treemap
-// endpoint, one per mode.
-func treemapRequestExamples() []handler.OpenAPIExample {
-	return []handler.OpenAPIExample{
-		{
-			Name:        "treemap_timeseries",
-			Summary:     "Top metrics by time series count",
-			Description: "Sizes each metric by the number of distinct time series it produced in the time range, limited to the 50 largest. Only the `timeseries` array of the response is populated.",
-			Value: map[string]any{
-				"start": 1640995200000,
-				"end":   1640998800000,
-				"limit": 50,
-				"mode":  "timeseries",
-			},
-		},
-		{
-			Name:        "treemap_samples_filtered",
-			Summary:     "Top metrics by sample count for one host",
-			Description: "Sizes each metric by the number of samples ingested, restricted with a query builder filter on a metric attribute. Only the `samples` array of the response is populated.",
-			Value: map[string]any{
-				"start":  1640995200000,
-				"end":    1640998800000,
-				"limit":  20,
-				"mode":   "samples",
-				"filter": map[string]any{"expression": "host.name = 'web-1'"},
-			},
-		},
-	}
-}

pkg/apiserver/signozapiserver/metricsexplorer_examples_test.go

@@ -1,21 +0,0 @@
-package signozapiserver
-
-import (
-	"encoding/json"
-	"testing"
-
-	"github.com/SigNoz/signoz/pkg/types/metricsexplorertypes"
-	"github.com/stretchr/testify/require"
-)
-
-func TestTreemapExamplesAreValidPayloads(t *testing.T) {
-	for _, ex := range treemapRequestExamples() {
-		t.Run(ex.Name, func(t *testing.T) {
-			raw, err := json.Marshal(ex.Value)
-			require.NoError(t, err)
-			var req metricsexplorertypes.TreemapRequest
-			require.NoError(t, json.Unmarshal(raw, &req))
-			require.NoError(t, req.Validate())
-		})
-	}
-}

pkg/apiserver/signozapiserver/savedview.go

@@ -48,7 +48,6 @@ func (provider *provider) addSavedViewRoutes(router *mux.Router) error {
 			Description:         "Persists a saved view for the explore page. Returns the id of the created view.",
 			Request:             new(savedviewtypes.PostableSavedView),
 			RequestContentType:  "application/json",
-			RequestExamples:     postableSavedViewExamples(),
 			Response:            new(types.Identifiable),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusCreated,
@@ -103,7 +102,6 @@ func (provider *provider) addSavedViewRoutes(router *mux.Router) error {
 			Description:         "Replaces a saved view's name and query.",
 			Request:             new(savedviewtypes.UpdatableSavedView),
 			RequestContentType:  "application/json",
-			RequestExamples:     updatableSavedViewExamples(),
 			Response:            nil,
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusNoContent,

pkg/apiserver/signozapiserver/savedview_examples.go

@@ -1,176 +0,0 @@
-package signozapiserver
-
-import "github.com/SigNoz/signoz/pkg/http/handler"
-
-// postableSavedViewExamples returns example payloads attached to the saved view
-// create endpoint. They cover each explorer source and both list and graph panels.
-func postableSavedViewExamples() []handler.OpenAPIExample {
-	return []handler.OpenAPIExample{
-		{
-			Name:        "traces_list",
-			Summary:     "Traces list view with filter and columns",
-			Description: "A list panel over spans slower than 500ms in one service, ordered newest first, with three explorer columns.",
-			Value: map[string]any{
-				"name":          "slow-checkout-traces",
-				"source":        "traces",
-				"schemaVersion": "v2",
-				"spec": map[string]any{
-					"displayName": "Slow checkout traces",
-					"panelType":   "list",
-					"requestType": "raw",
-					"queries": []any{
-						map[string]any{
-							"type": "builder_query",
-							"spec": map[string]any{
-								"name":   "A",
-								"signal": "traces",
-								"filter": map[string]any{"expression": "service.name = 'checkoutservice' AND duration_nano > 500000000"},
-								"order":  []any{map[string]any{"key": map[string]any{"name": "timestamp"}, "direction": "desc"}},
-								"limit":  100,
-							},
-						},
-					},
-					"selectedFields": []any{
-						map[string]any{"name": "service.name", "signal": "traces", "fieldContext": "resource", "fieldDataType": "string"},
-						map[string]any{"name": "name", "signal": "traces", "fieldContext": "span", "fieldDataType": "string"},
-						map[string]any{"name": "duration_nano", "signal": "traces", "fieldContext": "span", "fieldDataType": "float64"},
-					},
-				},
-			},
-		},
-		{
-			Name:        "logs_list_generated_name",
-			Summary:     "Logs list view with a generated name",
-			Description: "A list panel over error logs of one service. generateName lets the server derive the machine name from displayName; the display preferences set the row format and font size.",
-			Value: map[string]any{
-				"generateName":  true,
-				"source":        "logs",
-				"schemaVersion": "v2",
-				"spec": map[string]any{
-					"displayName": "Payment errors",
-					"panelType":   "list",
-					"requestType": "raw",
-					"queries": []any{
-						map[string]any{
-							"type": "builder_query",
-							"spec": map[string]any{
-								"name":   "A",
-								"signal": "logs",
-								"filter": map[string]any{"expression": "service.name = 'paymentservice' AND severity_text = 'ERROR'"},
-								"order": []any{
-									map[string]any{"key": map[string]any{"name": "timestamp"}, "direction": "desc"},
-									map[string]any{"key": map[string]any{"name": "id"}, "direction": "desc"},
-								},
-								"limit": 100,
-							},
-						},
-					},
-					"selectedFields": []any{
-						map[string]any{"name": "service.name", "signal": "logs", "fieldContext": "resource", "fieldDataType": "string"},
-						map[string]any{"name": "severity_text", "signal": "logs", "fieldContext": "log", "fieldDataType": "string"},
-					},
-					"display": map[string]any{
-						"format":   "list",
-						"fontSize": "small",
-						"maxLines": 2,
-					},
-				},
-			},
-		},
-		{
-			Name:        "metrics_time_series",
-			Summary:     "Metrics graph view",
-			Description: "A graph panel plotting the per-second request rate of a counter, summed across series at one minute resolution.",
-			Value: map[string]any{
-				"name":          "http-request-rate",
-				"source":        "metrics",
-				"schemaVersion": "v2",
-				"spec": map[string]any{
-					"displayName": "HTTP request rate",
-					"panelType":   "graph",
-					"requestType": "time_series",
-					"queries": []any{
-						map[string]any{
-							"type": "builder_query",
-							"spec": map[string]any{
-								"name":         "A",
-								"signal":       "metrics",
-								"stepInterval": 60,
-								"aggregations": []any{map[string]any{"metricName": "http_requests_total", "timeAggregation": "rate", "spaceAggregation": "sum"}},
-								"groupBy":      []any{map[string]any{"name": "service.name", "fieldContext": "resource", "fieldDataType": "string"}},
-							},
-						},
-					},
-					"selectedFields": []any{},
-				},
-			},
-		},
-		{
-			Name:        "meter_time_series",
-			Summary:     "Cost meter graph view",
-			Description: "A graph panel on the meter explorer. Meter views are queried as metrics with the builder spec source set to meter; the meter rolls up hourly, so the step is 3600 seconds.",
-			Value: map[string]any{
-				"name":          "log-ingestion-volume",
-				"source":        "meter",
-				"schemaVersion": "v2",
-				"spec": map[string]any{
-					"displayName": "Log ingestion volume",
-					"panelType":   "graph",
-					"requestType": "time_series",
-					"queries": []any{
-						map[string]any{
-							"type": "builder_query",
-							"spec": map[string]any{
-								"name":         "A",
-								"signal":       "metrics",
-								"source":       "meter",
-								"stepInterval": 3600,
-								"aggregations": []any{map[string]any{"metricName": "signoz.meter.log.size", "timeAggregation": "increase", "spaceAggregation": "sum"}},
-							},
-						},
-					},
-					"selectedFields": []any{},
-				},
-			},
-		},
-	}
-}
-
-// updatableSavedViewExamples returns example payloads attached to the saved view
-// update endpoint. The update replaces the whole spec; the machine name is immutable.
-func updatableSavedViewExamples() []handler.OpenAPIExample {
-	return []handler.OpenAPIExample{
-		{
-			Name:        "traces_list_widen_filter",
-			Summary:     "Replace a traces list view",
-			Description: "Replaces the spec of an existing traces list view with a wider latency filter and one more column. Every field of spec must be sent again; the machine name stays as created.",
-			Value: map[string]any{
-				"source":        "traces",
-				"schemaVersion": "v2",
-				"spec": map[string]any{
-					"displayName": "Slow checkout traces (over 250ms)",
-					"panelType":   "list",
-					"requestType": "raw",
-					"queries": []any{
-						map[string]any{
-							"type": "builder_query",
-							"spec": map[string]any{
-								"name":   "A",
-								"signal": "traces",
-								"filter": map[string]any{"expression": "service.name = 'checkoutservice' AND duration_nano > 250000000"},
-								"order":  []any{map[string]any{"key": map[string]any{"name": "timestamp"}, "direction": "desc"}},
-								"limit":  100,
-							},
-						},
-					},
-					"selectedFields": []any{
-						map[string]any{"name": "service.name", "signal": "traces", "fieldContext": "resource", "fieldDataType": "string"},
-						map[string]any{"name": "name", "signal": "traces", "fieldContext": "span", "fieldDataType": "string"},
-						map[string]any{"name": "duration_nano", "signal": "traces", "fieldContext": "span", "fieldDataType": "float64"},
-						map[string]any{"name": "http.status_code", "signal": "traces", "fieldContext": "attribute", "fieldDataType": "string"},
-					},
-				},
-			},
-		},
-	}
-}

pkg/apiserver/signozapiserver/savedview_examples_test.go

@@ -1,30 +0,0 @@
-package signozapiserver
-
-import (
-	"encoding/json"
-	"testing"
-
-	"github.com/SigNoz/signoz/pkg/types/savedviewtypes"
-	"github.com/stretchr/testify/require"
-)
-
-func TestSavedViewExamplesAreValidPayloads(t *testing.T) {
-	for _, ex := range postableSavedViewExamples() {
-		t.Run("create/"+ex.Name, func(t *testing.T) {
-			raw, err := json.Marshal(ex.Value)
-			require.NoError(t, err)
-			var postable savedviewtypes.PostableSavedView
-			require.NoError(t, json.Unmarshal(raw, &postable))
-			require.NoError(t, postable.Validate())
-		})
-	}
-	for _, ex := range updatableSavedViewExamples() {
-		t.Run("update/"+ex.Name, func(t *testing.T) {
-			raw, err := json.Marshal(ex.Value)
-			require.NoError(t, err)
-			var updatable savedviewtypes.UpdatableSavedView
-			require.NoError(t, json.Unmarshal(raw, &updatable))
-			require.NoError(t, updatable.Validate())
-		})
-	}
-}

pkg/modules/tracedetail/impltracedetail/handler.go

@@ -37,12 +37,6 @@ func (h *handler) GetTraceSummary(rw http.ResponseWriter, r *http.Request) {
 }
 
 func (h *handler) GetWaterfallV4(rw http.ResponseWriter, r *http.Request) {
-	claims, err := authtypes.ClaimsFromContext(r.Context())
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
 	req := new(spantypes.PostableWaterfall)
 	if err := binding.JSON.BindBody(r.Body, req); err != nil {
 		render.Error(rw, err)
@@ -54,7 +48,7 @@ func (h *handler) GetWaterfallV4(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	result, err := h.module.GetWaterfallV4(r.Context(), valuer.MustNewUUID(claims.OrgID), mux.Vars(r)["traceID"], req.SelectedSpanID, req.UncollapsedSpans)
+	result, err := h.module.GetWaterfallV4(r.Context(), mux.Vars(r)["traceID"], req.SelectedSpanID, req.UncollapsedSpans)
 	if err != nil {
 		render.Error(rw, err)
 		return

pkg/modules/tracedetail/impltracedetail/module.go

@@ -64,7 +64,7 @@ func (m *module) GetTraceSummary(ctx context.Context, orgID valuer.UUID, traceID
 // For large traces (NumSpans > effectiveLimit) it uses a two-step fetch:
 // minimal fields for all spans to build the tree, then full fields for the
 // visible window only. Aggregations are not returned.
-func (m *module) GetWaterfallV4(ctx context.Context, orgID valuer.UUID, traceID string, selectedSpanID string, uncollapsedSpans []string) (*spantypes.GettableWaterfallTrace, error) {
+func (m *module) GetWaterfallV4(ctx context.Context, traceID string, selectedSpanID string, uncollapsedSpans []string) (*spantypes.GettableWaterfallTrace, error) {
 	bounds, err := m.store.GetTraceBounds(ctx, traceID)
 	if err != nil {
 		return nil, err
@@ -78,9 +78,9 @@ func (m *module) GetWaterfallV4(ctx context.Context, orgID valuer.UUID, traceID
 
 	var trace *spantypes.GettableWaterfallTrace
 	if windowed {
-		trace, err = m.getWindowedWaterfall(ctx, orgID, traceID, selectedSpanID, uncollapsedSpans, bounds.Start, bounds.End)
+		trace, err = m.getWindowedWaterfall(ctx, traceID, selectedSpanID, uncollapsedSpans, bounds.Start, bounds.End)
 	} else {
-		trace, err = m.getFullWaterfall(ctx, orgID, traceID, bounds)
+		trace, err = m.getFullWaterfall(ctx, traceID, bounds)
 	}
 	if err != nil {
 		return nil, err
@@ -91,8 +91,8 @@ func (m *module) GetWaterfallV4(ctx context.Context, orgID valuer.UUID, traceID
 	return trace, nil
 }
 
-func (m *module) getFullWaterfall(ctx context.Context, orgID valuer.UUID, traceID string, bounds *spantypes.TraceBounds) (*spantypes.GettableWaterfallTrace, error) {
-	spanItems, err := m.store.GetTraceSpans(ctx, orgID, traceID, bounds)
+func (m *module) getFullWaterfall(ctx context.Context, traceID string, bounds *spantypes.TraceBounds) (*spantypes.GettableWaterfallTrace, error) {
+	spanItems, err := m.store.GetTraceSpans(ctx, traceID, bounds)
 	if err != nil {
 		return nil, err
 	}
@@ -167,7 +167,7 @@ func (m *module) GetFlamegraph(ctx context.Context, traceID string, selectedSpan
 }
 
 // getWindowedWaterfall builds the waterfall tree with minimal data and then returns only a window of full spans.
-func (m *module) getWindowedWaterfall(ctx context.Context, orgID valuer.UUID, traceID, selectedSpanID string, uncollapsedSpans []string, start, end time.Time) (*spantypes.GettableWaterfallTrace, error) {
+func (m *module) getWindowedWaterfall(ctx context.Context, traceID, selectedSpanID string, uncollapsedSpans []string, start, end time.Time) (*spantypes.GettableWaterfallTrace, error) {
 	// Step 1: minimal fetch → build full tree → select visible window
 	minimalSpans, err := m.store.GetMinimalSpans(ctx, traceID, start, end)
 	if err != nil {
@@ -195,7 +195,7 @@ func (m *module) getWindowedWaterfall(ctx context.Context, orgID valuer.UUID, tr
 	for i, s := range selectedSpans {
 		spanIDs[i] = s.SpanID
 	}
-	fullSpans, err := m.store.GetTraceSpansByIDs(ctx, orgID, traceID, start, end, spanIDs)
+	fullSpans, err := m.store.GetTraceSpansByIDs(ctx, traceID, start, end, spanIDs)
 	if err != nil {
 		return nil, err
 	}

pkg/modules/tracedetail/impltracedetail/store.go

@@ -16,7 +16,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/telemetryschema/tracestelemetryschema"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/aiobservabilitytypes"
-	"github.com/SigNoz/signoz/pkg/types/featuretypes"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/spantypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
@@ -25,11 +24,14 @@ import (
 
 const colServiceName = `resource_string_service$$$$name` // $ gets escaped so $$$$ converts to $$.
 
-// storableSpanColumns are the columns a waterfall span scans; the JSON attributes column is added per flag.
+// storableSpanColumns are the columns a waterfall span scans. A row's legacy maps are blanked when its
+// JSON holds the attributes.
 var storableSpanColumns = []string{
 	"DISTINCT ON (span_id) timestamp", "duration_nano", "span_id", "has_error", "kind",
-	colServiceName, "name",
-	"attributes_string", "attributes_number", "attributes_bool", "resources_string",
+	colServiceName, "name", "attributes", "resources_string", "scope",
+	"if(notEmpty(attributes), map(), attributes_string) AS attributes_string",
+	"if(notEmpty(attributes), map(), attributes_number) AS attributes_number",
+	"if(notEmpty(attributes), map(), attributes_bool) AS attributes_bool",
 	"events", "status_message", "status_code_string", "kind_string", "parent_span_id",
 	"flags", "is_remote", "trace_state", "status_code",
 	"db_name", "db_operation", "http_method", "http_url", "http_host",
@@ -207,8 +209,8 @@ func (s *traceStore) genAISpanColumns(ctx context.Context, orgID valuer.UUID, bo
 	return columns, nil
 }
 
-func (s *traceStore) GetTraceSpans(ctx context.Context, orgID valuer.UUID, traceID string, bounds *spantypes.TraceBounds) ([]spantypes.StorableSpan, error) {
-	sb := s.selectStorableSpans(ctx, orgID)
+func (s *traceStore) GetTraceSpans(ctx context.Context, traceID string, bounds *spantypes.TraceBounds) ([]spantypes.StorableSpan, error) {
+	sb := selectStorableSpans()
 	sb.Where(
 		sb.E("trace_id", traceID),
 		sb.GE("ts_bucket_start", bounds.Start.Unix()-1800),
@@ -249,11 +251,11 @@ func (s *traceStore) GetMinimalSpans(ctx context.Context, traceID string, start,
 	return spans, nil
 }
 
-func (s *traceStore) GetTraceSpansByIDs(ctx context.Context, orgID valuer.UUID, traceID string, start, end time.Time, spanIDs []string) ([]spantypes.StorableSpan, error) {
+func (s *traceStore) GetTraceSpansByIDs(ctx context.Context, traceID string, start, end time.Time, spanIDs []string) ([]spantypes.StorableSpan, error) {
 	if len(spanIDs) == 0 {
 		return []spantypes.StorableSpan{}, nil
 	}
-	sb := s.selectStorableSpans(ctx, orgID)
+	sb := selectStorableSpans()
 	ids := make([]any, len(spanIDs))
 	for i, id := range spanIDs {
 		ids[i] = id
@@ -275,14 +277,10 @@ func (s *traceStore) GetTraceSpansByIDs(ctx context.Context, orgID valuer.UUID,
 	return spans, nil
 }
 
-// selectStorableSpans reads the JSON attributes column alongside the legacy maps when the
-// use_trace_attributes_json flag is on, as the query builder does.
-func (s *traceStore) selectStorableSpans(ctx context.Context, orgID valuer.UUID) *sqlbuilder.SelectBuilder {
+// selectStorableSpans reads the JSON attributes column alongside the legacy maps.
+func selectStorableSpans() *sqlbuilder.SelectBuilder {
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select(storableSpanColumns...)
-	if s.flagger.BooleanOrEmpty(ctx, flagger.FeatureUseTraceAttributesJSON, featuretypes.NewFlaggerEvaluationContext(orgID)) {
-		sb.SelectMore("attributes")
-	}
 	sb.From(fmt.Sprintf("%s.%s", spantypes.TraceDB, spantypes.TraceTable))
 	return sb
 }
@@ -293,12 +291,9 @@ func (s *traceStore) GetThreadSpans(ctx context.Context, orgID valuer.UUID, trac
 	sb.Select(
 		"DISTINCT ON (span_id) timestamp", "duration_nano", "span_id", "parent_span_id", "has_error", "name", "kind_string",
 		"status_code_string", "status_message", "resources_string",
-		"attributes_string", "attributes_number", "attributes_bool",
+		"attributes", "attributes_string", "attributes_number", "attributes_bool",
 		"events", "links as references",
 	)
-	if q.TraceAttrsJSONOn {
-		sb.SelectMore("attributes")
-	}
 	sb.From(fmt.Sprintf("%s.%s", spantypes.TraceDB, spantypes.TraceTable))
 	keys, err := s.genAIFieldKeys(ctx, orgID, aiobservabilitytypes.GenAISpanGateKeys)
 	if err != nil {
@@ -382,10 +377,12 @@ func (s *traceStore) GetFlamegraphSpans(ctx context.Context, traceID string, sta
 		"any(has_error) AS has_error",
 		"any(name) AS name",
 		"any(events) AS events",
-		"any(attributes_string) AS attributes_string",
-		"any(attributes_number) AS attributes_number",
-		"any(attributes_bool) AS attributes_bool",
+		"any(attributes) AS attributes",
+		"if(notEmpty(attributes), map(), any(attributes_string)) AS attributes_string", // `attributes` below resolves to the aggregated alias
+		"if(notEmpty(attributes), map(), any(attributes_number)) AS attributes_number",
+		"if(notEmpty(attributes), map(), any(attributes_bool)) AS attributes_bool",
 		"any(resources_string) AS resources_string",
+		"any(scope) AS scope",
 	)
 	sb.From(fmt.Sprintf("%s.%s", spantypes.TraceDB, spantypes.TraceTable))
 	conditions := []string{

pkg/modules/tracedetail/impltracedetail/store_test.go

@@ -153,25 +153,39 @@ func TestGetSpanCountByField(t *testing.T) {
 	}
 }
 
-func TestGetFlamegraphSpans(t *testing.T) {
-	baseSQL := "SELECT span_id, any(parent_span_id) AS parent_span_id, any(timestamp) AS timestamp, any(duration_nano) AS duration_nano, any(has_error) AS has_error, any(name) AS name, any(events) AS events, any(attributes_string) AS attributes_string, any(attributes_number) AS attributes_number, any(attributes_bool) AS attributes_bool, any(resources_string) AS resources_string FROM signoz_traces.distributed_signoz_index_v3 WHERE trace_id = ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? GROUP BY span_id ORDER BY timestamp ASC, name ASC"
-	withSpanIDsSQL := "SELECT span_id, any(parent_span_id) AS parent_span_id, any(timestamp) AS timestamp, any(duration_nano) AS duration_nano, any(has_error) AS has_error, any(name) AS name, any(events) AS events, any(attributes_string) AS attributes_string, any(attributes_number) AS attributes_number, any(attributes_bool) AS attributes_bool, any(resources_string) AS resources_string FROM signoz_traces.distributed_signoz_index_v3 WHERE trace_id = ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? AND span_id IN (?, ?) GROUP BY span_id ORDER BY timestamp ASC, name ASC"
+func TestGetTraceSpans(t *testing.T) {
+	expectedSQL := "SELECT DISTINCT ON (span_id) timestamp, duration_nano, span_id, has_error, kind, resource_string_service$$name, name, attributes, resources_string, scope, if(notEmpty(attributes), map(), attributes_string) AS attributes_string, if(notEmpty(attributes), map(), attributes_number) AS attributes_number, if(notEmpty(attributes), map(), attributes_bool) AS attributes_bool, events, status_message, status_code_string, kind_string, parent_span_id, flags, is_remote, trace_state, status_code, db_name, db_operation, http_method, http_url, http_host, external_http_method, external_http_url, response_status_code, links as references FROM signoz_traces.distributed_signoz_index_v3 WHERE trace_id = ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? ORDER BY timestamp ASC, name ASC"
 
-	tests := []struct {
+	s := newTestStore(sqlmock.QueryMatcherEqual)
+	s.Mock().ExpectSelect(expectedSQL).
+		WillReturnRows(cmock.NewRows(nil, nil))
+	_, _ = s.Store().GetTraceSpans(context.Background(), testTraceID, testBounds)
+	assert.NoError(t, s.Mock().ExpectationsWereMet())
+}
+
+func TestGetFlamegraphSpans(t *testing.T) {
+	testCases := []struct {
 		name    string
 		spanIDs []string
 		sql     string
 	}{
-		{name: "NoSpanIDs_GeneratesBaseSQL", spanIDs: nil, sql: baseSQL},
-		{name: "WithSpanIDs_GeneratesInClauseSQL", spanIDs: []string{"span-1", "span-2"}, sql: withSpanIDsSQL},
+		{
+			name: "NoSpanIDs_GeneratesBaseSQL",
+			sql:  "SELECT span_id, any(parent_span_id) AS parent_span_id, any(timestamp) AS timestamp, any(duration_nano) AS duration_nano, any(has_error) AS has_error, any(name) AS name, any(events) AS events, any(attributes) AS attributes, if(notEmpty(attributes), map(), any(attributes_string)) AS attributes_string, if(notEmpty(attributes), map(), any(attributes_number)) AS attributes_number, if(notEmpty(attributes), map(), any(attributes_bool)) AS attributes_bool, any(resources_string) AS resources_string, any(scope) AS scope FROM signoz_traces.distributed_signoz_index_v3 WHERE trace_id = ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? GROUP BY span_id ORDER BY timestamp ASC, name ASC",
+		},
+		{
+			name:    "WithSpanIDs_GeneratesInClauseSQL",
+			spanIDs: []string{"span-1", "span-2"},
+			sql:     "SELECT span_id, any(parent_span_id) AS parent_span_id, any(timestamp) AS timestamp, any(duration_nano) AS duration_nano, any(has_error) AS has_error, any(name) AS name, any(events) AS events, any(attributes) AS attributes, if(notEmpty(attributes), map(), any(attributes_string)) AS attributes_string, if(notEmpty(attributes), map(), any(attributes_number)) AS attributes_number, if(notEmpty(attributes), map(), any(attributes_bool)) AS attributes_bool, any(resources_string) AS resources_string, any(scope) AS scope FROM signoz_traces.distributed_signoz_index_v3 WHERE trace_id = ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? AND span_id IN (?, ?) GROUP BY span_id ORDER BY timestamp ASC, name ASC",
+		},
 	}
 
-	for _, tc := range tests {
-		t.Run(tc.name, func(t *testing.T) {
-			s := newTestStore(sqlmock.QueryMatcherRegexp)
-			s.Mock().ExpectSelect(regexp.QuoteMeta(tc.sql)).
+	for _, testCase := range testCases {
+		t.Run(testCase.name, func(t *testing.T) {
+			s := newTestStore(sqlmock.QueryMatcherEqual)
+			s.Mock().ExpectSelect(testCase.sql).
 				WillReturnRows(cmock.NewRows(nil, nil))
-			_, _ = s.Store().GetFlamegraphSpans(context.Background(), testTraceID, testStart, testEnd, tc.spanIDs)
+			_, _ = s.Store().GetFlamegraphSpans(context.Background(), testTraceID, testStart, testEnd, testCase.spanIDs)
 			assert.NoError(t, s.Mock().ExpectationsWereMet())
 		})
 	}
@@ -204,7 +218,7 @@ func TestGetSpanDurationByField(t *testing.T) {
 }
 
 func TestGetThreadSpans(t *testing.T) {
-	selectSQL := "SELECT DISTINCT ON (span_id) timestamp, duration_nano, span_id, parent_span_id, has_error, name, kind_string, status_code_string, status_message, resources_string, attributes_string, attributes_number, attributes_bool, events, links as references"
+	selectSQL := "SELECT DISTINCT ON (span_id) timestamp, duration_nano, span_id, parent_span_id, has_error, name, kind_string, status_code_string, status_message, resources_string, attributes, attributes_string, attributes_number, attributes_bool, events, links as references"
 	fromSQL := " FROM signoz_traces.distributed_signoz_index_v3 WHERE trace_id = ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? AND "
 	orderSQL := " ORDER BY timestamp ASC, span_id ASC LIMIT ?"
 	jsonInsideTrace := testStart.Add(500 * time.Second)
@@ -213,20 +227,17 @@ func TestGetThreadSpans(t *testing.T) {
 		name        string
 		jsonOn      bool
 		jsonRelease *time.Time
-		selectSQL   string
 		whereSQL    string
 	}{
 		{
-			name:        "FlagOff_ReadsAndFiltersLegacyMaps",
+			name:        "FlagOff_FiltersLegacyMaps",
 			jsonRelease: &jsonInsideTrace,
-			selectSQL:   selectSQL,
 			whereSQL:    "(mapContains(attributes_string, 'gen_ai.request.model') OR mapContains(attributes_string, 'gen_ai.tool.name') OR mapContains(attributes_string, 'gen_ai.agent.name'))",
 		},
 		{
-			name:        "FlagOn_ReleasedDuringTrace_ReadsJSONFiltersJSONThenMaps",
+			name:        "FlagOn_ReleasedDuringTrace_FiltersJSONThenMaps",
 			jsonOn:      true,
 			jsonRelease: &jsonInsideTrace,
-			selectSQL:   selectSQL + ", attributes",
 			whereSQL:    "(multiIf(attributes.`gen_ai.request.model` IS NOT NULL, attributes.`gen_ai.request.model`::String, mapContains(attributes_string, 'gen_ai.request.model'), attributes_string['gen_ai.request.model'], NULL) IS NOT NULL OR multiIf(attributes.`gen_ai.tool.name` IS NOT NULL, attributes.`gen_ai.tool.name`::String, mapContains(attributes_string, 'gen_ai.tool.name'), attributes_string['gen_ai.tool.name'], NULL) IS NOT NULL OR multiIf(attributes.`gen_ai.agent.name` IS NOT NULL, attributes.`gen_ai.agent.name`::String, mapContains(attributes_string, 'gen_ai.agent.name'), attributes_string['gen_ai.agent.name'], NULL) IS NOT NULL)",
 		},
 	}
@@ -235,7 +246,7 @@ func TestGetThreadSpans(t *testing.T) {
 		t.Run(testCase.name, func(t *testing.T) {
 			fl := flaggertest.WithBooleanFlags(t, map[string]bool{flagger.FeatureUseTraceAttributesJSON.String(): testCase.jsonOn})
 			s := newTestStoreWithMetadata(sqlmock.QueryMatcherRegexp, genAIMetadataStore(testCase.jsonRelease), fl)
-			s.Mock().ExpectSelect(regexp.QuoteMeta(testCase.selectSQL + fromSQL + testCase.whereSQL + orderSQL)).
+			s.Mock().ExpectSelect(regexp.QuoteMeta(selectSQL + fromSQL + testCase.whereSQL + orderSQL)).
 				WillReturnRows(cmock.NewRows(nil, nil))
 			_, _ = s.Store().GetThreadSpans(context.Background(), valuer.GenerateUUID(), testTraceID, testBounds, spantypes.ThreadPage{Limit: 3})
 			assert.NoError(t, s.Mock().ExpectationsWereMet())

pkg/modules/tracedetail/tracedetail.go

@@ -21,7 +21,7 @@ type Handler interface {
 // Module defines the business logic for trace detail operations.
 type Module interface {
 	GetTraceSummary(ctx context.Context, orgID valuer.UUID, traceID string) (*spantypes.TraceStats, error)
-	GetWaterfallV4(ctx context.Context, orgID valuer.UUID, traceID string, selectedSpanID string, uncollapsedSpans []string) (*spantypes.GettableWaterfallTrace, error)
+	GetWaterfallV4(ctx context.Context, traceID string, selectedSpanID string, uncollapsedSpans []string) (*spantypes.GettableWaterfallTrace, error)
 	GetTraceAggregations(ctx context.Context, traceID string, req *spantypes.PostableTraceAggregations) (*spantypes.GettableTraceAggregations, error)
 	GetFlamegraph(ctx context.Context, traceID string, selectedSpanID string, selectFields []telemetrytypes.TelemetryFieldKey) (*spantypes.GettableFlamegraphTrace, error)
 	GetThread(ctx context.Context, orgID valuer.UUID, traceID string, query *spantypes.ThreadQuery) (*spantypes.GettableTraceThread, error)

pkg/querier/consume.go

@@ -43,14 +43,18 @@ func stripKeyAlias(name string) string {
 // unwrapVariant decodes a scan envelope: the chcol.Variant the driver scans a Dynamic column (a JSON
 // path such as body_v2.level) into, and the JSONValue a whole JSON column scans into. The attributes
 // bag decodes flat so its dotted keys merge with the legacy attribute maps and a key stored at both a
-// scalar and an object path stays two keys; every other JSON column decodes nested.
+// scalar and an object path stays two keys; the span scope decodes to its name, version and flat
+// attributes; every other JSON column decodes nested.
 func unwrapVariant(name string, val any) any {
 	switch v := val.(type) {
 	case chcol.Variant:
 		return v.Any()
 	case telemetrystoretypes.JSONValue:
-		if name == "attributes" {
+		switch name {
+		case "attributes":
 			return v.Flatten()
+		case "scope":
+			return spantypes.NewScope(v)
 		}
 		return v.Nest()
 	}

pkg/querier/consume_test.go

@@ -95,6 +95,9 @@ func jsonColumn(paths map[string]any) telemetrystoretypes.JSONValue {
 func TestUnwrapVariant(t *testing.T) {
 	jsonCol := jsonColumn(map[string]any{"level": "error", "attrs.code": int64(500)})
 	nullCol := jsonColumn(map[string]any{"level": "error", "absent": chcol.Variant{}})
+	scopeAttrs := chcol.NewJSON()
+	scopeAttrs.SetValueAtPath("lib.lang", "go")
+	scopeCol := jsonColumn(map[string]any{"name": "io.opentelemetry.http", "version": "1.2.0", "attributes": scopeAttrs})
 
 	testCases := []struct {
 		name   string
@@ -108,6 +111,7 @@ func TestUnwrapVariant(t *testing.T) {
 		{name: "JSONColumnNested", column: "body_v2", input: jsonCol, want: map[string]any{"level": "error", "attrs": map[string]any{"code": float64(500)}}},
 		{name: "AttributesColumnFlat", column: "attributes", input: jsonCol, want: map[string]any{"level": "error", "attrs.code": float64(500)}},
 		{name: "AttributesColumnDropsNullPaths", column: "attributes", input: nullCol, want: map[string]any{"level": "error"}},
+		{name: "ScopeColumnDecodesToScope", column: "scope", input: scopeCol, want: spantypes.Scope{Name: "io.opentelemetry.http", Version: "1.2.0", Attributes: map[string]any{"lib.lang": "go"}}},
 	}
 	for _, testCase := range testCases {
 		t.Run(testCase.name, func(t *testing.T) {

pkg/statementbuilder/aistatementbuilder/span_list_test.go

@@ -45,7 +45,7 @@ SELECT timestamp AS __SELECT_KEY_0_timestamp, trace_id AS __SELECT_KEY_1_trace_i
     http_url AS __SELECT_KEY_17_http_url, external_http_method AS __SELECT_KEY_18_external_http_method,
     http_method AS __SELECT_KEY_19_http_method, http_host AS __SELECT_KEY_20_http_host, db_name AS __SELECT_KEY_21_db_name,
     db_operation AS __SELECT_KEY_22_db_operation, has_error AS __SELECT_KEY_23_has_error, is_remote AS __SELECT_KEY_24_is_remote,
-    attributes_string, attributes_number, attributes_bool, resources_string, attributes
+    attributes_string, attributes_number, attributes_bool, resources_string, attributes, scope
 FROM signoz_traces.distributed_signoz_index_v3
 WHERE trace_id GLOBAL IN (SELECT trace_id FROM __trace_scope)
   AND (((mapContains(attributes_string, 'gen_ai.request.model')