feat(trace-details): show span and error counts in the bottom strip

The page passes the values rather than the strip node fetching them, since the
trace query key includes the selected span and a self-fetching node would issue
a request on every span click. Header counts stay as is.

docs/contributing/go/handler.md

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

ee/sqlstore/postgressqlstore/formatter.go

@@ -23,15 +23,6 @@ func (f *formatter) JSONExtractString(column, path string) []byte {
 	return append(f.TextToJsonColumn(column), ops...)
 }
 
-func (f *formatter) JSONExtractMapValue(column, mapField, key string) []byte {
-	sql := f.TextToJsonColumn(column)
-	sql = append(sql, "->"...)
-	sql = schema.Append(f.bunf, sql, mapField)
-	sql = append(sql, "->>"...)
-	sql = schema.Append(f.bunf, sql, key)
-	return sql
-}
-
 func (f *formatter) JSONType(column, path string) []byte {
 	var sql []byte
 	sql = append(sql, "jsonb_typeof("...)

ee/sqlstore/postgressqlstore/formatter_test.go

@@ -55,67 +55,6 @@ func TestJSONExtractString(t *testing.T) {
 	}
 }
 
-func TestJSONExtractMapValue(t *testing.T) {
-	tests := []struct {
-		name     string
-		column   string
-		mapField string
-		key      string
-		expected string
-	}{
-		{
-			name:     "PlainKey",
-			column:   "data",
-			mapField: "labels",
-			key:      "team",
-			expected: `"data"::jsonb->'labels'->>'team'`,
-		},
-		{
-			name:     "DottedKey_OneMapEntry",
-			column:   "data",
-			mapField: "labels",
-			key:      "k8s.cluster",
-			expected: `"data"::jsonb->'labels'->>'k8s.cluster'`,
-		},
-		{
-			name:     "SingleQuoteInKey_Doubled",
-			column:   "data",
-			mapField: "labels",
-			key:      "o'brien",
-			expected: `"data"::jsonb->'labels'->>'o''brien'`,
-		},
-		{
-			name:     "BackslashInKey_Literal",
-			column:   "data",
-			mapField: "labels",
-			key:      `a\b`,
-			expected: `"data"::jsonb->'labels'->>'a\b'`,
-		},
-		{
-			name:     "DoubleQuoteInKey_Literal",
-			column:   "data",
-			mapField: "labels",
-			key:      `a"b`,
-			expected: `"data"::jsonb->'labels'->>'a"b'`,
-		},
-		{
-			name:     "QualifiedColumn",
-			column:   "rule.data",
-			mapField: "labels",
-			key:      "severity",
-			expected: `"rule"."data"::jsonb->'labels'->>'severity'`,
-		},
-	}
-
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			f := newFormatter(pgdialect.New())
-			got := string(f.JSONExtractMapValue(tt.column, tt.mapField, tt.key))
-			assert.Equal(t, tt.expected, got)
-		})
-	}
-}
-
 func TestJSONType(t *testing.T) {
 	tests := []struct {
 		name     string

frontend/__mocks__/uplotMock.ts

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

frontend/src/AppRoutes/index.tsx

@@ -12,13 +12,14 @@ import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
 import { ShiftHoldOverlayController } from 'components/ShiftOverlay/ShiftHoldOverlayController';
 import Spinner from 'components/Spinner';
-import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { StatusCodes } from 'http-status-codes';
@@ -58,7 +59,6 @@ function App(): JSX.Element {
 		isFetchingActiveLicense,
 		activeLicenseFetchError,
 		userFetchError,
-		featureFlagsFetchError,
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
@@ -66,6 +66,8 @@ function App(): JSX.Element {
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const isSavedViewEnabled = useSavedViewEnabled();
+	const chatSupport = useChatSupport();
 
 	const { hostname } = window.location;
 	const [pathname, setPathname] = useState(history.location.pathname);
@@ -253,7 +255,9 @@ function App(): JSX.Element {
 	}, [isDarkMode]);
 
 	useEffect(() => {
+		// The bottom strip carries Support, so the floating bubble goes entirely.
 		if (
+			isSavedViewEnabled ||
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/') ||
 			pathname === '/ai-assistant' ||
@@ -263,71 +267,32 @@ function App(): JSX.Element {
 		} else {
 			window.Pylon?.('showChatBubble');
 		}
-	}, [pathname]);
+	}, [pathname, isSavedViewEnabled]);
 
-	// eslint-disable-next-line sonarjs/cognitive-complexity
+	// Identity for the Pylon widget. Whether this user gets Pylon at all is
+	// `useChatSupport`'s call — this only fills in who they are.
 	useEffect(() => {
-		// feature flag shouldn't be loading and featureFlags or fetchError any one of this should be true indicating that req is complete
-		// licenses should also be present. there is no check for licenses for loading and error as that is mandatory if not present then routing
-		// to something went wrong which would ideally need a reload.
-		if (
-			!isFetchingFeatureFlags &&
-			(featureFlags || featureFlagsFetchError) &&
-			activeLicense &&
-			trialInfo
-		) {
-			let isChatSupportEnabled = false;
-			let isPremiumSupportEnabled = false;
-			if (featureFlags && featureFlags.length > 0) {
-				isChatSupportEnabled =
-					featureFlags.find((flag) => flag.name === FeatureKeys.CHAT_SUPPORT)
-						?.active || false;
-
-				isPremiumSupportEnabled =
-					featureFlags.find((flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT)
-						?.active || false;
-			}
-			const showAddCreditCardModal =
-				!isPremiumSupportEnabled && !trialInfo?.trialConvertedToSubscription;
-
-			if (
-				isLoggedInState &&
-				isChatSupportEnabled &&
-				!showAddCreditCardModal &&
-				(isCloudUser || isEnterpriseSelfHostedUser) &&
-				window.signozBootData?.settings?.pylon?.enabled
-			) {
-				const email = user.email || '';
-				const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
-				let emailHash = '';
-
-				if (email && secret) {
-					emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
-				}
-
-				window.pylon = {
-					chat_settings: {
-						app_id: window.signozBootData?.settings?.pylon?.appId,
-						email: user.email,
-						name: user.displayName || user.email,
-						email_hash: emailHash,
-					},
-				};
-			}
+		if (chatSupport !== ChatSupportState.Pylon) {
+			return;
 		}
-	}, [
-		isLoggedInState,
-		user,
-		pathname,
-		trialInfo?.trialConvertedToSubscription,
-		featureFlags,
-		isFetchingFeatureFlags,
-		featureFlagsFetchError,
-		activeLicense,
-		trialInfo,
-		isCloudUser,
-		isEnterpriseSelfHostedUser,
-	]);
+
+		const email = user.email || '';
+		const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
+		let emailHash = '';
+
+		if (email && secret) {
+			emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
+		}
+
+		window.pylon = {
+			chat_settings: {
+				app_id: window.signozBootData?.settings?.pylon?.appId,
+				email: user.email,
+				name: user.displayName || user.email,
+				email_hash: emailHash,
+			},
+		};
+	}, [chatSupport, user]);
 
 	useEffect(() => {
 		if (!isFetchingUser && isCloudUser && user && user.email) {

frontend/src/api/generated/services/rules/index.ts

@@ -41,8 +41,6 @@ import type {
 	GetRuleHistoryTopContributorsParams,
 	GetRuleHistoryTopContributorsPathParameters,
 	ListRules200,
-	ListRulesV3200,
-	ListRulesV3Params,
 	PatchRuleByID200,
 	PatchRuleByIDPathParameters,
 	RenderErrorResponseDTO,
@@ -75,8 +73,7 @@ const withQueryKey = <T extends object, K>(
 };
 
 /**
- * This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.
- * @deprecated
+ * This endpoint lists all alert rules with their current evaluation state
  * @summary List alert rules
  */
 export const listRules = (signal?: AbortSignal) => {
@@ -118,7 +115,6 @@ export type ListRulesQueryResult = NonNullable<
 export type ListRulesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary List alert rules
  */
 
@@ -138,7 +134,6 @@ export function useListRules<
 }
 
 /**
- * @deprecated
  * @summary List alert rules
  */
 export const invalidateListRules = async (
@@ -1393,97 +1388,3 @@ export const useTestRule = <
 > => {
 	return useMutation(getTestRuleMutationOptions(options));
 };
-/**
- * Returns a page of alert rules with their current evaluation state, trimmed to the fields the list page renders. Supports a filter DSL (`query`), a repeated `states` filter applied after the state overlay, sort (`updated_at`/`created_at`/`name`/`state`/`severity`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). In the filter DSL, a non-reserved key is matched as a rule label directly (`team = infra`); a key that collides with a reserved keyword matches either interpretation (negative operators exclude both), and `labels.<key>` targets only the label. The response also carries the org's label pairs and the reserved filter keys for building filter suggestions.
- * @summary List alert rules (v3)
- */
-export const listRulesV3 = (
-	params?: ListRulesV3Params,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListRulesV3200>({
-		url: `/api/v3/rules`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getListRulesV3QueryKey = (params?: ListRulesV3Params) => {
-	return [`/api/v3/rules`, ...(params ? [params] : [])] as const;
-};
-
-export const getListRulesV3QueryOptions = <
-	TData = Awaited<ReturnType<typeof listRulesV3>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListRulesV3Params,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listRulesV3>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListRulesV3QueryKey(params);
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRulesV3>>> = ({
-		signal,
-	}) => listRulesV3(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listRulesV3>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListRulesV3QueryResult = NonNullable<
-	Awaited<ReturnType<typeof listRulesV3>>
->;
-export type ListRulesV3QueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List alert rules (v3)
- */
-
-export function useListRulesV3<
-	TData = Awaited<ReturnType<typeof listRulesV3>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListRulesV3Params,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listRulesV3>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListRulesV3QueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return withQueryKey(query, queryOptions.queryKey);
-}
-
-/**
- * @summary List alert rules (v3)
- */
-export const invalidateListRulesV3 = async (
-	queryClient: QueryClient,
-	params?: ListRulesV3Params,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListRulesV3QueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -10188,99 +10188,6 @@ export interface RuletypesGettableTestRuleDTO {
 	message?: string;
 }
 
-export interface RuletypesLabelPairDTO {
-	/**
-	 * @type string
-	 */
-	key: string;
-	/**
-	 * @type string
-	 */
-	value: string;
-}
-
-export enum RuletypesListOrderDTO {
-	asc = 'asc',
-	desc = 'desc',
-}
-export enum RuletypesListSortDTO {
-	updated_at = 'updated_at',
-	created_at = 'created_at',
-	name = 'name',
-	state = 'state',
-	severity = 'severity',
-}
-export type RuletypesListableRuleDTOLabels = { [key: string]: string };
-
-export enum RuletypesRuleTypeDTO {
-	threshold_rule = 'threshold_rule',
-	promql_rule = 'promql_rule',
-	anomaly_rule = 'anomaly_rule',
-}
-export interface RuletypesListableRuleDTO {
-	/**
-	 * @type string
-	 */
-	alert: string;
-	alertType: RuletypesAlertTypeDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type boolean
-	 */
-	disabled?: boolean;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type object
-	 */
-	labels?: RuletypesListableRuleDTOLabels;
-	ruleType: RuletypesRuleTypeDTO;
-	state: RuletypesAlertStateDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
-export interface RuletypesListableRulesDTO {
-	/**
-	 * @type array
-	 */
-	labels: RuletypesLabelPairDTO[];
-	/**
-	 * @type array
-	 */
-	reservedKeywords: string[];
-	/**
-	 * @type array
-	 */
-	rules: RuletypesListableRuleDTO[];
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	total: number;
-}
-
 export interface RuletypesRenotifyDTO {
 	/**
 	 * @type array,null
@@ -10377,6 +10284,11 @@ export interface RuletypesRuleConditionDTO {
 	thresholds?: RuletypesRuleThresholdDataDTO;
 }
 
+export enum RuletypesRuleTypeDTO {
+	threshold_rule = 'threshold_rule',
+	promql_rule = 'promql_rule',
+	anomaly_rule = 'anomaly_rule',
+}
 export interface RuletypesPostableRuleDTO {
 	/**
 	 * @type string
@@ -14277,45 +14189,6 @@ export type GetMetricDashboardsV2200 = {
 	status: string;
 };
 
-export type ListRulesV3Params = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	query?: string;
-	/**
-	 * @type array
-	 * @description undefined
-	 */
-	states?: string[];
-	/**
-	 * @description undefined
-	 */
-	sort?: RuletypesListSortDTO;
-	/**
-	 * @description undefined
-	 */
-	order?: RuletypesListOrderDTO;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	limit?: number;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	offset?: number;
-};
-
-export type ListRulesV3200 = {
-	data: RuletypesListableRulesDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetFlamegraphPathParameters = {
 	traceID: string;
 };

frontend/src/components/AddCreditCardModal/AddCreditCardModal.tsx

@@ -0,0 +1,103 @@
+import { useMutation } from 'react-query';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import { CreditCard, X } from '@signozhq/icons';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
+
+interface AddCreditCardModalProps {
+	open: boolean;
+	onClose: () => void;
+	onAddCreditCard?: () => void;
+}
+
+/**
+ * Shown to trial users who have not added a card, in place of chat support.
+ * Submitting creates the subscription and opens the returned billing URL.
+ */
+function AddCreditCardModal({
+	open,
+	onClose,
+	onAddCreditCard,
+}: AddCreditCardModalProps): JSX.Element {
+	const { notifications } = useNotifications();
+
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{ onSuccess: handleBillingOnSuccess, onError: handleBillingOnError },
+	);
+
+	const handleAddCreditCard = (): void => {
+		onAddCreditCard?.();
+		updateCreditCard({ url: getBaseUrl() });
+	};
+
+	return (
+		<Modal
+			className="add-credit-card-modal"
+			title={<span className="title">Add Credit Card for Chat Support</span>}
+			open={open}
+			closable
+			onCancel={onClose}
+			destroyOnClose
+			footer={[
+				<Button
+					key="cancel"
+					onClick={onClose}
+					className="cancel-btn"
+					icon={<X size={16} />}
+				>
+					Cancel
+				</Button>,
+				<AuthZTooltip
+					key="submit"
+					checks={[SubscriptionCreatePermission]}
+					withPortal={false}
+				>
+					<Button
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
+						loading={isLoadingBilling}
+						disabled={isLoadingBilling}
+						onClick={handleAddCreditCard}
+						className="add-credit-card-btn"
+					>
+						Add Credit Card
+					</Button>
+				</AuthZTooltip>,
+			]}
+		>
+			<Typography.Text className="add-credit-card-text">
+				You&apos;re currently on <span className="highlight-text">Trial plan</span>.
+				Add a credit card to access SigNoz chat support to your workspace.
+			</Typography.Text>
+		</Modal>
+	);
+}
+
+AddCreditCardModal.defaultProps = { onAddCreditCard: undefined };
+
+export default AddCreditCardModal;

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,63 +1,15 @@
 import { useState } from 'react';
-import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Button } from 'antd';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
-import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
-import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
+import { MessageSquareText } from '@signozhq/icons';
 
 export default function ChatSupportGateway(): JSX.Element {
-	const { notifications } = useNotifications();
-
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
-
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
-		if (data?.data?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.data.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (error: APIError): void => {
-		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
-		{
-			onSuccess: (data) => {
-				handleBillingOnSuccess(data);
-			},
-			onError: handleBillingOnError,
-		},
-	);
 	const { pathname } = useLocation();
 
-	const handleAddCreditCard = (): void => {
-		logEvent('Add Credit card modal: Clicked', {
-			source: `chat support icon`,
-			page: pathname,
-		});
-
-		updateCreditCard({
-			url: getBaseUrl(),
-		});
-	};
-
 	return (
 		<>
 			<div className="chat-support-gateway">
@@ -76,47 +28,16 @@ export default function ChatSupportGateway(): JSX.Element {
 				</Button>
 			</div>
 
-			{/* Add Credit Card Modal */}
-			<Modal
-				className="add-credit-card-modal"
-				title={<span className="title">Add Credit Card for Chat Support</span>}
+			<AddCreditCardModal
 				open={isAddCreditCardModalOpen}
-				closable
-				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
-				destroyOnClose
-				footer={[
-					<Button
-						key="cancel"
-						onClick={(): void => setIsAddCreditCardModalOpen(false)}
-						className="cancel-btn"
-						icon={<X size={16} />}
-					>
-						Cancel
-					</Button>,
-					<AuthZTooltip
-						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
-					>
-						<Button
-							type="primary"
-							icon={<CreditCard size={16} />}
-							size="middle"
-							loading={isLoadingBilling}
-							disabled={isLoadingBilling}
-							onClick={handleAddCreditCard}
-							className="add-credit-card-btn"
-						>
-							Add Credit Card
-						</Button>
-					</AuthZTooltip>,
-				]}
-			>
-				<Typography.Text className="add-credit-card-text">
-					You&apos;re currently on <span className="highlight-text">Trial plan</span>
-					. Add a credit card to access SigNoz chat support to your workspace.
-				</Typography.Text>
-			</Modal>
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+				onAddCreditCard={(): void => {
+					logEvent('Add Credit card modal: Clicked', {
+						source: `chat support icon`,
+						page: pathname,
+					});
+				}}
+			/>
 		</>
 	);
 }

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,22 +1,14 @@
 import { useMemo, useState } from 'react';
-import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Button, Tooltip } from 'antd';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { defaultTo } from 'lodash-es';
-import { CircleHelp, CreditCard, X } from '@signozhq/icons';
+import { CircleHelp } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -41,7 +33,6 @@ function LaunchChatSupport({
 	chatMessageDisabled = false,
 }: LaunchChatSupportProps): JSX.Element | null {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
-	const { notifications } = useNotifications();
 	const {
 		trialInfo,
 		featureFlags,
@@ -119,43 +110,12 @@ function LaunchChatSupport({
 		}
 	};
 
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
-		if (data?.data?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.data.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (error: APIError): void => {
-		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
-		{
-			onSuccess: (data) => {
-				handleBillingOnSuccess(data);
-			},
-			onError: handleBillingOnError,
-		},
-	);
-
 	const handleAddCreditCard = (): void => {
 		logEvent('Add Credit card modal: Clicked', {
 			source: `facing issues button`,
 			page: pathname,
 			...attributes,
 		});
-
-		updateCreditCard({
-			url: getBaseUrl(),
-		});
 	};
 
 	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
@@ -175,47 +135,11 @@ function LaunchChatSupport({
 				</Button>
 			</Tooltip>
 
-			{/* Add Credit Card Modal */}
-			<Modal
-				className="add-credit-card-modal"
-				title={<span className="title">Add Credit Card for Chat Support</span>}
+			<AddCreditCardModal
 				open={isAddCreditCardModalOpen}
-				closable
-				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
-				destroyOnClose
-				footer={[
-					<Button
-						key="cancel"
-						onClick={(): void => setIsAddCreditCardModalOpen(false)}
-						className="cancel-btn"
-						icon={<X size={16} />}
-					>
-						Cancel
-					</Button>,
-					<AuthZTooltip
-						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
-					>
-						<Button
-							type="primary"
-							icon={<CreditCard size={16} />}
-							size="middle"
-							loading={isLoadingBilling}
-							disabled={isLoadingBilling}
-							onClick={handleAddCreditCard}
-							className="add-credit-card-btn"
-						>
-							Add Credit Card
-						</Button>
-					</AuthZTooltip>,
-				]}
-			>
-				<Typography.Text className="add-credit-card-text">
-					You&apos;re currently on <span className="highlight-text">Trial plan</span>
-					. Add a credit card to access SigNoz chat support to your workspace.
-				</Typography.Text>
-			</Modal>
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+				onAddCreditCard={handleAddCreditCard}
+			/>
 		</div>
 	) : null;
 }

frontend/src/constants/localStorage.ts

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

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -53,6 +53,10 @@
 		z-index: 0;
 		background: var(--l1-background);
 
+		// Column so the bottom strip sits under the scrolling content, not inside it.
+		display: flex;
+		flex-direction: column;
+
 		&.full-screen-content {
 			width: 100%;
 		}
@@ -70,7 +74,9 @@
 
 .chat-support-gateway {
 	position: fixed;
-	bottom: 20px;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: calc(20px + var(--bottom-strip-height, 0px));
 	right: 20px;
 	z-index: 1000;
 

frontend/src/container/AppLayout/index.tsx

@@ -43,6 +43,7 @@ import { USER_PREFERENCES } from 'constants/userPreferences';
 import AIAssistantModal from 'container/AIAssistant/AIAssistantModal';
 import AIAssistantPanel from 'container/AIAssistant/AIAssistantPanel';
 import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
+import BottomStrip from 'container/BottomStrip';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
 import dayjs from 'dayjs';
@@ -51,6 +52,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import useTabVisibility from 'hooks/useTabFocus';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
@@ -402,6 +404,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [pathname]);
 
 	const isToDisplayLayout = isLoggedIn;
+	const isSavedViewEnabled = useSavedViewEnabled();
 
 	const routeKey = useMemo(() => getRouteKey(pathname), [pathname]);
 	const pageTitle = t(routeKey);
@@ -868,6 +871,10 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 								</OverlayScrollbar>
 							</LayoutContent>
 						</Sentry.ErrorBoundary>
+
+						{isSavedViewEnabled && isToDisplayLayout && !renderFullScreen && (
+							<BottomStrip />
+						)}
 					</div>
 
 					{isLoggedIn && isAIAssistantEnabled && (
@@ -878,7 +885,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					)}
 				</Flex>
 
-				{showAddCreditCardModal && <ChatSupportGateway />}
+				{showAddCreditCardModal && !isSavedViewEnabled && <ChatSupportGateway />}
 				{showChangelogModal && changelog && (
 					<ChangelogModal changelog={changelog} onClose={toggleChangelogModal} />
 				)}

frontend/src/container/AppLayout/styles.ts

@@ -12,8 +12,12 @@ export const Layout = styled(LayoutComponent)`
 	}
 `;
 
+// Takes the height left in `.app-content` after the bottom strip.
+// `min-height: 0` is not needed right now, overlayscrollbars already sets
+// `overflow: auto` here. Kept so this does not break if that goes away.
 export const LayoutContent = styled(LayoutComponent.Content)`
-	height: 100%;
+	flex: 1;
+	min-height: 0;
 	&::-webkit-scrollbar {
 		width: 0.1rem;
 	}

frontend/src/container/BottomStrip/AskNoz/AskNoz.module.scss

@@ -0,0 +1,36 @@
+.askNoz {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.badge {
+	flex-shrink: 0;
+	display: inline-flex;
+	line-height: 0;
+	color: var(--accent-primary);
+}
+
+.pulseDot {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	line-height: 0;
+	animation: askNozDotPulse 1.5s ease-in-out infinite;
+	transform: scale(0.8);
+	margin-right: -12px;
+}
+
+@keyframes askNozDotPulse {
+	0%,
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	50% {
+		opacity: 0.35;
+		transform: scale(0.82);
+	}
+}

frontend/src/container/BottomStrip/AskNoz/AskNoz.tsx

@@ -0,0 +1,76 @@
+import { useLocation } from 'react-router-dom';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import Noz from 'components/Noz/Noz';
+import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
+import { selectPendingUserInputStreamCount } from 'container/AIAssistant/store/pendingInputSelectors';
+import {
+	openAIAssistant,
+	useAIAssistantStore,
+} from 'container/AIAssistant/store/useAIAssistantStore';
+import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import ROUTES from 'constants/routes';
+import { Dot } from '@signozhq/icons';
+
+import styles from './AskNoz.module.scss';
+
+/**
+ * Opens the Noz drawer, matching the header entry it replaces. Cmd+K opens the
+ * modal instead; this is deliberately the drawer.
+ *
+ * Carries the header's pending badge: when Noz is blocked on the user
+ * (`awaiting_approval` / `awaiting_clarification`) a dot pulses. Without it,
+ * hiding the header button would remove a notification rather than move it.
+ */
+function AskNoz(): JSX.Element | null {
+	const { pathname } = useLocation();
+	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const isDrawerOpen = useAIAssistantStore((state) => state.isDrawerOpen);
+	const isModalOpen = useAIAssistantStore((state) => state.isModalOpen);
+	const pendingUserInputCount = useAIAssistantStore(
+		selectPendingUserInputStreamCount,
+	);
+
+	// Noz is already on screen in the modal, so the "needs you" dot would be noise.
+	const showPendingBadge = pendingUserInputCount > 0 && !isModalOpen;
+
+	// The drawer does not render on the Noz full page, so the button would be inert.
+	const isAIAssistantPage = pathname.startsWith(ROUTES.AI_ASSISTANT_BASE);
+
+	if (!isAIAssistantEnabled || isDrawerOpen || isAIAssistantPage) {
+		return null;
+	}
+
+	return (
+		<div className={styles.askNoz} data-testid="bottom-strip-ask-noz">
+			{showPendingBadge && (
+				<span className={styles.badge} aria-hidden>
+					<span className={styles.pulseDot}>
+						<Dot size={36} />
+					</span>
+				</span>
+			)}
+			<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="sm"
+					className="noz-wave"
+					prefix={<Noz size={16} />}
+					onClick={(): void => openAIAssistant()}
+					aria-label={
+						showPendingBadge
+							? `Ask Noz, ${pendingUserInputCount} ${
+									pendingUserInputCount === 1 ? 'action needs' : 'actions need'
+								} your response`
+							: 'Ask Noz'
+					}
+				>
+					Ask Noz
+				</Button>
+			</TooltipSimple>
+		</div>
+	);
+}
+
+export default AskNoz;

frontend/src/container/BottomStrip/AskNoz/__tests__/AskNoz.test.tsx

@@ -0,0 +1,133 @@
+import { fireEvent } from '@testing-library/react';
+import { openAIAssistant } from 'container/AIAssistant/store/useAIAssistantStore';
+import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { render } from 'tests/test-utils';
+
+import AskNoz from '../AskNoz';
+
+jest.mock('hooks/useIsAIAssistantEnabled');
+jest.mock('container/AIAssistant/store/useAIAssistantStore', () => ({
+	openAIAssistant: jest.fn(),
+	useAIAssistantStore: jest.fn(),
+}));
+
+const mockEnabled = useIsAIAssistantEnabled as jest.MockedFunction<
+	typeof useIsAIAssistantEnabled
+>;
+const mockOpen = openAIAssistant as jest.MockedFunction<typeof openAIAssistant>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const { useAIAssistantStore } = jest.requireMock(
+	'container/AIAssistant/store/useAIAssistantStore',
+) as { useAIAssistantStore: jest.Mock };
+
+/** The component reads the store through three separate selector calls. */
+function mockStore({
+	isDrawerOpen = false,
+	isModalOpen = false,
+	pendingCount = 0,
+}: {
+	isDrawerOpen?: boolean;
+	isModalOpen?: boolean;
+	pendingCount?: number;
+} = {}): void {
+	const state = { isDrawerOpen, isModalOpen, streams: {} };
+	useAIAssistantStore.mockImplementation((selector: (s: unknown) => unknown) => {
+		const picked = selector(state);
+		// `selectPendingUserInputStreamCount` walks `streams`, which is empty here,
+		// so stand in the count we want to assert against.
+		return typeof picked === 'number' ? pendingCount : picked;
+	});
+}
+
+// `TooltipSimple` replaces its trigger's props, so the testId lives on the
+// wrapper and the button itself is reached by role — there is only ever one.
+const SLOT = 'bottom-strip-ask-noz';
+
+describe('AskNoz', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockEnabled.mockReturnValue(true);
+		mockStore();
+	});
+
+	describe('visibility', () => {
+		it('renders when the assistant is enabled', () => {
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toBeInTheDocument();
+		});
+
+		it('renders nothing when the assistant is disabled', () => {
+			mockEnabled.mockReturnValue(false);
+
+			const { queryByTestId } = render(<AskNoz />);
+
+			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
+		});
+
+		it('renders nothing while the drawer is open', () => {
+			mockStore({ isDrawerOpen: true });
+
+			const { queryByTestId } = render(<AskNoz />);
+
+			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
+		});
+
+		it('renders nothing on the Noz full page, where the drawer does not mount', () => {
+			const { queryByTestId } = render(<AskNoz />, undefined, {
+				initialRoute: '/ai-assistant/some-conversation-id',
+			});
+
+			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
+		});
+	});
+
+	describe('what it does', () => {
+		it('opens the drawer on click', () => {
+			const { getByRole } = render(<AskNoz />);
+
+			fireEvent.click(getByRole('button'));
+
+			expect(mockOpen).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	describe('pending badge', () => {
+		it('announces the count when Noz is waiting on the user', () => {
+			mockStore({ pendingCount: 2 });
+
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toHaveAttribute(
+				'aria-label',
+				'Ask Noz, 2 actions need your response',
+			);
+		});
+
+		it('uses the singular for one pending action', () => {
+			mockStore({ pendingCount: 1 });
+
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toHaveAttribute(
+				'aria-label',
+				'Ask Noz, 1 action needs your response',
+			);
+		});
+
+		it('stays quiet when nothing is pending', () => {
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toHaveAttribute('aria-label', 'Ask Noz');
+		});
+
+		it('stays quiet while the modal is open, Noz is already on screen', () => {
+			mockStore({ isModalOpen: true, pendingCount: 3 });
+
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toHaveAttribute('aria-label', 'Ask Noz');
+		});
+	});
+});

frontend/src/container/BottomStrip/BottomStrip.module.scss

@@ -0,0 +1,46 @@
+.strip {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+
+	flex-shrink: 0;
+	height: var(--bottom-strip-height);
+	padding: 0 12px;
+
+	background: var(--l2-background);
+	border-top: 1px solid var(--l2-border);
+
+	--button-font-size: 12px;
+
+	// font styles
+	font-family: var(--font-family-sf-mono, monospace);
+	font-size: 13px;
+	font-weight: var(--font-weight-normal);
+	line-height: var(--line-height-none);
+
+	// Above page content, below the body-portalled overlays that are meant to
+	// cover the strip.
+	position: relative;
+	z-index: 1;
+}
+
+.left,
+.right {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+}
+
+.left {
+	cursor: default;
+}
+
+// Temporary placeholder for the left slot. Replaced later.
+.version {
+	color: var(--l2-foreground);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

frontend/src/container/BottomStrip/LeftSlot/LeftSlot.tsx

@@ -0,0 +1,29 @@
+import * as Sentry from '@sentry/react';
+import { useAppContext } from 'providers/App/App';
+
+import StripTypography from '../components/StripTypography/StripTypography';
+import { useBottomStripStore } from '../store/useBottomStripStore';
+
+function LeftSlot(): JSX.Element | null {
+	const { versionData } = useAppContext();
+	const left = useBottomStripStore((state) => state.left);
+	const ownerId = useBottomStripStore((state) => state.ownerId);
+	const version = versionData?.version?.trim();
+	const versionNode = version ? (
+		<StripTypography>{version}</StripTypography>
+	) : null;
+
+	if (!left) {
+		return versionNode;
+	}
+
+	return (
+		// Keyed so a page whose node threw does not leave the boundary latched on
+		// the fallback for every page after it.
+		<Sentry.ErrorBoundary key={ownerId} fallback={<>{versionNode}</>}>
+			{left}
+		</Sentry.ErrorBoundary>
+	);
+}
+
+export default LeftSlot;

frontend/src/container/BottomStrip/SupportButton/SupportButton.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
+import { MessageSquareText } from '@signozhq/icons';
+
+function SupportButton(): JSX.Element | null {
+	const chatSupport = useChatSupport();
+	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
+		useState(false);
+
+	if (chatSupport === ChatSupportState.Unavailable) {
+		return null;
+	}
+
+	const handleClick = (): void => {
+		if (chatSupport === ChatSupportState.NeedsCard) {
+			setIsAddCreditCardModalOpen(true);
+			return;
+		}
+		window.Pylon?.('show');
+	};
+
+	return (
+		<>
+			<Button
+				variant="ghost"
+				color="secondary"
+				size="sm"
+				prefix={<MessageSquareText size={16} />}
+				onClick={handleClick}
+				testId="bottom-strip-support"
+			>
+				Support
+			</Button>
+
+			<AddCreditCardModal
+				open={isAddCreditCardModalOpen}
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+			/>
+		</>
+	);
+}
+
+export default SupportButton;

frontend/src/container/BottomStrip/SupportButton/__tests__/SupportButton.test.tsx

@@ -0,0 +1,81 @@
+import { fireEvent } from '@testing-library/react';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
+import { render } from 'tests/test-utils';
+
+import SupportButton from '../SupportButton';
+
+jest.mock('hooks/useChatSupport', () => ({
+	...jest.requireActual('hooks/useChatSupport'),
+	useChatSupport: jest.fn(),
+}));
+
+const mockChatSupport = useChatSupport as jest.MockedFunction<
+	typeof useChatSupport
+>;
+
+const BUTTON = 'bottom-strip-support';
+const MODAL_TITLE = 'Add Credit Card for Chat Support';
+
+describe('SupportButton', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		window.Pylon = jest.fn() as never;
+	});
+
+	describe('when Pylon is available', () => {
+		beforeEach(() => mockChatSupport.mockReturnValue(ChatSupportState.Pylon));
+
+		it('shows the button', () => {
+			const { getByTestId } = render(<SupportButton />);
+
+			expect(getByTestId(BUTTON)).toBeInTheDocument();
+		});
+
+		it('opens the Pylon widget on click', () => {
+			const { getByTestId } = render(<SupportButton />);
+
+			fireEvent.click(getByTestId(BUTTON));
+
+			expect(window.Pylon).toHaveBeenCalledWith('show');
+		});
+
+		it('does not open the credit card modal', () => {
+			const { getByTestId, queryByText } = render(<SupportButton />);
+
+			fireEvent.click(getByTestId(BUTTON));
+
+			expect(queryByText(MODAL_TITLE)).not.toBeInTheDocument();
+		});
+	});
+
+	describe('when the user needs a card', () => {
+		beforeEach(() => mockChatSupport.mockReturnValue(ChatSupportState.NeedsCard));
+
+		it('shows the same button', () => {
+			const { getByTestId } = render(<SupportButton />);
+
+			expect(getByTestId(BUTTON)).toBeInTheDocument();
+		});
+
+		it('opens the credit card modal on click, not Pylon', () => {
+			const { getByTestId, getByText } = render(<SupportButton />);
+
+			fireEvent.click(getByTestId(BUTTON));
+
+			expect(getByText(MODAL_TITLE)).toBeInTheDocument();
+			expect(window.Pylon).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('when support is unavailable', () => {
+		beforeEach(() =>
+			mockChatSupport.mockReturnValue(ChatSupportState.Unavailable),
+		);
+
+		it('renders nothing at all', () => {
+			const { queryByTestId } = render(<SupportButton />);
+
+			expect(queryByTestId(BUTTON)).not.toBeInTheDocument();
+		});
+	});
+});

frontend/src/container/BottomStrip/__tests__/BottomStrip.test.tsx

@@ -0,0 +1,165 @@
+import { type ReactNode, useState } from 'react';
+import { fireEvent } from '@testing-library/react';
+import { render } from 'tests/test-utils';
+import { Info } from 'types/api/v1/version/get';
+
+import BottomStrip, {
+	BOTTOM_STRIP_HEIGHT,
+	BOTTOM_STRIP_HEIGHT_VAR,
+	BOTTOM_STRIP_ON_CLASS,
+} from '..';
+import { useBottomStripStore } from '../store/useBottomStripStore';
+import { useBottomStripLeft } from '../useBottomStripLeft';
+
+/** Stands in for a page that puts something on the left of the strip. */
+function Page({ children }: { children: ReactNode }): null {
+	useBottomStripLeft(children);
+	return null;
+}
+
+/** A page whose value changes without needing `rerender`. */
+function ChangingPage(): JSX.Element {
+	const [count, setCount] = useState(600);
+
+	useBottomStripLeft(`${count} traces`);
+
+	return (
+		<button type="button" onClick={(): void => setCount(42)}>
+			change
+		</button>
+	);
+}
+
+/** A page node that blows up while the strip renders it. */
+function Boom(): JSX.Element {
+	throw new Error('bad left node');
+}
+
+const VERSION = 'v0.134.67';
+const versionData: Info = { version: VERSION, ee: 'Y', setupCompleted: true };
+const withVersion = { appContextOverrides: { versionData } };
+
+describe('BottomStrip', () => {
+	// The store is module level, so it outlives each test.
+	beforeEach(() => {
+		useBottomStripStore.setState({ left: null, ownerId: null });
+	});
+
+	it('publishes the body class and height property while mounted', () => {
+		const { unmount } = render(<BottomStrip />);
+
+		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(true);
+		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
+			`${BOTTOM_STRIP_HEIGHT}px`,
+		);
+
+		unmount();
+
+		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(false);
+		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
+			'',
+		);
+	});
+
+	// The string is whatever the Go build injected, so it is rendered untouched —
+	// same as SideNav. Release tags carry the "v", local builds do not.
+	it.each([['v0.134.67'], ['main-64f1c2a']])(
+		'renders the build version %p exactly as given',
+		(version) => {
+			const { getByText } = render(<BottomStrip />, undefined, {
+				appContextOverrides: {
+					versionData: { version, ee: 'Y', setupCompleted: true },
+				},
+			});
+
+			expect(getByText(version)).toBeInTheDocument();
+		},
+	);
+
+	it('renders the strip without a version when none is available', () => {
+		const { getByTestId } = render(<BottomStrip />, undefined, {
+			appContextOverrides: { versionData: null },
+		});
+
+		const strip = getByTestId('bottom-strip');
+
+		expect(strip).toBeInTheDocument();
+		expect(strip).toHaveTextContent('');
+	});
+
+	// `tests/test-utils` builds its wrapper around the first `ui`, so `rerender`
+	// re-renders the original tree. These drive change through state and through
+	// separate trees instead, which the module-level store lets them share.
+	describe('left slot', () => {
+		it('shows what the page put there instead of the version', () => {
+			render(<Page>600 traces</Page>);
+			const { getByText, queryByText } = render(
+				<BottomStrip />,
+				undefined,
+				withVersion,
+			);
+
+			expect(getByText('600 traces')).toBeInTheDocument();
+			expect(queryByText(VERSION)).not.toBeInTheDocument();
+		});
+
+		it('falls back to the version once the page is gone', () => {
+			const page = render(<Page>600 traces</Page>);
+			const { getByText } = render(<BottomStrip />, undefined, withVersion);
+
+			page.unmount();
+
+			expect(getByText(VERSION)).toBeInTheDocument();
+		});
+
+		it('updates when the page changes what it shows', () => {
+			render(<ChangingPage />);
+			const { getByText, getByRole } = render(
+				<BottomStrip />,
+				undefined,
+				withVersion,
+			);
+
+			expect(getByText('600 traces')).toBeInTheDocument();
+
+			fireEvent.click(getByRole('button', { name: 'change' }));
+
+			expect(getByText('42 traces')).toBeInTheDocument();
+		});
+
+		it('falls back to the version when the page node throws', () => {
+			// React logs the caught error, which is noise here.
+			const consoleError = jest
+				.spyOn(console, 'error')
+				.mockImplementation(() => {});
+
+			render(
+				<Page>
+					<Boom />
+				</Page>,
+			);
+			const { getByTestId, getByText } = render(
+				<BottomStrip />,
+				undefined,
+				withVersion,
+			);
+
+			expect(getByTestId('bottom-strip')).toBeInTheDocument();
+			expect(getByText(VERSION)).toBeInTheDocument();
+
+			consoleError.mockRestore();
+		});
+
+		it('keeps the new page value when the old page unmounts after it', () => {
+			// Navigation order: the next page mounts before the last one unmounts,
+			// so without the owner guard the outgoing page wipes the incoming value.
+			const pageA = render(<Page>page A</Page>);
+			render(<Page>page B</Page>);
+			const { getByText } = render(<BottomStrip />, undefined, withVersion);
+
+			pageA.unmount();
+
+			expect(getByText('page B')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/container/BottomStrip/components/StripSeparator/StripSeparator.module.scss

@@ -0,0 +1,15 @@
+.separator {
+	flex-shrink: 0;
+	width: 1px;
+	height: 14px;
+	background: var(--l2-border);
+}
+
+// Strip items hide themselves by rendering null, which would otherwise leave a
+// separator dangling at an edge or two of them side by side. Collapsing them
+// here keeps the call sites free of visibility plumbing.
+.separator:first-child,
+.separator:last-child,
+.separator + .separator {
+	display: none;
+}

frontend/src/container/BottomStrip/components/StripSeparator/StripSeparator.tsx

@@ -0,0 +1,7 @@
+import styles from './StripSeparator.module.scss';
+
+function StripSeparator(): JSX.Element {
+	return <span className={styles.separator} aria-hidden />;
+}
+
+export default StripSeparator;

frontend/src/container/BottomStrip/components/StripTypography/StripTypography.module.scss

@@ -0,0 +1,10 @@
+.stripTypography {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+
+	color: var(--l2-foreground);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

frontend/src/container/BottomStrip/components/StripTypography/StripTypography.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import styles from './StripTypography.module.scss';
+
+interface StripTypographyProps {
+	children: ReactNode;
+	/** Leading icon, aligned and spaced for you. Same shape as `Button`'s. */
+	prefix?: ReactNode;
+	className?: string;
+}
+
+/**
+ * Everything the strip renders goes through this: the version, a plain count, or
+ * an icon with a key and value. It owns the strip's type and alignment and
+ * nothing else — how a consumer colours its own content is theirs.
+ */
+function StripTypography({
+	children,
+	prefix,
+	className,
+}: StripTypographyProps): JSX.Element {
+	return (
+		<span className={cx(styles.stripTypography, className)}>
+			{prefix}
+			<Typography.Text as="span">{children}</Typography.Text>
+		</span>
+	);
+}
+
+StripTypography.defaultProps = { prefix: undefined, className: undefined };
+
+export default StripTypography;

frontend/src/container/BottomStrip/index.tsx

@@ -0,0 +1,43 @@
+import { useLayoutEffect } from 'react';
+
+import AskNoz from './AskNoz/AskNoz';
+import LeftSlot from './LeftSlot/LeftSlot';
+import StripSeparator from './components/StripSeparator/StripSeparator';
+import SupportButton from './SupportButton/SupportButton';
+
+import styles from './BottomStrip.module.scss';
+
+export const BOTTOM_STRIP_HEIGHT = 24;
+
+export const BOTTOM_STRIP_ON_CLASS = 'bottom-strip-on';
+export const BOTTOM_STRIP_HEIGHT_VAR = '--bottom-strip-height';
+
+function BottomStrip(): JSX.Element {
+	useLayoutEffect(() => {
+		document.body.classList.add(BOTTOM_STRIP_ON_CLASS);
+		document.body.style.setProperty(
+			BOTTOM_STRIP_HEIGHT_VAR,
+			`${BOTTOM_STRIP_HEIGHT}px`,
+		);
+
+		return (): void => {
+			document.body.classList.remove(BOTTOM_STRIP_ON_CLASS);
+			document.body.style.removeProperty(BOTTOM_STRIP_HEIGHT_VAR);
+		};
+	}, []);
+
+	return (
+		<div className={styles.strip} data-testid="bottom-strip">
+			<div className={styles.left}>
+				<LeftSlot />
+			</div>
+			<div className={styles.right}>
+				<AskNoz />
+				<StripSeparator />
+				<SupportButton />
+			</div>
+		</div>
+	);
+}
+
+export default BottomStrip;

frontend/src/container/BottomStrip/store/useBottomStripStore.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { create } from 'zustand';
+
+interface BottomStripState {
+	/** What the strip shows on the left, or null to fall back to the version. */
+	left: ReactNode | null;
+	/** Which page owns the current value — see `clearLeft`. */
+	ownerId: string | null;
+	setLeft: (ownerId: string, left: ReactNode) => void;
+	clearLeft: (ownerId: string) => void;
+}
+
+export const useBottomStripStore = create<BottomStripState>()((set, get) => ({
+	left: null,
+	ownerId: null,
+	setLeft: (ownerId, left): void => set({ left, ownerId }),
+	// Only the current owner may clear. On a plain route swap React runs the old
+	// page's cleanup before the new page's effect, so this is moot, but two
+	// consumers can be mounted at once (a page under a drawer): the one that set
+	// last owns the slot, and the other unmounting must not wipe it.
+	clearLeft: (ownerId): void => {
+		if (get().ownerId === ownerId) {
+			set({ left: null, ownerId: null });
+		}
+	},
+}));

frontend/src/container/BottomStrip/useBottomStripLeft.ts

@@ -0,0 +1,23 @@
+import { type ReactNode, useEffect, useId } from 'react';
+
+import { useBottomStripStore } from './store/useBottomStripStore';
+
+/**
+ * Puts `node` on the left of the bottom strip for as long as the calling page is
+ * mounted. Pass null to show nothing and let the version through.
+ *
+ * There is no refresh API by design: a page that refetches re-renders, which
+ * produces a new node, which re-runs this effect. Wrap the node in `useMemo`
+ * keyed on the values it shows, or the store is written on every render.
+ */
+export function useBottomStripLeft(node: ReactNode | null): void {
+	const ownerId = useId();
+	const setLeft = useBottomStripStore((state) => state.setLeft);
+	const clearLeft = useBottomStripStore((state) => state.clearLeft);
+
+	useEffect(() => {
+		setLeft(ownerId, node);
+
+		return (): void => clearLeft(ownerId);
+	}, [node, ownerId, setLeft, clearLeft]);
+}

frontend/src/container/CreateAlertV2/Footer/styles.scss

@@ -1,6 +1,8 @@
 .create-alert-v2-footer {
 	position: fixed;
-	bottom: 0;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	left: 63px;
 	right: 0;
 	background-color: var(--l1-background);

frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss

@@ -1,6 +1,8 @@
 .explorer-options-container {
 	position: fixed;
-	bottom: 0px;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	left: calc(50% + 240px);
 	transform: translate(calc(-50% - 120px), 0);
 	transition: left 0.2s linear;

frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.styles.scss

@@ -1,6 +1,8 @@
 .explorer-option-droppable-container {
 	position: fixed;
-	bottom: 0;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	width: -webkit-fill-available;
 	height: 24px;
 	display: flex;

frontend/src/container/Home/Home.styles.scss

@@ -1,7 +1,6 @@
 .home-container {
 	display: flex;
 	flex-direction: column;
-	min-height: 100vh;
 	overflow-y: auto;
 	height: 100%;
 	width: 100%;

frontend/src/container/Licenses/Licenses.styles.scss

@@ -1,7 +1,4 @@
 .licenses-page {
-	max-height: 100vh;
-	overflow: hidden;
-
 	.licenses-page-header {
 		border-bottom: 1px solid var(--l1-border);
 		background: var(--l1-background);
@@ -32,7 +29,6 @@
 
 		.licenses-page-content {
 			flex: 1;
-			height: calc(100vh - 48px);
 			background: var(--l1-background);
 			padding: 10px 8px;
 			overflow-y: auto;

frontend/src/container/ListAlertRules/ListAlertRules.module.scss

@@ -2,7 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-	height: calc(100vh - 62px);
+	flex: 1;
 	min-height: 400px;
 }
 

frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss

@@ -181,7 +181,9 @@
 
 		.ant-pagination {
 			position: fixed;
-			bottom: 0;
+			// Lifted above the bottom strip. Don't extend this pattern — new
+			// fixed-bottom UI belongs in the bounded layout, not in another offset here.
+			bottom: var(--bottom-strip-height, 0px);
 			width: calc(100% - 54px);
 			background: var(--l1-background);
 			padding: 16px;

frontend/src/container/TriggeredAlerts/TriggeredAlerts.module.scss

@@ -2,7 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-	height: calc(100vh - 62px);
+	flex: 1;
 	min-height: 400px;
 	padding-top: var(--spacing-8);
 }

frontend/src/container/Version/Version.styles.scss

@@ -1,7 +1,4 @@
 .version-container {
-	max-height: 100vh;
-	overflow: hidden;
-
 	.version-page-header {
 		border-bottom: 1px solid var(--l1-border);
 		background: var(--l1-background);

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

@@ -0,0 +1,148 @@
+import { renderHook } from '@testing-library/react';
+import { FeatureKeys } from 'constants/features';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
+import { useAppContext } from 'providers/App/App';
+
+jest.mock('providers/App/App');
+jest.mock('hooks/useGetTenantLicense');
+
+const mockAppContext = useAppContext as jest.MockedFunction<
+	typeof useAppContext
+>;
+const mockLicense = useGetTenantLicense as jest.MockedFunction<
+	typeof useGetTenantLicense
+>;
+
+const flag = (name: FeatureKeys, active: boolean): Record<string, unknown> => ({
+	name,
+	active,
+	usage: 0,
+	usage_limit: -1,
+	route: '',
+});
+
+function setup({
+	chatSupport = true,
+	premiumSupport = false,
+	trialConverted = false,
+	isCloudUser = true,
+	isEnterpriseSelfHostedUser = false,
+	isLoggedIn = true,
+	pylonEnabled = true,
+	isFetchingFeatureFlags = false,
+	activeLicense = {} as unknown,
+	trialInfo = {} as unknown,
+} = {}): void {
+	window.signozBootData = {
+		settings: { pylon: { enabled: pylonEnabled } },
+	} as never;
+
+	mockAppContext.mockReturnValue({
+		featureFlags: [
+			flag(FeatureKeys.CHAT_SUPPORT, chatSupport),
+			flag(FeatureKeys.PREMIUM_SUPPORT, premiumSupport),
+		],
+		isFetchingFeatureFlags,
+		featureFlagsFetchError: null,
+		trialInfo: trialInfo && { trialConvertedToSubscription: trialConverted },
+		isLoggedIn,
+		activeLicense,
+	} as never);
+
+	mockLicense.mockReturnValue({
+		isCloudUser,
+		isEnterpriseSelfHostedUser,
+	} as never);
+}
+
+const state = (): ChatSupportState =>
+	renderHook(() => useChatSupport()).result.current;
+
+describe('useChatSupport', () => {
+	beforeEach(() => jest.clearAllMocks());
+
+	describe('pylon', () => {
+		it('hands off to Pylon for a cloud user past trial', () => {
+			setup({ trialConverted: true });
+
+			expect(state()).toBe(ChatSupportState.Pylon);
+		});
+
+		it('hands off to Pylon for enterprise self-hosted', () => {
+			setup({
+				trialConverted: true,
+				isCloudUser: false,
+				isEnterpriseSelfHostedUser: true,
+			});
+
+			expect(state()).toBe(ChatSupportState.Pylon);
+		});
+
+		it('hands off to Pylon when premium support is on, card or not', () => {
+			setup({ premiumSupport: true, trialConverted: false });
+
+			expect(state()).toBe(ChatSupportState.Pylon);
+		});
+
+		it('offers nothing when Pylon is not configured server side', () => {
+			setup({ trialConverted: true, pylonEnabled: false });
+
+			expect(state()).toBe(ChatSupportState.Unavailable);
+		});
+	});
+
+	describe('needsCard', () => {
+		it('offers the card flow to a cloud user still on trial', () => {
+			setup({ trialConverted: false, premiumSupport: false });
+
+			expect(state()).toBe(ChatSupportState.NeedsCard);
+		});
+
+		it('offers nothing to a non-cloud user needing a card', () => {
+			setup({
+				trialConverted: false,
+				isCloudUser: false,
+				isEnterpriseSelfHostedUser: true,
+			});
+
+			expect(state()).toBe(ChatSupportState.Unavailable);
+		});
+	});
+
+	describe('unavailable', () => {
+		it('offers nothing without the chat support flag', () => {
+			setup({ chatSupport: false });
+
+			expect(state()).toBe(ChatSupportState.Unavailable);
+		});
+
+		it('offers nothing when logged out', () => {
+			setup({ isLoggedIn: false });
+
+			expect(state()).toBe(ChatSupportState.Unavailable);
+		});
+
+		it('offers nothing while the flags are still loading', () => {
+			setup({ isFetchingFeatureFlags: true });
+
+			expect(state()).toBe(ChatSupportState.Unavailable);
+		});
+
+		it('offers nothing before the licence has loaded', () => {
+			setup({ activeLicense: null });
+
+			expect(state()).toBe(ChatSupportState.Unavailable);
+		});
+
+		it('offers nothing on a tenant that is neither cloud nor enterprise', () => {
+			setup({
+				trialConverted: true,
+				isCloudUser: false,
+				isEnterpriseSelfHostedUser: false,
+			});
+
+			expect(state()).toBe(ChatSupportState.Unavailable);
+		});
+	});
+});

frontend/src/hooks/useChatSupport.ts

@@ -0,0 +1,70 @@
+import { FeatureKeys } from 'constants/features';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useAppContext } from 'providers/App/App';
+import { useMemo } from 'react';
+
+export enum ChatSupportState {
+	/** Pylon is configured for this user — hand off to the widget. */
+	Pylon = 'pylon',
+	/** Trial without a card — offer the Add Credit Card flow instead. */
+	NeedsCard = 'needsCard',
+	/** No support entry at all. */
+	Unavailable = 'unavailable',
+}
+
+export function useChatSupport(): ChatSupportState {
+	const {
+		featureFlags,
+		isFetchingFeatureFlags,
+		featureFlagsFetchError,
+		trialInfo,
+		isLoggedIn,
+		activeLicense,
+	} = useAppContext();
+	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
+
+	return useMemo(() => {
+		const isReady =
+			!isFetchingFeatureFlags &&
+			(featureFlags || featureFlagsFetchError) &&
+			activeLicense &&
+			trialInfo;
+		if (!isReady || !isLoggedIn) {
+			return ChatSupportState.Unavailable;
+		}
+
+		const flag = (name: FeatureKeys): boolean =>
+			featureFlags?.find((f) => f.name === name)?.active || false;
+
+		if (!flag(FeatureKeys.CHAT_SUPPORT)) {
+			return ChatSupportState.Unavailable;
+		}
+
+		const needsCard =
+			!flag(FeatureKeys.PREMIUM_SUPPORT) &&
+			!trialInfo?.trialConvertedToSubscription;
+
+		if (needsCard) {
+			// The credit card flow is cloud-only
+			return isCloudUser
+				? ChatSupportState.NeedsCard
+				: ChatSupportState.Unavailable;
+		}
+
+		const pylonConfigured = Boolean(
+			window.signozBootData?.settings?.pylon?.enabled,
+		);
+		return (isCloudUser || isEnterpriseSelfHostedUser) && pylonConfigured
+			? ChatSupportState.Pylon
+			: ChatSupportState.Unavailable;
+	}, [
+		activeLicense,
+		featureFlags,
+		featureFlagsFetchError,
+		isCloudUser,
+		isEnterpriseSelfHostedUser,
+		isFetchingFeatureFlags,
+		isLoggedIn,
+		trialInfo,
+	]);
+}

frontend/src/hooks/useSavedViewEnabled.ts

@@ -0,0 +1,11 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { useState } from 'react';
+
+export function useSavedViewEnabled(): boolean {
+	const [isEnabled] = useState(
+		() => getLocalStorageKey(LOCALSTORAGE.SAVED_VIEW_ENABLED) === 'true',
+	);
+
+	return isEnabled;
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/pages/AlertList/AlertList.styles.scss

@@ -1,4 +1,29 @@
 .alerts-container {
+	// Hands the page height down to the active tab so its content can bound itself
+	// instead of guessing with 100vh. Child combinators only, nested Tabs
+	// (Configuration) must not be caught.
+	flex: 1;
+	min-height: 0;
+
+	> .ant-tabs-content-holder {
+		display: flex;
+		flex-direction: column;
+
+		> .ant-tabs-content {
+			flex: 1;
+			min-height: 0;
+			display: flex;
+			flex-direction: column;
+
+			> .ant-tabs-tabpane-active {
+				flex: 1;
+				min-height: 0;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.top-level-tab.periscope-tab {
 		padding: 2px 0;
 	}
@@ -40,5 +65,9 @@
 
 	.alert-rules-container {
 		margin-top: 10px;
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
 	}
 }

frontend/src/pages/AllErrors/stories/AllErrors.stories.tsx

@@ -98,30 +98,17 @@ export const QuickFiltersSettings: Story = {
 	play: openQuickFiltersSettings,
 };
 
-const dirtyQuickFiltersSettings = async (): Promise<void> => {
-	await openQuickFiltersSettings();
-
-	// One Remove per added filter; the first row's is the one clicked.
-	const [removeFilter] = await screen.findAllByRole('button', {
-		name: 'Remove',
-	});
-
-	await userEvent.click(removeFilter);
-	await screen.findByRole('button', { name: 'Save changes' });
-};
-
 /** Settings with an unsaved filter removal and the fixed action footer. */
 export const QuickFiltersSettingsDirty: Story = {
-	play: dirtyQuickFiltersSettings,
-};
+	play: async (): Promise<void> => {
+		await openQuickFiltersSettings();
 
-/**
- * The same panel with a banner above the shell. The banner takes 48px off the
- * layout, so this is the case where the footer used to be pushed off screen:
- * the panel is sized from the filters pane rather than the viewport, which
- * keeps Save changes reachable.
- */
-export const QuickFiltersSettingsWithBanner: Story = {
-	args: { banner: 'trial-expiry' },
-	play: dirtyQuickFiltersSettings,
+		// One Remove per added filter; the first row's is the one clicked.
+		const [removeFilter] = await screen.findAllByRole('button', {
+			name: 'Remove',
+		});
+
+		await userEvent.click(removeFilter);
+		await screen.findByRole('button', { name: 'Save changes' });
+	},
 };

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

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

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
@@ -59,35 +59,6 @@ export const PortDomain: Story = {
 /** The page fetches before it renders a filter, which outlasts the 1s default. */
 const untilLoaded = { timeout: 15_000 };
 
-const openQuickFiltersSettings = async (): Promise<void> => {
-	// The settings control renders disabled while its permission check is in
-	// flight and is swapped for the enabled one once the check answers, so it is
-	// looked up again on every attempt; a click on the disabled one is dropped in
-	// silence.
-	const control = await waitFor(() => {
-		const settings = screen.getByTestId('settings-icon-container');
-
-		expect(settings).toBeEnabled();
-
-		return settings;
-	}, untilLoaded);
-
-	await userEvent.click(control);
-	await screen.findByText('Edit quick filters', undefined, untilLoaded);
-};
-
-const dirtyQuickFiltersSettings = async (): Promise<void> => {
-	await openQuickFiltersSettings();
-
-	// One Remove per added filter; the first row's is the one clicked.
-	const [removeFilter] = await screen.findAllByRole('button', {
-		name: 'Remove',
-	});
-
-	await userEvent.click(removeFilter);
-	await screen.findByRole('button', { name: 'Save changes' });
-};
-
 /**
  * The quick-filter panel has no test id of its own, and it only mounts once the
  * workspace's filters have answered.
@@ -172,24 +143,3 @@ export const NoExternalCalls: Story = {
 export const Loading: Story = {
 	args: { dataState: 'loading' },
 };
-
-/** The editable quick-filter settings panel. */
-export const QuickFiltersSettings: Story = {
-	play: openQuickFiltersSettings,
-};
-
-/** Settings with an unsaved filter removal and the fixed action footer. */
-export const QuickFiltersSettingsDirty: Story = {
-	play: dirtyQuickFiltersSettings,
-};
-
-/**
- * The same panel with a banner above the shell. The banner takes 48px off the
- * layout, so this is the case where the footer used to be pushed off screen:
- * the panel is sized from the filters pane rather than the viewport, which
- * keeps Save changes reachable.
- */
-export const QuickFiltersSettingsWithBanner: Story = {
-	args: { banner: 'trial-expiry' },
-	play: dirtyQuickFiltersSettings,
-};

frontend/src/pages/DashboardPage/DashboardContainer/components/LockedIndicator/LockedIndicator.module.scss

@@ -2,7 +2,9 @@
 	display: flex;
 	flex-direction: column;
 	position: fixed;
-	bottom: 0;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	left: 0;
 	width: 100%;
 	z-index: 100;

frontend/src/pages/LLMObservability/Explorer/stories/Explorer.stories.tsx

@@ -146,39 +146,11 @@ export const Failed: Story = {
 	parameters: { allowConsoleErrors: true },
 };
 
-const dirtyQuickFiltersSettings = async (): Promise<void> => {
-	await openQuickFiltersSettings();
-
-	// One Remove per added filter; the first row's is the one clicked.
-	const [removeFilter] = await screen.findAllByRole('button', {
-		name: 'Remove',
-	});
-
-	await userEvent.click(removeFilter);
-	await screen.findByRole('button', { name: 'Save changes' });
-};
-
 /** The editable quick-filter settings panel. */
 export const QuickFiltersSettings: Story = {
 	play: openQuickFiltersSettings,
 };
 
-/** Settings with an unsaved filter removal and the fixed action footer. */
-export const QuickFiltersSettingsDirty: Story = {
-	play: dirtyQuickFiltersSettings,
-};
-
-/**
- * The same panel with a banner above the shell. The banner takes 48px off the
- * layout, so this is the case where the footer used to be pushed off screen:
- * the panel is sized from the filters pane rather than the viewport, which
- * keeps Save changes reachable.
- */
-export const QuickFiltersSettingsWithBanner: Story = {
-	args: { banner: 'trial-expiry' },
-	play: dirtyQuickFiltersSettings,
-};
-
 /** A quick-filter value selected against the LLM span query. */
 export const QuickFilterSelected: Story = {
 	play: async ({ canvasElement }): Promise<void> => {

frontend/src/pages/LogsModulePage/stories/LogsModulePage.stories.tsx

@@ -166,31 +166,18 @@ export const QuickFiltersSettings: Story = {
 	play: openQuickFiltersSettings,
 };
 
-const dirtyQuickFiltersSettings = async (): Promise<void> => {
-	await openQuickFiltersSettings();
-	// One Remove per added filter; the first row's is the one clicked.
-	const [removeFilter] = await screen.findAllByRole('button', {
-		name: 'Remove',
-	});
-
-	await userEvent.click(removeFilter);
-	await screen.findByRole('button', { name: 'Save changes' });
-};
-
 /** Settings with an unsaved filter removal and the fixed action footer. */
 export const QuickFiltersSettingsDirty: Story = {
-	play: dirtyQuickFiltersSettings,
-};
+	play: async (): Promise<void> => {
+		await openQuickFiltersSettings();
+		// One Remove per added filter; the first row's is the one clicked.
+		const [removeFilter] = await screen.findAllByRole('button', {
+			name: 'Remove',
+		});
 
-/**
- * The same panel with a banner above the shell. The banner takes 48px off the
- * layout, so this is the case where the footer used to be pushed off screen:
- * the panel is sized from the filters pane rather than the viewport, which
- * keeps Save changes reachable.
- */
-export const QuickFiltersSettingsWithBanner: Story = {
-	args: { banner: 'trial-expiry' },
-	play: dirtyQuickFiltersSettings,
+		await userEvent.click(removeFilter);
+		await screen.findByRole('button', { name: 'Save changes' });
+	},
 };
 
 /**

frontend/src/pages/MeterExplorer/stories/MeterExplorer.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, screen, userEvent, waitFor } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
@@ -19,7 +18,6 @@ const pageStory = storyMocks(meterMocks, { layout: 'app' });
  */
 const meta = {
 	title: 'Pages/Metering/Cost Meter',
-	tags: ['play'],
 	component: MeterExplorerPage,
 	...pageStory,
 	parameters: { ...pageStory.parameters },
@@ -29,38 +27,6 @@ export default meta;
 
 type Story = StoryObj<MeterArgs>;
 
-/** The page fetches before it renders its filters, which outlasts the 1s default. */
-const untilLoaded = { timeout: 15_000 };
-
-const openQuickFiltersSettings = async (): Promise<void> => {
-	// The settings control renders disabled while its permission check is in
-	// flight and is swapped for the enabled one once the check answers, so it is
-	// looked up again on every attempt; a click on the disabled one is dropped in
-	// silence.
-	const control = await waitFor(() => {
-		const settings = screen.getByTestId('settings-icon-container');
-
-		expect(settings).toBeEnabled();
-
-		return settings;
-	}, untilLoaded);
-
-	await userEvent.click(control);
-	await screen.findByText('Edit quick filters', undefined, untilLoaded);
-};
-
-const dirtyQuickFiltersSettings = async (): Promise<void> => {
-	await openQuickFiltersSettings();
-
-	// One Remove per added filter; the first row's is the one clicked.
-	const [removeFilter] = await screen.findAllByRole('button', {
-		name: 'Remove',
-	});
-
-	await userEvent.click(removeFilter);
-	await screen.findByRole('button', { name: 'Save changes' });
-};
-
 /**
  * The Meter tab over the last day: what the workspace ingested in total, then
  * the hourly count and size of log records, of spans, and the metric datapoints
@@ -122,26 +88,3 @@ export const ExplorerWithoutQuickFilters: Story = {
 export const ViewsEmpty: Story = {
 	args: { tab: 'views', savedViews: 0 },
 };
-
-/** The editable quick-filter settings panel, which lives on the Explorer tab. */
-export const QuickFiltersSettings: Story = {
-	args: { tab: 'explorer' },
-	play: openQuickFiltersSettings,
-};
-
-/** Settings with an unsaved filter removal and the fixed action footer. */
-export const QuickFiltersSettingsDirty: Story = {
-	args: { tab: 'explorer' },
-	play: dirtyQuickFiltersSettings,
-};
-
-/**
- * The same panel with a banner above the shell. The banner takes 48px off the
- * layout, so this is the case where the footer used to be pushed off screen:
- * the panel is sized from the filters pane rather than the viewport, which
- * keeps Save changes reachable.
- */
-export const QuickFiltersSettingsWithBanner: Story = {
-	args: { tab: 'explorer', banner: 'trial-expiry' },
-	play: dirtyQuickFiltersSettings,
-};

frontend/src/pages/Support/Support.styles.scss

@@ -1,7 +1,4 @@
 .support-page-container {
-	max-height: 100vh;
-	overflow: hidden;
-
 	.support-page-header {
 		border-bottom: 1px solid var(--l1-border);
 		background: var(--l1-background);

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

@@ -0,0 +1,3 @@
+.hasErrors {
+	color: var(--destructive);
+}

frontend/src/pages/TraceDetailsV3/StripInfo/StripInfo.tsx

@@ -0,0 +1,37 @@
+import StripSeparator from 'container/BottomStrip/components/StripSeparator/StripSeparator';
+import StripTypography from 'container/BottomStrip/components/StripTypography/StripTypography';
+import cx from 'classnames';
+import { ChartNoAxesGantt, TriangleAlert } from '@signozhq/icons';
+
+import styles from './StripInfo.module.scss';
+
+interface StripInfoProps {
+	totalSpansCount: number;
+	totalErrorSpansCount: number;
+}
+
+function StripInfo({
+	totalSpansCount,
+	totalErrorSpansCount,
+}: StripInfoProps): JSX.Element {
+	return (
+		<>
+			<StripTypography prefix={<ChartNoAxesGantt size={13} />}>
+				Spans: {totalSpansCount}
+			</StripTypography>
+			<StripSeparator />
+			<StripTypography
+				prefix={
+					<TriangleAlert
+						size={13}
+						className={cx({ [styles.hasErrors]: totalErrorSpansCount > 0 })}
+					/>
+				}
+			>
+				Errors: {totalErrorSpansCount}
+			</StripTypography>
+		</>
+	);
+}
+
+export default StripInfo;

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

@@ -0,0 +1,23 @@
+import { render } from 'tests/test-utils';
+
+import StripInfo from '../StripInfo';
+
+describe('StripInfo', () => {
+	it('shows the span and error counts', () => {
+		const { getByText } = render(
+			<StripInfo totalSpansCount={600} totalErrorSpansCount={4} />,
+		);
+
+		expect(getByText('Spans: 600')).toBeInTheDocument();
+		expect(getByText('Errors: 4')).toBeInTheDocument();
+	});
+
+	it('shows zero counts rather than hiding them', () => {
+		const { getByText } = render(
+			<StripInfo totalSpansCount={0} totalErrorSpansCount={0} />,
+		);
+
+		expect(getByText('Spans: 0')).toBeInTheDocument();
+		expect(getByText('Errors: 0')).toBeInTheDocument();
+	});
+});

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

@@ -1,5 +1,6 @@
 .root {
-	height: calc(100vh);
+	flex: 1;
+	min-height: 0;
 	display: flex;
 	flex-direction: column;
 }

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -14,7 +14,9 @@ import { Collapse } from 'antd';
 import { useDetailsPanel } from 'components/DetailsPanel';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { useBottomStripLeft } from 'container/BottomStrip/useBottomStripLeft';
 import useGetTraceV4 from 'hooks/trace/useGetTraceV4';
+import StripInfo from './StripInfo/StripInfo';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { ResizableBox } from 'periscope/components/ResizableBox';
@@ -144,6 +146,19 @@ function TraceDetailsV3(): JSX.Element {
 
 	const allSpans = traceData?.payload?.spans || [];
 	const totalSpansCount = traceData?.payload?.totalSpansCount || 0;
+	const totalErrorSpansCount = traceData?.payload?.totalErrorSpansCount || 0;
+
+	useBottomStripLeft(
+		useMemo(
+			() => (
+				<StripInfo
+					totalSpansCount={totalSpansCount}
+					totalErrorSpansCount={totalErrorSpansCount}
+				/>
+			),
+			[totalSpansCount, totalErrorSpansCount],
+		),
+	);
 	const isFullDataLoaded =
 		totalSpansCount > 0 && totalSpansCount <= allSpans.length;
 
@@ -441,7 +456,10 @@ function TraceDetailsV3(): JSX.Element {
 																})}
 															>
 																<TriangleAlert size={13} />
-																Errors: {traceData.payload.totalErrorSpansCount ?? 0}
+																Errors:{' '}
+																{traceData.payload.totalErrorSpansCount ?? (
+																	<span className="translate-safe">{0}</span>
+																)}
 															</span>
 														</span>
 													) : null}

frontend/src/pages/TracesFunnelDetails/TracesFunnelDetails.styles.scss

@@ -1,13 +1,24 @@
 .traces-funnel-details {
 	display: flex;
-	// 45px -> height of the tab bar
-	height: calc(100vh - 45px);
+	height: 100%;
 
 	&__steps-config {
 		flex-shrink: 0;
 		width: 600px;
 		border-right: 1px solid var(--l1-border);
+		// Positioning context for the absolute .steps-footer.
 		position: relative;
+		display: flex;
+		flex-direction: column;
+
+		// Scoped here so the modal usage of FunnelConfiguration on trace details
+		// stays in normal flow.
+		.funnel-configuration {
+			flex: 1;
+			min-height: 0;
+			display: flex;
+			flex-direction: column;
+		}
 	}
 	&__steps-results {
 		width: 100%;

frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelConfiguration.styles.scss

@@ -4,14 +4,17 @@
 		flex-direction: column;
 		justify-content: flex-start;
 		&.funnel-details-page {
-			height: calc(
-				100vh - 170px
-			); // 64px bottom bar + 61px configuration header + 45px page navbar
+			flex: 1;
+			min-height: 0;
+			// .steps-footer is absolute against the config column, so its 64px is
+			// reserved rather than laid out.
+			margin-bottom: 64px;
 			overflow: auto;
 		}
 	}
 
 	&__header {
+		flex-shrink: 0;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;

frontend/src/pages/TracesModulePage/stories/TracesModulePage.stories.tsx

@@ -116,29 +116,16 @@ export const QuickFiltersSettings: Story = {
 	play: openQuickFiltersSettings,
 };
 
-const dirtyQuickFiltersSettings = async (): Promise<void> => {
-	await openQuickFiltersSettings();
-	// One Remove per added filter; the first row's is the one clicked.
-	const [removeFilter] = await screen.findAllByRole('button', {
-		name: 'Remove',
-	});
-
-	await userEvent.click(removeFilter);
-	await screen.findByRole('button', { name: 'Save changes' });
-};
-
 /** Settings with an unsaved filter removal and the fixed action footer. */
 export const QuickFiltersSettingsDirty: Story = {
-	play: dirtyQuickFiltersSettings,
-};
+	play: async (): Promise<void> => {
+		await openQuickFiltersSettings();
+		// One Remove per added filter; the first row's is the one clicked.
+		const [removeFilter] = await screen.findAllByRole('button', {
+			name: 'Remove',
+		});
 
-/**
- * The same panel with a banner above the shell. The banner takes 48px off the
- * layout, so this is the case where the footer used to be pushed off screen:
- * the panel is sized from the filters pane rather than the viewport, which
- * keeps Save changes reachable.
- */
-export const QuickFiltersSettingsWithBanner: Story = {
-	args: { banner: 'trial-expiry' },
-	play: dirtyQuickFiltersSettings,
+		await userEvent.click(removeFilter);
+		await screen.findByRole('button', { name: 'Save changes' });
+	},
 };

frontend/src/styles.scss

@@ -813,6 +813,12 @@ body.ai-assistant-panel-open {
 	}
 }
 
+body.bottom-strip-on {
+	.PylonChat-chatWindowFrameContainer {
+		bottom: var(--bottom-strip-height, 0px) !important;
+	}
+}
+
 [role='tab'] {
 	color: var(--foreground) !important;
 }

pkg/apiserver/signozapiserver/alertmanager.go

@@ -145,7 +145,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			SuccessStatusCode:   http.StatusCreated,
 			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusConflict},
 			Deprecated:          false,
-			Stability:           handler.StabilityDevelopment,
 			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceNotificationChannel.Scope(coretypes.VerbCreate)}),
 		},
 		handler.WithResourceDefs(handler.BasicResourceDef{
@@ -174,7 +173,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{http.StatusBadRequest},
 			Deprecated:          false,
-			Stability:           handler.StabilityDevelopment,
 			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceNotificationChannel.Scope(coretypes.VerbList)}),
 		},
 		handler.WithResourceDefs(handler.BasicResourceDef{
@@ -201,7 +199,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
 			Deprecated:          false,
-			Stability:           handler.StabilityDevelopment,
 			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceNotificationChannel.Scope(coretypes.VerbRead)}),
 		},
 		handler.WithResourceDefs(handler.BasicResourceDef{
@@ -229,7 +226,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
 			Deprecated:          false,
-			Stability:           handler.StabilityDevelopment,
 			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceNotificationChannel.Scope(coretypes.VerbUpdate)}),
 		},
 		handler.WithResourceDefs(handler.BasicResourceDef{
@@ -257,7 +253,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			SuccessStatusCode:   http.StatusNoContent,
 			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
 			Deprecated:          false,
-			Stability:           handler.StabilityDevelopment,
 			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceNotificationChannel.Scope(coretypes.VerbDelete)}),
 		},
 		handler.WithResourceDefs(handler.BasicResourceDef{
@@ -286,7 +281,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
 			Deprecated:          false,
-			Stability:           handler.StabilityDevelopment,
 			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceNotificationChannel.Scope(coretypes.VerbUpdate)}),
 		},
 		handler.WithResourceDefs(handler.BasicResourceDef{
@@ -314,7 +308,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			SuccessStatusCode:   http.StatusNoContent,
 			ErrorStatusCodes:    []int{http.StatusBadRequest},
 			Deprecated:          false,
-			Stability:           handler.StabilityDevelopment,
 			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceNotificationChannel.Scope(coretypes.VerbCreate)}),
 		},
 		handler.WithResourceDefs(handler.BasicResourceDef{

pkg/apiserver/signozapiserver/ruler.go

@@ -15,26 +15,10 @@ func (provider *provider) addRulerRoutes(router *mux.Router) error {
 		ID:                  "ListRules",
 		Tags:                []string{"rules"},
 		Summary:             "List alert rules",
-		Description:         "This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.",
+		Description:         "This endpoint lists all alert rules with their current evaluation state",
 		Response:            make([]*ruletypes.Rule, 0),
 		ResponseContentType: "application/json",
 		SuccessStatusCode:   http.StatusOK,
-		Deprecated:          true,
-		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
-	})).Methods(http.MethodGet).GetError(); err != nil {
-		return err
-	}
-
-	if err := router.Handle("/api/v3/rules", handler.New(provider.authzMiddleware.ViewAccess(provider.rulerHandler.ListRulesV3), handler.OpenAPIDef{
-		ID:                  "ListRulesV3",
-		Tags:                []string{"rules"},
-		Summary:             "List alert rules (v3)",
-		Description:         "Returns a page of alert rules with their current evaluation state, trimmed to the fields the list page renders. Supports a filter DSL (`query`), a repeated `states` filter applied after the state overlay, sort (`updated_at`/`created_at`/`name`/`state`/`severity`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). In the filter DSL, a non-reserved key is matched as a rule label directly (`team = infra`); a key that collides with a reserved keyword matches either interpretation (negative operators exclude both), and `labels.<key>` targets only the label. The response also carries the org's label pairs and the reserved filter keys for building filter suggestions.",
-		RequestQuery:        new(ruletypes.ListRulesParams),
-		Response:            new(ruletypes.ListableRules),
-		ResponseContentType: "application/json",
-		SuccessStatusCode:   http.StatusOK,
-		ErrorStatusCodes:    []int{http.StatusBadRequest},
 		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
 	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err

pkg/http/handler/handler_test.go

@@ -1,75 +0,0 @@
-package handler
-
-import (
-	"net/http"
-	"testing"
-
-	"github.com/gorilla/mux"
-	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/require"
-	"github.com/swaggest/openapi-go"
-	"github.com/swaggest/openapi-go/openapi3"
-)
-
-type bespokeOpenAPIHandler struct{}
-
-func (bespokeOpenAPIHandler) ServeHTTP(http.ResponseWriter, *http.Request) {}
-
-func (bespokeOpenAPIHandler) ServeOpenAPI(opCtx openapi.OperationContext) {
-	opCtx.SetID("Bespoke")
-	opCtx.AddRespStructure(nil, openapi.WithHTTPStatus(http.StatusOK))
-}
-
-func (bespokeOpenAPIHandler) ResourceDefs() []ResourceDef { return nil }
-
-func TestAttachStabilities(t *testing.T) {
-	router := mux.NewRouter()
-	router.Handle("/development", New(func(http.ResponseWriter, *http.Request) {}, OpenAPIDef{ID: "Development", SuccessStatusCode: http.StatusOK, Stability: StabilityDevelopment})).Methods(http.MethodGet)
-	router.Handle("/beta/{id}", New(func(http.ResponseWriter, *http.Request) {}, OpenAPIDef{ID: "Beta", SuccessStatusCode: http.StatusOK, Stability: StabilityBeta})).Methods(http.MethodPut)
-	router.Handle("/unset", New(func(http.ResponseWriter, *http.Request) {}, OpenAPIDef{ID: "Unset", SuccessStatusCode: http.StatusOK})).Methods(http.MethodGet)
-	router.Handle("/bespoke", bespokeOpenAPIHandler{}).Methods(http.MethodGet)
-
-	reflector := openapi3.NewReflector()
-	collector := NewOpenAPICollector(reflector)
-	require.NoError(t, router.Walk(collector.Walker))
-	collector.AttachStabilities(reflector.Spec)
-
-	testCases := []struct {
-		subtestName            string
-		path                   string
-		method                 string
-		expectedExtensionValue any
-	}{
-		{
-			subtestName:            "development handler",
-			path:                   "/development",
-			method:                 "get",
-			expectedExtensionValue: "development",
-		},
-		{
-			subtestName:            "beta handler with path parameter",
-			path:                   "/beta/{id}",
-			method:                 "put",
-			expectedExtensionValue: "beta",
-		},
-		{
-			subtestName:            "unset handler defaults to alpha",
-			path:                   "/unset",
-			method:                 "get",
-			expectedExtensionValue: "alpha",
-		},
-		{
-			subtestName:            "handler built outside New defaults to alpha",
-			path:                   "/bespoke",
-			method:                 "get",
-			expectedExtensionValue: "alpha",
-		},
-	}
-
-	for _, testCase := range testCases {
-		t.Run(testCase.subtestName, func(t *testing.T) {
-			operation := reflector.Spec.Paths.MapOfPathItemValues[testCase.path].MapOfOperationValues[testCase.method]
-			assert.Equal(t, testCase.expectedExtensionValue, operation.MapOfAnything["x-signoz-stability"])
-		})
-	}
-}

pkg/http/handler/openapi.go

@@ -1,37 +1,14 @@
 package handler
 
 import (
-	"net/http"
 	"reflect"
 
-	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/gorilla/mux"
 	"github.com/swaggest/jsonschema-go"
 	openapigo "github.com/swaggest/openapi-go"
-	"github.com/swaggest/openapi-go/openapi3"
 	"github.com/swaggest/rest/openapi"
 )
 
-const signozStabilityKey string = "x-signoz-stability"
-
-var (
-	StabilityDevelopment = Stability{valuer.NewString("development")}
-	StabilityAlpha       = Stability{valuer.NewString("alpha")}
-	StabilityBeta        = Stability{valuer.NewString("beta")}
-	StabilityStable      = Stability{valuer.NewString("stable")}
-)
-
-// Stability is emitted as the x-signoz-stability extension on every operation; unset means alpha.
-type Stability struct{ valuer.String }
-
-func (stability Stability) StringValue() string {
-	if stability.IsZero() {
-		return StabilityAlpha.String.StringValue()
-	}
-
-	return stability.String.StringValue()
-}
-
 // OpenAPIExample is a named example for an OpenAPI operation.
 type OpenAPIExample struct {
 	Name        string
@@ -55,7 +32,6 @@ type OpenAPIDef struct {
 	SuccessStatusCode   int
 	ErrorStatusCodes    []int
 	Deprecated          bool
-	Stability           Stability
 	SecuritySchemes     []OpenAPISecurityScheme
 }
 
@@ -66,16 +42,14 @@ type OpenAPISecurityScheme struct {
 
 // OpenAPICollector is a collector for OpenAPI operations.
 type OpenAPICollector struct {
-	collector   *openapi.Collector
-	stabilities map[operationKey]Stability
+	collector *openapi.Collector
 }
 
 func NewOpenAPICollector(reflector openapigo.Reflector) *OpenAPICollector {
 	c := openapi.NewCollector(reflector)
 
 	return &OpenAPICollector{
-		collector:   c,
-		stabilities: make(map[operationKey]Stability),
+		collector: c,
 	}
 }
 
@@ -103,9 +77,6 @@ func (c *OpenAPICollector) Walker(route *mux.Route, _ *mux.Router, _ []*mux.Rout
 			if err := c.collector.CollectOperation(method, path, c.collect(method, path, handler.ServeOpenAPI)); err != nil {
 				return err
 			}
-			if err := c.recordStability(method, path, httpHandler); err != nil {
-				return err
-			}
 		}
 		return nil
 	}
@@ -113,17 +84,6 @@ func (c *OpenAPICollector) Walker(route *mux.Route, _ *mux.Router, _ []*mux.Rout
 	return nil
 }
 
-// AttachStabilities stamps every operation in spec, so handlers built outside New
-// carry the unset stability rather than none.
-func (c *OpenAPICollector) AttachStabilities(spec *openapi3.Spec) {
-	for path, pathItem := range spec.Paths.MapOfPathItemValues {
-		for method, operation := range pathItem.MapOfOperationValues {
-			operation.WithMapOfAnythingItem(signozStabilityKey, c.stabilities[operationKey{method: method, path: path}].StringValue())
-			pathItem.MapOfOperationValues[method] = operation
-		}
-	}
-}
-
 func (c *OpenAPICollector) collect(method string, path string, serveOpenAPIFunc ServeOpenAPIFunc) func(oc openapigo.OperationContext) error {
 	return func(oc openapigo.OperationContext) error {
 		// Serve the OpenAPI documentation for the handler
@@ -157,23 +117,3 @@ func (c *OpenAPICollector) collect(method string, path string, serveOpenAPIFunc
 		return nil
 	}
 }
-
-func (c *OpenAPICollector) recordStability(method string, path string, httpHandler http.Handler) error {
-	generic, ok := httpHandler.(*handler)
-	if !ok {
-		return nil
-	}
-
-	cleanMethod, cleanPath, _, err := openapigo.SanitizeMethodPath(method, path)
-	if err != nil {
-		return err
-	}
-
-	c.stabilities[operationKey{method: cleanMethod, path: cleanPath}] = generic.openAPIDef.Stability
-	return nil
-}
-
-type operationKey struct {
-	method string
-	path   string
-}

pkg/query-service/rules/filterquery.go

@@ -1,20 +0,0 @@
-package rules
-
-import (
-	"strings"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/parser/filterquery/sqlcompiler"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/types/ruletypes"
-)
-
-// Compile wraps compiler errors in the rules list filter error code.
-func CompileListFilter(query string, formatter sqlstore.SQLFormatter) (*sqlcompiler.Compiled, error) {
-	compiled, errs := sqlcompiler.Compile(query, formatter, ruleFieldResolver{})
-	if len(errs) > 0 {
-		return nil, errors.NewInvalidInputf(ruletypes.ErrCodeRuleListFilterInvalid,
-			"invalid filter query: %s", strings.Join(errs, "; "))
-	}
-	return compiled, nil
-}

pkg/query-service/rules/filterquery_resolver.go

@@ -1,196 +0,0 @@
-package rules
-
-import (
-	"fmt"
-	"slices"
-	"strings"
-
-	grammar "github.com/SigNoz/signoz/pkg/parser/filterquery/grammar"
-	"github.com/SigNoz/signoz/pkg/parser/filterquery/sqlcompiler"
-	qbtypesv5 "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/SigNoz/signoz/pkg/types/ruletypes"
-)
-
-const (
-	ruleDataColumn  = "rule.data"
-	ruleLabelsField = "labels"
-	nameJSONPath    = "$.alert"
-	descriptionPath = "$.description"
-	labelsJSONPath  = "$.labels"
-	alertTypePath   = "$.alertType"
-	ruleTypePath    = "$.ruleType"
-)
-
-// ruleFieldResolver maps rule list DSL keys; a non-reserved key is a case-sensitive label lookup.
-type ruleFieldResolver struct{}
-
-func (r ruleFieldResolver) ResolveComparison(v *sqlcompiler.Visitor, rawKey string, operation qbtypesv5.FilterOperator, ctx *grammar.ComparisonContext) string {
-	key := strings.ToLower(rawKey)
-
-	// labels.<key> is the explicit way to target only the label on a reserved-key collision.
-	if strings.HasPrefix(key, ruletypes.DSLLabelsKeyPrefix) {
-		labelKey := rawKey[len(ruletypes.DSLLabelsKeyPrefix):]
-		if labelKey == "" {
-			v.AddError("labels filter is missing a key, use labels.<key>")
-			return ""
-		}
-		if _, allowed := ruletypes.LabelsKeyOps[operation]; !allowed {
-			v.AddError("operator %s is not allowed on a labels.<key> filter", sqlcompiler.OperationName(operation))
-			return ""
-		}
-		return r.labelComparison(v, ctx, operation, labelKey)
-	}
-
-	allowedOperations, isReserved := ruletypes.ReservedOps[ruletypes.DSLKey(key)]
-	_, labelAllowed := ruletypes.LabelsKeyOps[operation]
-
-	if !isReserved {
-		if !labelAllowed {
-			v.AddError("operator %s is not allowed on the label filter %q", sqlcompiler.OperationName(operation), rawKey)
-			return ""
-		}
-		return r.labelComparison(v, ctx, operation, rawKey)
-	}
-
-	_, reservedAllowed := allowedOperations[operation]
-	// reserved severity is itself the severity-label lookup; an identical spelling would duplicate the predicate
-	if ruletypes.DSLKey(key) == ruletypes.DSLKeySeverity && rawKey == string(ruletypes.DSLKeySeverity) {
-		labelAllowed = false
-	}
-
-	switch {
-	case reservedAllowed && labelAllowed:
-		reservedPredicate := r.resolveReservedKey(v, ctx, operation, ruletypes.DSLKey(key))
-		labelPredicate := r.labelComparison(v, ctx, operation, rawKey)
-		if reservedPredicate == "" || labelPredicate == "" {
-			return ""
-		}
-		// the key matches both the reserved field and a same-named label; a negative term must exclude both
-		if operation.IsNegativeOperator() {
-			return v.Sb.And(reservedPredicate, labelPredicate)
-		}
-		return v.Sb.Or(reservedPredicate, labelPredicate)
-	case reservedAllowed:
-		return r.resolveReservedKey(v, ctx, operation, ruletypes.DSLKey(key))
-	case labelAllowed:
-		return r.labelComparison(v, ctx, operation, rawKey)
-	default:
-		v.AddError("operator %s is not allowed for key %q", sqlcompiler.OperationName(operation), key)
-		return ""
-	}
-}
-
-func (r ruleFieldResolver) resolveReservedKey(v *sqlcompiler.Visitor, ctx *grammar.ComparisonContext, operation qbtypesv5.FilterOperator, key ruletypes.DSLKey) string {
-	switch key {
-	case ruletypes.DSLKeyName:
-		columnExpression := string(v.Formatter.JSONExtractString(ruleDataColumn, nameJSONPath))
-		return v.BuildStringOperation(v.Sb, ctx, operation, columnExpression, string(key))
-	case ruletypes.DSLKeySeverity:
-		// severity is an alias for labels.severity, sharing its missing-label semantics.
-		return r.labelComparison(v, ctx, operation, "severity")
-	case ruletypes.DSLKeyCreatedBy:
-		return v.BuildStringOperation(v.Sb, ctx, operation, "rule.created_by", string(key))
-	case ruletypes.DSLKeyUpdatedBy:
-		return v.BuildStringOperation(v.Sb, ctx, operation, "rule.updated_by", string(key))
-	case ruletypes.DSLKeyCreatedAt:
-		return v.BuildTimestampComparison(ctx, operation, "rule.created_at")
-	case ruletypes.DSLKeyUpdatedAt:
-		return v.BuildTimestampComparison(ctx, operation, "rule.updated_at")
-	case ruletypes.DSLKeyAlertType:
-		return r.enumComparison(v, ctx, operation, key, alertTypePath, alertTypeValues)
-	case ruletypes.DSLKeyRuleType:
-		return r.enumComparison(v, ctx, operation, key, ruleTypePath, ruleTypeValues)
-	}
-	v.AddError("no handler for reserved key %q", key)
-	return ""
-}
-
-// A missing label evaluates as the empty string for every value operator; EXISTS/NOT EXISTS test the raw extraction.
-func (ruleFieldResolver) labelComparison(v *sqlcompiler.Visitor, ctx *grammar.ComparisonContext, operation qbtypesv5.FilterOperator, labelKey string) string {
-	columnExpression := string(v.Formatter.JSONExtractMapValue(ruleDataColumn, ruleLabelsField, labelKey))
-
-	switch operation {
-	case qbtypesv5.FilterOperatorExists:
-		return fmt.Sprintf("%s IS NOT NULL", columnExpression)
-	case qbtypesv5.FilterOperatorNotExists:
-		return fmt.Sprintf("%s IS NULL", columnExpression)
-	}
-
-	keyForError := ruletypes.DSLLabelsKeyPrefix + labelKey
-	columnExpression = fmt.Sprintf("COALESCE(%s, '')", columnExpression)
-	return v.BuildStringOperation(v.Sb, ctx, operation, columnExpression, keyForError)
-}
-
-func (ruleFieldResolver) enumComparison(v *sqlcompiler.Visitor, ctx *grammar.ComparisonContext, operation qbtypesv5.FilterOperator, key ruletypes.DSLKey, jsonPath string, allowedValues []string) string {
-	columnExpression := string(v.Formatter.JSONExtractString(ruleDataColumn, jsonPath))
-
-	var values []string
-	switch operation {
-	case qbtypesv5.FilterOperatorEqual, qbtypesv5.FilterOperatorNotEqual:
-		value, ok := v.ExtractSingleStringValue(ctx, string(key))
-		if !ok {
-			return ""
-		}
-		values = []string{value}
-	case qbtypesv5.FilterOperatorIn, qbtypesv5.FilterOperatorNotIn:
-		list, ok := v.ExtractStringValueList(ctx, string(key))
-		if !ok {
-			return ""
-		}
-		values = list
-	default:
-		v.AddError("operator %s on %q is not implemented", sqlcompiler.OperationName(operation), key)
-		return ""
-	}
-
-	for _, value := range values {
-		if !slices.Contains(allowedValues, value) {
-			v.AddError("invalid value %q for %q, expected one of: %s", value, key, strings.Join(allowedValues, ", "))
-			return ""
-		}
-	}
-
-	arguments := make([]any, len(values))
-	for i, s := range values {
-		arguments[i] = s
-	}
-	switch operation {
-	case qbtypesv5.FilterOperatorEqual:
-		return v.Sb.Equal(columnExpression, arguments[0])
-	case qbtypesv5.FilterOperatorNotEqual:
-		return v.Sb.NotEqual(columnExpression, arguments[0])
-	case qbtypesv5.FilterOperatorNotIn:
-		return v.Sb.NotIn(columnExpression, arguments...)
-	default:
-		return v.Sb.In(columnExpression, arguments...)
-	}
-}
-
-// ResolveFreeText searches name, description and the raw labels JSON (which also matches label keys).
-func (ruleFieldResolver) ResolveFreeText(v *sqlcompiler.Visitor, value string) string {
-	nameColumn := string(v.Formatter.JSONExtractString(ruleDataColumn, nameJSONPath))
-	descriptionColumn := string(v.Formatter.JSONExtractString(ruleDataColumn, descriptionPath))
-	labelsColumn := string(v.Formatter.JSONExtractString(ruleDataColumn, labelsJSONPath))
-
-	return v.Sb.Or(
-		v.BuildFreeTextContains(v.Sb, nameColumn, value),
-		v.BuildFreeTextContains(v.Sb, descriptionColumn, value),
-		v.BuildFreeTextContains(v.Sb, labelsColumn, value),
-	)
-}
-
-var alertTypeValues = func() []string {
-	values := make([]string, 0, 4)
-	for _, value := range (ruletypes.AlertType("")).Enum() {
-		values = append(values, string(value.(ruletypes.AlertType)))
-	}
-	return values
-}()
-
-var ruleTypeValues = func() []string {
-	values := make([]string, 0, 3)
-	for _, value := range (ruletypes.RuleType{}).Enum() {
-		values = append(values, value.(ruletypes.RuleType).StringValue())
-	}
-	return values
-}()

pkg/query-service/rules/filterquery_test.go

@@ -1,488 +0,0 @@
-package rules
-
-import (
-	"strings"
-	"testing"
-	"time"
-
-	"github.com/DATA-DOG/go-sqlmock"
-	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/require"
-
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/sqlstore/sqlstoretest"
-	"github.com/SigNoz/signoz/pkg/types/ruletypes"
-)
-
-type compileCase struct {
-	subtestName              string
-	dslQueryToCompile        string
-	emptyQueryExpected       bool
-	expectedSQL              string
-	expectedArgs             []any
-	expectedErrShouldContain string
-}
-
-func runCompileCases(t *testing.T, cases []compileCase) {
-	t.Helper()
-	for _, c := range cases {
-		t.Run(c.subtestName, func(t *testing.T) {
-			out, err := CompileListFilter(c.dslQueryToCompile, formatter(t))
-
-			if c.expectedErrShouldContain != "" {
-				require.Error(t, err)
-				assert.Contains(t, strings.ToLower(err.Error()), strings.ToLower(c.expectedErrShouldContain))
-				return
-			}
-
-			require.NoError(t, err)
-			if c.emptyQueryExpected {
-				assert.True(t, out.IsEmpty())
-				return
-			}
-			require.NotNil(t, out)
-
-			if c.expectedSQL != "" {
-				assert.Equal(t, normalizeSQL(c.expectedSQL), normalizeSQL(out.SQL))
-			}
-			if c.expectedArgs != nil {
-				require.Len(t, out.Args, len(c.expectedArgs))
-				for i, want := range c.expectedArgs {
-					// Equal instants can differ in *Location, so compare via .Equal() instead of DeepEqual.
-					if wantT, ok := want.(time.Time); ok {
-						gotT, ok := out.Args[i].(time.Time)
-						require.True(t, ok, "arg[%d]: want time.Time, got %T", i, out.Args[i])
-						assert.True(t, wantT.Equal(gotT), "arg[%d]: want %s, got %s", i, wantT, gotT)
-						continue
-					}
-					assert.Equal(t, want, out.Args[i], "arg[%d]", i)
-				}
-			}
-		})
-	}
-}
-
-func TestCompileEmpty(t *testing.T) {
-	runCompileCases(t, []compileCase{
-		{subtestName: "EmptyQuery_Nil", dslQueryToCompile: "", emptyQueryExpected: true},
-		{subtestName: "WhitespaceQuery_Nil", dslQueryToCompile: "   ", emptyQueryExpected: true},
-	})
-}
-
-func TestCompileName(t *testing.T) {
-	runCompileCases(t, []compileCase{
-		{
-			subtestName:       "NameEquals_MatchesReservedOrLabel",
-			dslQueryToCompile: "name = 'payment latency'",
-			expectedSQL:       `(json_extract("rule"."data", '$.alert') = ? OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') = ?)`,
-			expectedArgs:      []any{"payment latency", "payment latency"},
-		},
-		{
-			subtestName:       "NameContains_EscapesWildcardsBothSides",
-			dslQueryToCompile: "name CONTAINS '50%'",
-			expectedSQL:       `(json_extract("rule"."data", '$.alert') LIKE ? ESCAPE '\' OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') LIKE ? ESCAPE '\')`,
-			expectedArgs:      []any{`%50\%%`, `%50\%%`},
-		},
-		{
-			subtestName:       "NameILike",
-			dslQueryToCompile: "name ILIKE 'Prod%'",
-			expectedSQL:       `(lower(json_extract("rule"."data", '$.alert')) LIKE LOWER(?) ESCAPE '\' OR lower(COALESCE(json_extract("rule"."data", '$.labels."name"'), '')) LIKE LOWER(?) ESCAPE '\')`,
-			expectedArgs:      []any{"Prod%", "Prod%"},
-		},
-		{
-			subtestName:       "NameInList",
-			dslQueryToCompile: "name IN ['a', 'b']",
-			expectedSQL:       `(json_extract("rule"."data", '$.alert') IN (?, ?) OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') IN (?, ?))`,
-			expectedArgs:      []any{"a", "b", "a", "b"},
-		},
-		{
-			subtestName:       "NameNotEquals_ExcludesBoth",
-			dslQueryToCompile: "name != 'x'",
-			expectedSQL:       `(json_extract("rule"."data", '$.alert') <> ? AND COALESCE(json_extract("rule"."data", '$.labels."name"'), '') <> ?)`,
-			expectedArgs:      []any{"x", "x"},
-		},
-		{
-			subtestName:       "NameExists_LabelOnly",
-			dslQueryToCompile: "name EXISTS",
-			expectedSQL:       `json_extract("rule"."data", '$.labels."name"') IS NOT NULL`,
-		},
-		{
-			subtestName:              "RangeOperatorOnName_Rejected",
-			dslQueryToCompile:        "name > 'x'",
-			expectedErrShouldContain: `operator > is not allowed for key "name"`,
-		},
-		{
-			subtestName:              "RegexpOnName_Rejected",
-			dslQueryToCompile:        "name REGEXP 'x.*'",
-			expectedErrShouldContain: `operator REGEXP is not allowed for key "name"`,
-		},
-	})
-}
-
-func TestCompileSeverityAndLabels(t *testing.T) {
-	runCompileCases(t, []compileCase{
-		{
-			subtestName:       "SeverityEquals_TargetsLabelsMap",
-			dslQueryToCompile: "severity = 'critical'",
-			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') = ?`,
-			expectedArgs:      []any{"critical"},
-		},
-		{
-			subtestName:       "SeverityNotEquals_MissingLabelAsEmptyString",
-			dslQueryToCompile: "severity != 'critical'",
-			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') <> ?`,
-			expectedArgs:      []any{"critical"},
-		},
-		{
-			subtestName:       "SeverityNotEqualsEmpty_ExcludesRulesWithoutSeverity",
-			dslQueryToCompile: "severity != ''",
-			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') <> ?`,
-			expectedArgs:      []any{""},
-		},
-		{
-			subtestName:       "SeverityExists_ThroughAlias",
-			dslQueryToCompile: "severity EXISTS",
-			expectedSQL:       `json_extract("rule"."data", '$.labels."severity"') IS NOT NULL`,
-		},
-		{
-			subtestName:       "SeverityNotExists_ThroughAlias",
-			dslQueryToCompile: "severity NOT EXISTS",
-			expectedSQL:       `json_extract("rule"."data", '$.labels."severity"') IS NULL`,
-		},
-		{
-			subtestName:       "LabelEquals",
-			dslQueryToCompile: "labels.team = 'infra'",
-			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."team"'), '') = ?`,
-			expectedArgs:      []any{"infra"},
-		},
-		{
-			subtestName:       "DottedLabelKey_OneMapEntry",
-			dslQueryToCompile: "labels.k8s.cluster = 'prod-1'",
-			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."k8s.cluster"'), '') = ?`,
-			expectedArgs:      []any{"prod-1"},
-		},
-		{
-			subtestName:       "LabelKey_CaseSensitive",
-			dslQueryToCompile: "labels.Team = 'infra'",
-			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."Team"'), '') = ?`,
-			expectedArgs:      []any{"infra"},
-		},
-		{
-			subtestName:       "LabelExists",
-			dslQueryToCompile: "labels.team EXISTS",
-			expectedSQL:       `json_extract("rule"."data", '$.labels."team"') IS NOT NULL`,
-		},
-		{
-			subtestName:       "LabelNotExists",
-			dslQueryToCompile: "labels.team NOT EXISTS",
-			expectedSQL:       `json_extract("rule"."data", '$.labels."team"') IS NULL`,
-		},
-		{
-			subtestName:       "LabelNotContains_IncludesLabelLessRules",
-			dslQueryToCompile: "labels.team NOT CONTAINS 'infra'",
-			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."team"'), '') NOT LIKE ? ESCAPE '\'`,
-			expectedArgs:      []any{"%infra%"},
-		},
-		{
-			subtestName:       "LabelNotIn_IncludesLabelLessRules",
-			dslQueryToCompile: "labels.team NOT IN ['a', 'b']",
-			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."team"'), '') NOT IN (?, ?)`,
-			expectedArgs:      []any{"a", "b"},
-		},
-	})
-}
-
-func TestCompileEnums(t *testing.T) {
-	runCompileCases(t, []compileCase{
-		{
-			subtestName:       "AlertTypeEquals_MatchesEnumOrLabel",
-			dslQueryToCompile: "alert_type = 'LOGS_BASED_ALERT'",
-			expectedSQL:       `(json_extract("rule"."data", '$.alertType') = ? OR COALESCE(json_extract("rule"."data", '$.labels."alert_type"'), '') = ?)`,
-			expectedArgs:      []any{"LOGS_BASED_ALERT", "LOGS_BASED_ALERT"},
-		},
-		{
-			subtestName:       "RuleTypeInList",
-			dslQueryToCompile: "rule_type IN ['threshold_rule', 'promql_rule']",
-			expectedSQL:       `(json_extract("rule"."data", '$.ruleType') IN (?, ?) OR COALESCE(json_extract("rule"."data", '$.labels."rule_type"'), '') IN (?, ?))`,
-			expectedArgs:      []any{"threshold_rule", "promql_rule", "threshold_rule", "promql_rule"},
-		},
-		{
-			subtestName:              "InvalidAlertTypeValue_Rejected",
-			dslQueryToCompile:        "alert_type = 'bogus'",
-			expectedErrShouldContain: `invalid value "bogus" for "alert_type"`,
-		},
-		{
-			subtestName:       "ContainsOnRuleType_LabelOnly",
-			dslQueryToCompile: "rule_type CONTAINS 'thresh'",
-			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."rule_type"'), '') LIKE ? ESCAPE '\'`,
-			expectedArgs:      []any{"%thresh%"},
-		},
-	})
-}
-
-func TestCompileAuditColumns(t *testing.T) {
-	createdAt, err := time.Parse(time.RFC3339, "2026-01-02T15:04:05Z")
-	require.NoError(t, err)
-	updatedFrom, err := time.Parse(time.RFC3339, "2026-02-01T00:00:00Z")
-	require.NoError(t, err)
-	updatedTo, err := time.Parse(time.RFC3339, "2026-03-01T00:00:00Z")
-	require.NoError(t, err)
-
-	runCompileCases(t, []compileCase{
-		{
-			subtestName:       "CreatedByEquals_MatchesColumnOrLabel",
-			dslQueryToCompile: "created_by = 'nikhil@signoz.io'",
-			expectedSQL:       `(rule.created_by = ? OR COALESCE(json_extract("rule"."data", '$.labels."created_by"'), '') = ?)`,
-			expectedArgs:      []any{"nikhil@signoz.io", "nikhil@signoz.io"},
-		},
-		{
-			subtestName:       "CreatedAtRange",
-			dslQueryToCompile: "created_at >= '2026-01-02T15:04:05Z'",
-			expectedSQL:       `rule.created_at >= ?`,
-			expectedArgs:      []any{createdAt},
-		},
-		{
-			subtestName:       "UpdatedAtBetween",
-			dslQueryToCompile: "updated_at BETWEEN '2026-02-01T00:00:00Z' AND '2026-03-01T00:00:00Z'",
-			expectedSQL:       `rule.updated_at BETWEEN ? AND ?`,
-			expectedArgs:      []any{updatedFrom, updatedTo},
-		},
-		{
-			subtestName:              "NonTimestampOnCreatedAt_Rejected",
-			dslQueryToCompile:        "created_at >= 'yesterday'",
-			expectedErrShouldContain: "invalid RFC3339 timestamp",
-		},
-	})
-}
-
-func TestCompileFreeText(t *testing.T) {
-	runCompileCases(t, []compileCase{
-		{
-			subtestName:       "BareWord_SearchesNameDescriptionLabels",
-			dslQueryToCompile: "payment",
-			expectedSQL: `(lower(COALESCE(json_extract("rule"."data", '$.alert'), '')) LIKE LOWER(?) ESCAPE '\' ` +
-				`OR lower(COALESCE(json_extract("rule"."data", '$.description'), '')) LIKE LOWER(?) ESCAPE '\' ` +
-				`OR lower(COALESCE(json_extract("rule"."data", '$.labels'), '')) LIKE LOWER(?) ESCAPE '\')`,
-			expectedArgs: []any{"%payment%", "%payment%", "%payment%"},
-		},
-	})
-}
-
-func TestCompileComposition(t *testing.T) {
-	runCompileCases(t, []compileCase{
-		{
-			subtestName:       "AndOfLabelAndColumn",
-			dslQueryToCompile: "labels.team = 'infra' AND created_by = 'x'",
-			expectedSQL: `(COALESCE(json_extract("rule"."data", '$.labels."team"'), '') = ? ` +
-				`AND (rule.created_by = ? OR COALESCE(json_extract("rule"."data", '$.labels."created_by"'), '') = ?))`,
-			expectedArgs: []any{"infra", "x", "x"},
-		},
-		{
-			subtestName:       "Not_WrapsInnerPredicate",
-			dslQueryToCompile: "NOT (name = 'x')",
-			expectedSQL:       `NOT ((json_extract("rule"."data", '$.alert') = ? OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') = ?))`,
-			expectedArgs:      []any{"x", "x"},
-		},
-		{
-			subtestName:       "OrOfNameAndSeverity",
-			dslQueryToCompile: "name CONTAINS 'pay' OR severity = 'critical'",
-			expectedSQL: `((json_extract("rule"."data", '$.alert') LIKE ? ESCAPE '\' OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') LIKE ? ESCAPE '\') ` +
-				`OR COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') = ?)`,
-			expectedArgs: []any{"%pay%", "%pay%", "critical"},
-		},
-	})
-}
-
-func TestCompileComplexExamples(t *testing.T) {
-	runCompileCases(t, []compileCase{
-		{
-			subtestName: "NameContains_LabelEquals_SeverityIn_CreatedByNotEquals",
-			dslQueryToCompile: `name CONTAINS 'latency' AND labels.team = 'payments' ` +
-				`AND severity IN ['critical', 'error'] AND created_by != 'ops@signoz.io'`,
-			expectedSQL: `((json_extract("rule"."data", '$.alert') LIKE ? ESCAPE '\' OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') LIKE ? ESCAPE '\') ` +
-				`AND COALESCE(json_extract("rule"."data", '$.labels."team"'), '') = ? ` +
-				`AND COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') IN (?, ?) ` +
-				`AND (rule.created_by <> ? AND COALESCE(json_extract("rule"."data", '$.labels."created_by"'), '') <> ?))`,
-			expectedArgs: []any{"%latency%", "%latency%", "payments", "critical", "error", "ops@signoz.io", "ops@signoz.io"},
-		},
-		{
-			subtestName: "NestedOrAnd_WithParens",
-			dslQueryToCompile: `(labels.env IN ['prod', 'staging'] OR name LIKE '%prod%') ` +
-				`AND (severity = 'critical' OR labels.team EXISTS)`,
-			expectedSQL: `((COALESCE(json_extract("rule"."data", '$.labels."env"'), '') IN (?, ?) ` +
-				`OR (json_extract("rule"."data", '$.alert') LIKE ? ESCAPE '\' OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') LIKE ? ESCAPE '\')) ` +
-				`AND (COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') = ? ` +
-				`OR json_extract("rule"."data", '$.labels."team"') IS NOT NULL))`,
-			expectedArgs: []any{"prod", "staging", "%prod%", "%prod%", "critical"},
-		},
-		{
-			subtestName:       "NotOverGroup_AndedWithEnum",
-			dslQueryToCompile: `NOT (labels.team = 'infra' OR name CONTAINS 'cpu') AND alert_type = 'METRIC_BASED_ALERT'`,
-			expectedSQL: `(NOT ((COALESCE(json_extract("rule"."data", '$.labels."team"'), '') = ? ` +
-				`OR (json_extract("rule"."data", '$.alert') LIKE ? ESCAPE '\' OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') LIKE ? ESCAPE '\'))) ` +
-				`AND (json_extract("rule"."data", '$.alertType') = ? OR COALESCE(json_extract("rule"."data", '$.labels."alert_type"'), '') = ?))`,
-			expectedArgs: []any{"infra", "%cpu%", "%cpu%", "METRIC_BASED_ALERT", "METRIC_BASED_ALERT"},
-		},
-		{
-			subtestName: "FreeText_ThreeLevelNesting_Timestamp",
-			dslQueryToCompile: `prod AND (name ILIKE '%pay%' ` +
-				`OR (labels.team != 'infra' AND updated_at > '2026-01-02T15:04:05Z'))`,
-			expectedSQL: `((lower(COALESCE(json_extract("rule"."data", '$.alert'), '')) LIKE LOWER(?) ESCAPE '\' ` +
-				`OR lower(COALESCE(json_extract("rule"."data", '$.description'), '')) LIKE LOWER(?) ESCAPE '\' ` +
-				`OR lower(COALESCE(json_extract("rule"."data", '$.labels'), '')) LIKE LOWER(?) ESCAPE '\') ` +
-				`AND ((lower(json_extract("rule"."data", '$.alert')) LIKE LOWER(?) ESCAPE '\' ` +
-				`OR lower(COALESCE(json_extract("rule"."data", '$.labels."name"'), '')) LIKE LOWER(?) ESCAPE '\') ` +
-				`OR (COALESCE(json_extract("rule"."data", '$.labels."team"'), '') <> ? AND rule.updated_at > ?)))`,
-			expectedArgs: []any{"%prod%", "%prod%", "%prod%", "%pay%", "%pay%", "infra",
-				time.Date(2026, 1, 2, 15, 4, 5, 0, time.UTC)},
-		},
-	})
-}
-
-func TestCompileBareLabelKeys(t *testing.T) {
-	runCompileCases(t, []compileCase{
-		{
-			subtestName:       "BareKey_LabelMatch",
-			dslQueryToCompile: "team = 'infra'",
-			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."team"'), '') = ?`,
-			expectedArgs:      []any{"infra"},
-		},
-		{
-			subtestName:       "BareKey_CaseSensitive",
-			dslQueryToCompile: "Team CONTAINS 'inf'",
-			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."Team"'), '') LIKE ? ESCAPE '\'`,
-			expectedArgs:      []any{"%inf%"},
-		},
-		{
-			subtestName:       "BareKeyExists",
-			dslQueryToCompile: "env EXISTS",
-			expectedSQL:       `json_extract("rule"."data", '$.labels."env"') IS NOT NULL`,
-		},
-		{
-			subtestName:       "State_LabelLookupNotRuleState",
-			dslQueryToCompile: "state = 'firing'",
-			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."state"'), '') = ?`,
-			expectedArgs:      []any{"firing"},
-		},
-	})
-}
-
-func TestCompileReservedLabelCollisions(t *testing.T) {
-	runCompileCases(t, []compileCase{
-		{
-			subtestName:       "UppercaseReservedKey_MatchesReservedOrExactCaseLabel",
-			dslQueryToCompile: "NAME = 'x'",
-			expectedSQL:       `(json_extract("rule"."data", '$.alert') = ? OR COALESCE(json_extract("rule"."data", '$.labels."NAME"'), '') = ?)`,
-			expectedArgs:      []any{"x", "x"},
-		},
-		{
-			subtestName:       "SeverityExactSpelling_SinglePredicate",
-			dslQueryToCompile: "severity = 'critical'",
-			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') = ?`,
-			expectedArgs:      []any{"critical"},
-		},
-		{
-			subtestName:       "SeverityDifferentCase_MatchesBothLabelSpellings",
-			dslQueryToCompile: "Severity = 'critical'",
-			expectedSQL: `(COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') = ? ` +
-				`OR COALESCE(json_extract("rule"."data", '$.labels."Severity"'), '') = ?)`,
-			expectedArgs: []any{"critical", "critical"},
-		},
-		{
-			subtestName:       "RangeOperator_ReservedOnly",
-			dslQueryToCompile: "created_at >= '2026-01-02T15:04:05Z'",
-			expectedSQL:       `rule.created_at >= ?`,
-			expectedArgs:      []any{time.Date(2026, 1, 2, 15, 4, 5, 0, time.UTC)},
-		},
-		{
-			subtestName:       "LabelsPrefix_LabelOnlyOnCollision",
-			dslQueryToCompile: "labels.name = 'x'",
-			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."name"'), '') = ?`,
-			expectedArgs:      []any{"x"},
-		},
-		{
-			subtestName:       "NotIn_ExcludesBoth",
-			dslQueryToCompile: "created_by NOT IN ['a', 'b']",
-			expectedSQL: `(rule.created_by NOT IN (?, ?) ` +
-				`AND COALESCE(json_extract("rule"."data", '$.labels."created_by"'), '') NOT IN (?, ?))`,
-			expectedArgs: []any{"a", "b", "a", "b"},
-		},
-	})
-}
-
-func TestCompileErrors(t *testing.T) {
-	runCompileCases(t, []compileCase{
-		{
-			subtestName:              "RangeOperatorOnBareLabelKey_Rejected",
-			dslQueryToCompile:        "team > 'infra'",
-			expectedErrShouldContain: `operator > is not allowed on the label filter "team"`,
-		},
-		{
-			subtestName:              "SyntaxError_SurfacesPosition",
-			dslQueryToCompile:        "created_by ==== (((",
-			expectedErrShouldContain: "syntax error",
-		},
-		{
-			subtestName:              "LikeDanglingEscape_Rejected",
-			dslQueryToCompile:        `name LIKE 'prod\\'`,
-			expectedErrShouldContain: "must not end with an unescaped backslash",
-		},
-		{
-			subtestName:              "ILikeDanglingEscape_Rejected",
-			dslQueryToCompile:        `name ILIKE '%\\'`,
-			expectedErrShouldContain: "must not end with an unescaped backslash",
-		},
-		{
-			subtestName:              "LabelLikeDanglingEscape_Rejected",
-			dslQueryToCompile:        `labels.team NOT LIKE 'infra\\'`,
-			expectedErrShouldContain: "must not end with an unescaped backslash",
-		},
-	})
-}
-
-func TestCompileTrailingLiteralBackslash(t *testing.T) {
-	runCompileCases(t, []compileCase{
-		{
-			subtestName:       "EscapedTrailingBackslash_Compiles",
-			dslQueryToCompile: `name LIKE '%\\\\'`,
-			expectedSQL:       `(json_extract("rule"."data", '$.alert') LIKE ? ESCAPE '\' OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') LIKE ? ESCAPE '\')`,
-			expectedArgs:      []any{`%\\`, `%\\`},
-		},
-	})
-}
-
-// Guards that every ruletypes.ReservedOps key has a case in resolveReservedKey.
-func TestCompileReservedKeysAllHandled(t *testing.T) {
-	sampleQueries := map[ruletypes.DSLKey]string{
-		ruletypes.DSLKeyName:      "name = 'x'",
-		ruletypes.DSLKeySeverity:  "severity = 'critical'",
-		ruletypes.DSLKeyCreatedBy: "created_by = 'x'",
-		ruletypes.DSLKeyUpdatedBy: "updated_by = 'x'",
-		ruletypes.DSLKeyCreatedAt: "created_at >= '2026-01-02T15:04:05Z'",
-		ruletypes.DSLKeyUpdatedAt: "updated_at >= '2026-01-02T15:04:05Z'",
-		ruletypes.DSLKeyAlertType: "alert_type = 'METRIC_BASED_ALERT'",
-		ruletypes.DSLKeyRuleType:  "rule_type = 'threshold_rule'",
-	}
-
-	for key := range ruletypes.ReservedOps {
-		query, ok := sampleQueries[key]
-		require.True(t, ok, "no sample query for reserved key %q, add one", key)
-
-		out, err := CompileListFilter(query, formatter(t))
-		require.NoError(t, err, "reserved key %q failed to compile", key)
-		assert.False(t, out.IsEmpty(), "reserved key %q compiled to empty SQL", key)
-	}
-}
-
-func formatter(t *testing.T) sqlstore.SQLFormatter {
-	t.Helper()
-	p := sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual)
-	return p.Formatter()
-}
-
-func normalizeSQL(s string) string {
-	s = strings.Join(strings.Fields(s), " ")
-	s = strings.ReplaceAll(s, "( ", "(")
-	s = strings.ReplaceAll(s, " )", ")")
-	return s
-}

pkg/query-service/rules/manager.go

@@ -851,8 +851,6 @@ func (m *Manager) ListRuleStates(ctx context.Context) (*ruletypes.GettableRules,
 	// initiate response object
 	resp := make([]*ruletypes.GettableRule, 0)
 
-	stateByRuleID := m.snapshotRuleStates()
-
 	for _, s := range storedRules {
 
 		ruleResponse := ruletypes.GettableRule{}
@@ -865,11 +863,11 @@ func (m *Manager) ListRuleStates(ctx context.Context) (*ruletypes.GettableRules,
 		ruleResponse.Id = s.ID.StringValue()
 
 		// fetch state of rule from memory
-		if state, ok := stateByRuleID[ruleResponse.Id]; !ok {
+		if rm, ok := m.rules[ruleResponse.Id]; !ok {
 			ruleResponse.State = ruletypes.StateDisabled
 			ruleResponse.Disabled = true
 		} else {
-			ruleResponse.State = state
+			ruleResponse.State = rm.State()
 		}
 		ruleResponse.CreatedAt = s.CreatedAt
 		ruleResponse.CreatedBy = &s.CreatedBy
@@ -881,71 +879,6 @@ func (m *Manager) ListRuleStates(ctx context.Context) (*ruletypes.GettableRules,
 	return &ruletypes.GettableRules{Rules: resp}, nil
 }
 
-// ListRules' total counts what is pageable after corrupt-row drops and the states filter.
-func (m *Manager) ListRules(ctx context.Context, params *ruletypes.ListRulesParams) (*ruletypes.ListableRules, error) {
-	// validated here too, not just in the handler: non-API callers reach the manager directly
-	if err := params.Validate(); err != nil {
-		return nil, err
-	}
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		return nil, err
-	}
-
-	states, err := params.GetAlertStates()
-	if err != nil {
-		return nil, err
-	}
-	stateFilter := make(map[ruletypes.AlertState]struct{}, len(states))
-	for _, state := range states {
-		stateFilter[state] = struct{}{}
-	}
-
-	compiled, err := CompileListFilter(params.Query, m.sqlstore.Formatter())
-	if err != nil {
-		return nil, err
-	}
-
-	storedRules, err := m.ruleStore.GetStoredRulesMatching(ctx, claims.OrgID, compiled.SQL, compiled.Args)
-	if err != nil {
-		return nil, err
-	}
-
-	stateByRuleID := m.snapshotRuleStates()
-
-	listableRules, errByRuleID := ruletypes.NewListableRulesFromStorableRules(storedRules, stateByRuleID, stateFilter)
-	for ruleID, err := range errByRuleID {
-		m.logger.ErrorContext(ctx, "failed to unmarshal rule from db", slog.String("rule.id", ruleID), errors.Attr(err))
-	}
-
-	total := int64(len(listableRules))
-	ruletypes.SortListableRules(listableRules, params.Sort, params.Order)
-
-	start := min(params.Offset, len(listableRules))
-	end := min(start+params.Limit, len(listableRules))
-	currentPageRules := listableRules[start:end]
-
-	rawLabels, err := m.ruleStore.GetStoredRuleLabels(ctx, claims.OrgID)
-	if err != nil {
-		return nil, err
-	}
-	labelPairs := ruletypes.NewLabelPairsFromRawJSON(rawLabels, ruletypes.MaxListLabelPairs)
-
-	return ruletypes.NewListableRules(currentPageRules, total, labelPairs), nil
-}
-
-func (m *Manager) snapshotRuleStates() map[string]ruletypes.AlertState {
-	m.mtx.RLock()
-	defer m.mtx.RUnlock()
-
-	states := make(map[string]ruletypes.AlertState, len(m.rules))
-	for id, rule := range m.rules {
-		states[id] = rule.State()
-	}
-	return states
-}
-
 func (m *Manager) GetRule(ctx context.Context, id valuer.UUID) (*ruletypes.GettableRule, error) {
 	claims, err := authtypes.ClaimsFromContext(ctx)
 	if err != nil {

pkg/query-service/rules/manager_test.go

@@ -20,7 +20,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/telemetrystore/telemetrystoretest"
 	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
 	"github.com/SigNoz/signoz/pkg/types/metrictypes"
-	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/mock"
@@ -29,17 +28,6 @@ import (
 	cmock "github.com/SigNoz/clickhouse-go-mock"
 )
 
-func TestManager_ListRules_ValidatesParams(t *testing.T) {
-	m, err := NewManager(&ManagerOptions{})
-	require.NoError(t, err)
-
-	_, err = m.ListRules(context.Background(), &ruletypes.ListRulesParams{Limit: -1})
-	require.ErrorContains(t, err, "invalid limit")
-
-	_, err = m.ListRules(context.Background(), &ruletypes.ListRulesParams{States: []string{"bogus"}})
-	require.ErrorContains(t, err, `invalid state "bogus"`)
-}
-
 func TestManager_TestNotification_SendUnmatched_ThresholdRule(t *testing.T) {
 	target := 10.0
 	recovery := 5.0

pkg/querybuilder/exists_expr.go

@@ -94,10 +94,10 @@ func ExistsExpression(columns []*schema.Column, key *telemetrytypes.TelemetryFie
 
 		switch valueType := column.Type.(schema.MapColumnType).ValueType; valueType.GetType() {
 		case schema.ColumnTypeEnumString, schema.ColumnTypeEnumBool, schema.ColumnTypeEnumFloat64:
-			if key.Materialized {
-				return telemetrytypes.FieldKeyToMaterializedExistsCondition(key, exists), nil
-			}
 			leftOperand := fmt.Sprintf("mapContains(%s, %s)", column.Name, clickhousesql.StringLiteral(key.Name))
+			if key.Materialized {
+				leftOperand = telemetrytypes.FieldKeyToMaterializedColumnNameForExists(key)
+			}
 			if exists {
 				return leftOperand, nil
 			}

pkg/ruler/handler.go

@@ -4,7 +4,6 @@ import "net/http"
 
 type Handler interface {
 	ListRules(http.ResponseWriter, *http.Request)
-	ListRulesV3(http.ResponseWriter, *http.Request)
 	GetRuleByID(http.ResponseWriter, *http.Request)
 	CreateRule(http.ResponseWriter, *http.Request)
 	UpdateRuleByID(http.ResponseWriter, *http.Request)

pkg/ruler/ruler.go

@@ -17,9 +17,6 @@ type Ruler interface {
 	// ListRuleStates returns all rules with their current evaluation state.
 	ListRuleStates(ctx context.Context) (*ruletypes.GettableRules, error)
 
-	// ListRules returns a filtered, sorted page of rules with state, plus label pairs and reserved filter keys.
-	ListRules(ctx context.Context, params *ruletypes.ListRulesParams) (*ruletypes.ListableRules, error)
-
 	// GetRule returns a single rule by ID.
 	GetRule(ctx context.Context, id valuer.UUID) (*ruletypes.GettableRule, error)
 

pkg/ruler/rulestore/rulestoretest/rule.go

@@ -64,16 +64,6 @@ func (m *MockSQLRuleStore) GetStoredRules(ctx context.Context, orgID string) ([]
 	return m.ruleStore.GetStoredRules(ctx, orgID)
 }
 
-// GetStoredRulesMatching implements ruletypes.RuleStore - delegates to underlying ruleStore to trigger SQL.
-func (m *MockSQLRuleStore) GetStoredRulesMatching(ctx context.Context, orgID string, filterSQL string, filterArgs []any) ([]*ruletypes.StorableRule, error) {
-	return m.ruleStore.GetStoredRulesMatching(ctx, orgID, filterSQL, filterArgs)
-}
-
-// GetStoredRuleLabels implements ruletypes.RuleStore - delegates to underlying ruleStore to trigger SQL.
-func (m *MockSQLRuleStore) GetStoredRuleLabels(ctx context.Context, orgID string) ([]string, error) {
-	return m.ruleStore.GetStoredRuleLabels(ctx, orgID)
-}
-
 // GetStoredRulesByMetricName implements ruletypes.RuleStore - delegates to underlying ruleStore.
 func (m *MockSQLRuleStore) GetStoredRulesByMetricName(ctx context.Context, orgID string, metricName string) ([]ruletypes.RuleAlert, error) {
 	return m.ruleStore.GetStoredRulesByMetricName(ctx, orgID, metricName)