fix: proper composite query schema

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.116.1
+    image: signoz/signoz:v0.116.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.116.1
+    image: signoz/signoz:v0.116.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.116.1}
+    image: signoz/signoz:${VERSION:-v0.116.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.116.1}
+    image: signoz/signoz:${VERSION:-v0.116.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

ee/licensing/httplicensing/provider.go

@@ -198,10 +198,7 @@ func (provider *provider) Checkout(ctx context.Context, organizationID valuer.UU
 
 	response, err := provider.zeus.GetCheckoutURL(ctx, activeLicense.Key, body)
 	if err != nil {
-		if errors.Ast(err, errors.TypeAlreadyExists) {
-			return nil, errors.WithAdditionalf(err, "checkout has already been completed for this account. Please click 'Refresh Status' to sync your subscription")
-		}
-		return nil, err
+		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to generate checkout session")
 	}
 
 	return &licensetypes.GettableSubscription{RedirectURL: gjson.GetBytes(response, "url").String()}, nil
@@ -220,7 +217,7 @@ func (provider *provider) Portal(ctx context.Context, organizationID valuer.UUID
 
 	response, err := provider.zeus.GetPortalURL(ctx, activeLicense.Key, body)
 	if err != nil {
-		return nil, err
+		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to generate portal session")
 	}
 
 	return &licensetypes.GettableSubscription{RedirectURL: gjson.GetBytes(response, "url").String()}, nil

ee/sqlstore/postgressqlstore/provider.go

@@ -101,7 +101,7 @@ func (provider *provider) WrapNotFoundErrf(err error, code errors.Code, format s
 
 func (provider *provider) WrapAlreadyExistsErrf(err error, code errors.Code, format string, args ...any) error {
 	var pgErr *pgconn.PgError
-	if errors.As(err, &pgErr) && (pgErr.Code == "23505" || pgErr.Code == "23503") {
+	if errors.As(err, &pgErr) && pgErr.Code == "23505" {
 		return errors.Wrapf(err, errors.TypeAlreadyExists, code, format, args...)
 	}
 

frontend/.eslintrc.cjs

@@ -193,16 +193,6 @@ module.exports = {
 				],
 			},
 		],
-		'no-restricted-syntax': [
-			'error',
-			{
-				selector:
-					// TODO: Make this generic on removal of redux
-					"CallExpression[callee.property.name='getState'][callee.object.name=/^use/]",
-				message:
-					'Avoid calling .getState() directly. Export a standalone action from the store instead.',
-			},
-		],
 	},
 	overrides: [
 		{
@@ -227,13 +217,5 @@ module.exports = {
 				'@typescript-eslint/no-unused-vars': 'warn',
 			},
 		},
-		{
-			// Store definition files are the only place .getState() is permitted —
-			// they are the canonical source for standalone action exports.
-			files: ['**/*Store.{ts,tsx}'],
-			rules: {
-				'no-restricted-syntax': 'off',
-			},
-		},
 	],
 };

frontend/jest.config.ts

@@ -24,8 +24,7 @@ const config: Config.InitialOptions = {
 			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
-		'^@signozhq/(?!ui$)([^/]+)$':
-			'<rootDir>/node_modules/@signozhq/$1/dist/$1.js',
+		'^@signozhq/([^/]+)$': '<rootDir>/node_modules/@signozhq/$1/dist/$1.js',
 	},
 	extensionsToTreatAsEsm: ['.ts'],
 	testMatch: ['<rootDir>/src/**/*?(*.)(test).(ts|js)?(x)'],

frontend/package.json

@@ -67,7 +67,6 @@
     "@signozhq/table": "0.3.7",
     "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
-    "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.20.6",
     "@tanstack/react-virtual": "3.11.2",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/src/api/index.ts

@@ -81,8 +81,7 @@ export const interceptorRejected = async (
 				response.config.url !== '/sessions/email_password' &&
 				!(
 					response.config.url === '/sessions' && response.config.method === 'delete'
-				) &&
-				response.config.url !== '/authz/check'
+				)
 			) {
 				try {
 					const accessToken = getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN);

frontend/src/api/interceptors.test.ts

@@ -1,152 +0,0 @@
-import axios, { AxiosHeaders, AxiosResponse } from 'axios';
-
-import { interceptorRejected } from './index';
-
-jest.mock('api/browser/localstorage/get', () => ({
-	__esModule: true,
-	default: jest.fn(() => 'mock-token'),
-}));
-
-jest.mock('api/v2/sessions/rotate/post', () => ({
-	__esModule: true,
-	default: jest.fn(() =>
-		Promise.resolve({
-			data: { accessToken: 'new-token', refreshToken: 'new-refresh' },
-		}),
-	),
-}));
-
-jest.mock('AppRoutes/utils', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('axios', () => {
-	const actualAxios = jest.requireActual('axios');
-	const mockAxios = jest.fn().mockResolvedValue({ data: 'success' });
-
-	return {
-		...actualAxios,
-		default: Object.assign(mockAxios, {
-			...actualAxios.default,
-			isAxiosError: jest.fn().mockReturnValue(true),
-			create: actualAxios.create,
-		}),
-		__esModule: true,
-	};
-});
-
-describe('interceptorRejected', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		((axios as unknown) as jest.Mock).mockResolvedValue({ data: 'success' });
-		((axios.isAxiosError as unknown) as jest.Mock).mockReturnValue(true);
-	});
-
-	it('should preserve array payload structure when retrying a 401 request', async () => {
-		const arrayPayload = [
-			{ relation: 'assignee', object: { resource: { name: 'role' } } },
-			{ relation: 'assignee', object: { resource: { name: 'editor' } } },
-		];
-
-		const error = ({
-			response: {
-				status: 401,
-				config: {
-					url: '/some-endpoint',
-					method: 'POST',
-					baseURL: 'http://localhost/',
-					headers: new AxiosHeaders(),
-					data: JSON.stringify(arrayPayload),
-				},
-			},
-			config: {
-				url: '/some-endpoint',
-				method: 'POST',
-				baseURL: 'http://localhost/',
-				headers: new AxiosHeaders(),
-				data: JSON.stringify(arrayPayload),
-			},
-		} as unknown) as AxiosResponse;
-
-		try {
-			await interceptorRejected(error);
-		} catch {
-			// Expected to reject after retry
-		}
-
-		const mockAxiosFn = (axios as unknown) as jest.Mock;
-		expect(mockAxiosFn.mock.calls.length).toBe(1);
-		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
-		expect(Array.isArray(JSON.parse(retryCallConfig.data))).toBe(true);
-		expect(JSON.parse(retryCallConfig.data)).toEqual(arrayPayload);
-	});
-
-	it('should preserve object payload structure when retrying a 401 request', async () => {
-		const objectPayload = { key: 'value', nested: { data: 123 } };
-
-		const error = ({
-			response: {
-				status: 401,
-				config: {
-					url: '/some-endpoint',
-					method: 'POST',
-					baseURL: 'http://localhost/',
-					headers: new AxiosHeaders(),
-					data: JSON.stringify(objectPayload),
-				},
-			},
-			config: {
-				url: '/some-endpoint',
-				method: 'POST',
-				baseURL: 'http://localhost/',
-				headers: new AxiosHeaders(),
-				data: JSON.stringify(objectPayload),
-			},
-		} as unknown) as AxiosResponse;
-
-		try {
-			await interceptorRejected(error);
-		} catch {
-			// Expected to reject after retry
-		}
-
-		const mockAxiosFn = (axios as unknown) as jest.Mock;
-		expect(mockAxiosFn.mock.calls.length).toBe(1);
-		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
-		expect(JSON.parse(retryCallConfig.data)).toEqual(objectPayload);
-	});
-
-	it('should handle undefined data gracefully when retrying', async () => {
-		const error = ({
-			response: {
-				status: 401,
-				config: {
-					url: '/some-endpoint',
-					method: 'GET',
-					baseURL: 'http://localhost/',
-					headers: new AxiosHeaders(),
-					data: undefined,
-				},
-			},
-			config: {
-				url: '/some-endpoint',
-				method: 'GET',
-				baseURL: 'http://localhost/',
-				headers: new AxiosHeaders(),
-				data: undefined,
-			},
-		} as unknown) as AxiosResponse;
-
-		try {
-			await interceptorRejected(error);
-		} catch {
-			// Expected to reject after retry
-		}
-
-		const mockAxiosFn = (axios as unknown) as jest.Mock;
-		expect(mockAxiosFn.mock.calls.length).toBe(1);
-		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
-		expect(retryCallConfig.data).toBeUndefined();
-	});
-});

frontend/src/assets/UnAuthorized.tsx

@@ -1,14 +1,8 @@
-function UnAuthorized({
-	width = 137,
-	height = 137,
-}: {
-	height?: number;
-	width?: number;
-}): JSX.Element {
+function UnAuthorized(): JSX.Element {
 	return (
 		<svg
-			width={width}
-			height={height}
+			width="137"
+			height="137"
 			viewBox="0 0 137 137"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"

frontend/src/auto-import-registry.d.ts

@@ -30,4 +30,3 @@ import '@signozhq/switch';
 import '@signozhq/table';
 import '@signozhq/toggle-group';
 import '@signozhq/tooltip';
-import '@signozhq/ui';

frontend/src/components/ShiftOverlay/ShiftHoldOverlayController.tsx

@@ -1,13 +1,13 @@
 import { createShortcutActions } from '../../constants/shortcutActions';
 import { useCmdK } from '../../providers/cmdKProvider';
-import { ROLES } from '../../types/roles';
 import { ShiftOverlay } from './ShiftOverlay';
 import { useShiftHoldOverlay } from './useShiftHoldOverlay';
 
+type UserRole = 'ADMIN' | 'EDITOR' | 'AUTHOR' | 'VIEWER';
 export function ShiftHoldOverlayController({
 	userRole,
 }: {
-	userRole: ROLES;
+	userRole: UserRole;
 }): JSX.Element | null {
 	const { open: isCmdKOpen } = useCmdK();
 	const noop = (): void => undefined;

frontend/src/components/ShiftOverlay/ShiftOverlay.tsx

@@ -1,18 +1,18 @@
 import { useMemo } from 'react';
 import ReactDOM from 'react-dom';
-import { ROLES } from 'types/roles';
 
 import { formatShortcut } from './formatShortcut';
 
 import './shiftOverlay.scss';
 
+export type UserRole = 'ADMIN' | 'EDITOR' | 'AUTHOR' | 'VIEWER';
 export type CmdAction = {
 	id: string;
 	name: string;
 	shortcut?: string[];
 	keywords?: string;
 	section?: string;
-	roles?: ROLES[];
+	roles?: UserRole[];
 	perform: () => void;
 };
 
@@ -33,7 +33,7 @@ function Shortcut({ label, keyHint }: ShortcutProps): JSX.Element {
 interface ShiftOverlayProps {
 	visible: boolean;
 	actions: CmdAction[];
-	userRole: ROLES;
+	userRole: UserRole;
 }
 
 export function ShiftOverlay({

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -11,7 +11,6 @@ import {
 import logEvent from 'api/common/logEvent';
 import { useThemeMode } from 'hooks/useDarkMode';
 import history from 'lib/history';
-import { ROLES as UserRole } from 'types/roles';
 
 import { createShortcutActions } from '../../constants/shortcutActions';
 import { useCmdK } from '../../providers/cmdKProvider';
@@ -29,6 +28,7 @@ type CmdAction = {
 	perform: () => void;
 };
 
+type UserRole = 'ADMIN' | 'EDITOR' | 'AUTHOR' | 'VIEWER';
 export function CmdKPalette({
 	userRole,
 }: {

frontend/src/constants/shortcutActions.tsx

@@ -18,7 +18,8 @@ import {
 	TowerControl,
 	Workflow,
 } from 'lucide-react';
-import { ROLES } from 'types/roles';
+
+export type UserRole = 'ADMIN' | 'EDITOR' | 'AUTHOR' | 'VIEWER';
 
 export type CmdAction = {
 	id: string;
@@ -27,7 +28,7 @@ export type CmdAction = {
 	keywords?: string;
 	section?: string;
 	icon?: React.ReactNode;
-	roles?: ROLES[];
+	roles?: UserRole[];
 	perform: () => void;
 };
 

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -3,14 +3,16 @@ import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Card, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
+import { useGetGraphCustomSeries } from 'components/CeleryTask/useGetGraphCustomSeries';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
+import Uplot from 'components/Uplot';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	getCustomFiltersForBarChart,
 	getFormattedEndPointStatusCodeChartData,
 	getStatusCodeBarChartWidgetData,
 	statusCodeWidgetInfo,
 } from 'container/ApiMonitoring/utils';
-import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
 import { handleGraphClick } from 'container/GridCardLayout/GridCard/utils';
 import { useGraphClickToShowButton } from 'container/GridCardLayout/useGraphClickToShowButton';
 import useNavigateToExplorerPages from 'container/GridCardLayout/useNavigateToExplorerPages';
@@ -18,16 +20,15 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { useNotifications } from 'hooks/useNotifications';
+import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { Options } from 'uplot';
 
 import ErrorState from './ErrorState';
-import { prepareStatusCodeBarChartsConfig } from './utils';
 
 function StatusCodeBarCharts({
 	endPointStatusCodeBarChartsDataQuery,
@@ -66,6 +67,13 @@ function StatusCodeBarCharts({
 	} = endPointStatusCodeLatencyBarChartsDataQuery;
 
 	const { startTime: minTime, endTime: maxTime } = timeRange;
+	const legendScrollPositionRef = useRef<{
+		scrollTop: number;
+		scrollLeft: number;
+	}>({
+		scrollTop: 0,
+		scrollLeft: 0,
+	});
 
 	const graphRef = useRef<HTMLDivElement>(null);
 	const dimensions = useResizeObserver(graphRef);
@@ -111,7 +119,6 @@ function StatusCodeBarCharts({
 
 	const navigateToExplorer = useNavigateToExplorer();
 	const { currentQuery } = useQueryBuilder();
-	const { timezone } = useTimezone();
 
 	const navigateToExplorerPages = useNavigateToExplorerPages();
 	const { notifications } = useNotifications();
@@ -127,6 +134,12 @@ function StatusCodeBarCharts({
 		[],
 	);
 
+	const { getCustomSeries } = useGetGraphCustomSeries({
+		isDarkMode,
+		drawStyle: 'bars',
+		colorMapping,
+	});
+
 	const widget = useMemo<Widgets>(
 		() =>
 			getStatusCodeBarChartWidgetData(domainName, {
@@ -180,36 +193,49 @@ function StatusCodeBarCharts({
 		],
 	);
 
-	const config = useMemo(() => {
-		const apiResponse =
-			currentWidgetInfoIndex === 0
-				? formattedEndPointStatusCodeBarChartsDataPayload
-				: formattedEndPointStatusCodeLatencyBarChartsDataPayload;
-		return prepareStatusCodeBarChartsConfig({
-			timezone,
+	const options = useMemo(
+		() =>
+			getUPlotChartOptions({
+				apiResponse:
+					currentWidgetInfoIndex === 0
+						? formattedEndPointStatusCodeBarChartsDataPayload
+						: formattedEndPointStatusCodeLatencyBarChartsDataPayload,
+				isDarkMode,
+				dimensions,
+				yAxisUnit: statusCodeWidgetInfo[currentWidgetInfoIndex].yAxisUnit,
+				softMax: null,
+				softMin: null,
+				minTimeScale: minTime,
+				maxTimeScale: maxTime,
+				panelType: PANEL_TYPES.BAR,
+				onClickHandler: graphClickHandler,
+				customSeries: getCustomSeries,
+				onDragSelect,
+				colorMapping,
+				query: currentQuery,
+				legendScrollPosition: legendScrollPositionRef.current,
+				setLegendScrollPosition: (position: {
+					scrollTop: number;
+					scrollLeft: number;
+				}) => {
+					legendScrollPositionRef.current = position;
+				},
+			}),
+		[
+			minTime,
+			maxTime,
+			currentWidgetInfoIndex,
+			dimensions,
+			formattedEndPointStatusCodeBarChartsDataPayload,
+			formattedEndPointStatusCodeLatencyBarChartsDataPayload,
 			isDarkMode,
-			query: currentQuery,
+			graphClickHandler,
+			getCustomSeries,
 			onDragSelect,
-			onClick: graphClickHandler,
-			apiResponse,
-			minTimeScale: minTime,
-			maxTimeScale: maxTime,
-			yAxisUnit: statusCodeWidgetInfo[currentWidgetInfoIndex].yAxisUnit,
 			colorMapping,
-		});
-	}, [
-		currentQuery,
-		isDarkMode,
-		minTime,
-		maxTime,
-		graphClickHandler,
-		onDragSelect,
-		formattedEndPointStatusCodeBarChartsDataPayload,
-		formattedEndPointStatusCodeLatencyBarChartsDataPayload,
-		timezone,
-		currentWidgetInfoIndex,
-		colorMapping,
-	]);
+			currentQuery,
+		],
+	);
 
 	const renderCardContent = useCallback(
 		(query: UseQueryResult<SuccessResponse<any>, unknown>): JSX.Element => {
@@ -227,20 +253,11 @@ function StatusCodeBarCharts({
 							!query.isLoading && !query?.data?.payload?.data?.result?.length,
 					})}
 				>
-					<BarChart
-						config={config}
-						data={chartData}
-						width={dimensions.width}
-						height={dimensions.height}
-						timezone={timezone}
-						legendConfig={{
-							position: LegendPosition.BOTTOM,
-						}}
-					/>
+					<Uplot options={options as Options} data={chartData} />
 				</div>
 			);
 		},
-		[config, chartData, dimensions, timezone],
+		[options, chartData],
 	);
 
 	return (

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/utils.ts

@@ -1,83 +0,0 @@
-import { ExecStats } from 'api/v5/v5';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
-import { getLegend } from 'lib/dashboard/getQueryResults';
-import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { get } from 'lodash-es';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
-import { v4 } from 'uuid';
-
-export const prepareStatusCodeBarChartsConfig = ({
-	timezone,
-	isDarkMode,
-	query,
-	onDragSelect,
-	onClick,
-	apiResponse,
-	minTimeScale,
-	maxTimeScale,
-	yAxisUnit,
-	colorMapping,
-}: {
-	timezone: Timezone;
-	isDarkMode: boolean;
-	query: Query;
-	onDragSelect: (startTime: number, endTime: number) => void;
-	onClick?: OnClickPluginOpts['onClick'];
-	minTimeScale?: number;
-	maxTimeScale?: number;
-	apiResponse: MetricRangePayloadProps;
-	yAxisUnit?: string;
-	colorMapping?: Record<string, string>;
-}): UPlotConfigBuilder => {
-	const stepIntervals: ExecStats['stepIntervals'] = get(
-		apiResponse,
-		'data.newResult.meta.stepIntervals',
-		{},
-	);
-	const minStepInterval = Math.min(...Object.values(stepIntervals));
-
-	const config = buildBaseConfig({
-		id: v4(),
-		yAxisUnit: yAxisUnit,
-		apiResponse,
-		isDarkMode,
-		onDragSelect,
-		timezone,
-		onClick,
-		minTimeScale,
-		maxTimeScale,
-		stepInterval: minStepInterval,
-		panelType: PANEL_TYPES.BAR,
-	});
-
-	const seriesList: QueryData[] = apiResponse?.data?.result || [];
-	seriesList.forEach((series) => {
-		const baseLabelName = getLabelName(
-			series.metric,
-			series.queryName || '', // query
-			series.legend || '',
-		);
-
-		const label = query ? getLegend(series, query, baseLabelName) : baseLabelName;
-
-		const currentStepInterval = get(stepIntervals, series.queryName, undefined);
-
-		config.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			label: label,
-			colorMapping: colorMapping ?? {},
-			isDarkMode,
-			stepInterval: currentStepInterval,
-		});
-	});
-
-	return config;
-};

frontend/src/container/ApiMonitoring/__tests__/StatusCodeBarCharts.test.tsx

@@ -21,15 +21,10 @@ interface MockQueryResult {
 }
 
 // Mocks
-jest.mock(
-	'container/DashboardContainer/visualization/charts/BarChart/BarChart',
-	() => ({
-		__esModule: true,
-		default: jest
-			.fn()
-			.mockImplementation(() => <div data-testid="bar-chart-mock" />),
-	}),
-);
+jest.mock('components/Uplot', () => ({
+	__esModule: true,
+	default: jest.fn().mockImplementation(() => <div data-testid="uplot-mock" />),
+}));
 
 jest.mock('components/CeleryTask/useGetGraphCustomSeries', () => ({
 	useGetGraphCustomSeries: (): { getCustomSeries: jest.Mock } => ({
@@ -75,24 +70,6 @@ jest.mock('hooks/useNotifications', () => ({
 	useNotifications: (): { notifications: [] } => ({ notifications: [] }),
 }));
 
-jest.mock('providers/Timezone', () => ({
-	useTimezone: (): {
-		timezone: {
-			name: string;
-			value: string;
-			offset: string;
-			searchIndex: string;
-		};
-	} => ({
-		timezone: {
-			name: 'UTC',
-			value: 'UTC',
-			offset: '+00:00',
-			searchIndex: 'UTC',
-		},
-	}),
-}));
-
 jest.mock('lib/uPlotLib/getUplotChartOptions', () => ({
 	getUPlotChartOptions: jest.fn().mockReturnValue({}),
 }));
@@ -342,7 +319,7 @@ describe('StatusCodeBarCharts', () => {
 			mockData.payload,
 			'sum',
 		);
-		expect(screen.getByTestId('bar-chart-mock')).toBeInTheDocument();
+		expect(screen.getByTestId('uplot-mock')).toBeInTheDocument();
 		expect(screen.getByText('Number of calls')).toBeInTheDocument();
 		expect(screen.getByText('Latency')).toBeInTheDocument();
 	});

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -5,7 +5,7 @@ import {
 	LegendPosition,
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
-import UPlotChart from 'lib/uPlotV2/components/UPlotChart/UPlotChart';
+import UPlotChart from 'lib/uPlotV2/components/UPlotChart';
 import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
 import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
 import noop from 'lodash-es/noop';

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -123,7 +123,7 @@ export const prepareUPlotConfig = ({
 			drawStyle: hasSingleValidPoint ? DrawStyle.Points : DrawStyle.Line,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: widget.spanGaps ?? true,
+			spanGaps: true,
 			lineStyle: widget.lineStyle || LineStyle.Solid,
 			lineInterpolation: widget.lineInterpolation || LineInterpolation.Spline,
 			showPoints:

frontend/src/container/Login/Login.styles.scss

@@ -337,6 +337,31 @@
 
 .login-submit-btn {
 	width: 100%;
+	height: 32px;
+	padding: 10px 16px;
+	background: var(--primary);
+	border: none;
+	border-radius: 2px;
+	font-family: Inter, sans-serif;
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1;
+	color: var(--bg-neutral-dark-50);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+
+	&:hover:not(:disabled) {
+		background: var(--primary);
+		opacity: 0.9;
+	}
+
+	&:disabled {
+		background: var(--primary);
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
 }
 
 .lightMode {

frontend/src/container/Login/index.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import { Form, Input, Select, Typography } from 'antd';
 import getVersion from 'api/v1/version/get';
 import get from 'api/v2/sessions/context/get';
@@ -392,9 +392,9 @@ function Login(): JSX.Element {
 							disabled={!isNextButtonEnabled}
 							variant="solid"
 							onClick={onNextHandler}
-							testId="initiate_login"
+							data-testid="initiate_login"
 							className="login-submit-btn"
-							suffix={<ArrowRight />}
+							suffixIcon={<ArrowRight size={12} />}
 						>
 							Next
 						</Button>
@@ -406,10 +406,10 @@ function Login(): JSX.Element {
 							variant="solid"
 							type="submit"
 							color="primary"
-							testId="callback_authn_submit"
+							data-testid="callback_authn_submit"
 							data-attr="signup"
 							className="login-submit-btn"
-							suffix={<ArrowRight />}
+							suffixIcon={<ArrowRight size={12} />}
 						>
 							Sign in with SSO
 						</Button>
@@ -420,11 +420,11 @@ function Login(): JSX.Element {
 							disabled={!isSubmitButtonEnabled}
 							variant="solid"
 							color="primary"
-							testId="password_authn_submit"
+							data-testid="password_authn_submit"
 							type="submit"
 							data-attr="signup"
 							className="login-submit-btn"
-							suffix={<ArrowRight />}
+							suffixIcon={<ArrowRight size={12} />}
 						>
 							Sign in with Password
 						</Button>

frontend/src/container/NewWidget/RightContainer/FillModeSelector.styles.scss

@@ -0,0 +1,21 @@
+.fill-mode-selector {
+	.fill-mode-icon {
+		width: 24px;
+		height: 24px;
+	}
+
+	.fill-mode-label {
+		text-transform: uppercase;
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--bg-vanilla-400);
+	}
+}
+
+.lightMode {
+	.fill-mode-selector {
+		.fill-mode-label {
+			color: var(--bg-ink-400);
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/FillModeSelector.tsx

@@ -0,0 +1,94 @@
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Typography } from 'antd';
+import { FillMode } from 'lib/uPlotV2/config/types';
+
+import './FillModeSelector.styles.scss';
+
+interface FillModeSelectorProps {
+	value: FillMode;
+	onChange: (value: FillMode) => void;
+}
+
+export function FillModeSelector({
+	value,
+	onChange,
+}: FillModeSelectorProps): JSX.Element {
+	return (
+		<section className="fill-mode-selector control-container">
+			<Typography.Text className="section-heading">Fill mode</Typography.Text>
+			<ToggleGroup
+				type="single"
+				value={value}
+				variant="outline"
+				size="lg"
+				onValueChange={(newValue): void => {
+					if (newValue) {
+						onChange(newValue as FillMode);
+					}
+				}}
+			>
+				<ToggleGroupItem value={FillMode.None} aria-label="None" title="None">
+					<svg
+						className="fill-mode-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<rect x="8" y="16" width="32" height="16" stroke="#888" fill="none" />
+					</svg>
+					<Typography.Text className="section-heading-small">None</Typography.Text>
+				</ToggleGroupItem>
+				<ToggleGroupItem value={FillMode.Solid} aria-label="Solid" title="Solid">
+					<svg
+						className="fill-mode-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<rect x="8" y="16" width="32" height="16" fill="#888" />
+					</svg>
+					<Typography.Text className="section-heading-small">Solid</Typography.Text>
+				</ToggleGroupItem>
+				<ToggleGroupItem
+					value={FillMode.Gradient}
+					aria-label="Gradient"
+					title="Gradient"
+				>
+					<svg
+						className="fill-mode-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<defs>
+							<linearGradient id="fill-gradient" x1="0" y1="0" x2="1" y2="0">
+								<stop offset="0%" stopColor="#888" stopOpacity="0.2" />
+								<stop offset="100%" stopColor="#888" stopOpacity="0.8" />
+							</linearGradient>
+						</defs>
+						<rect
+							x="8"
+							y="16"
+							width="32"
+							height="16"
+							fill="url(#fill-gradient)"
+							stroke="#888"
+						/>
+					</svg>
+					<Typography.Text className="section-heading-small">
+						Gradient
+					</Typography.Text>
+				</ToggleGroupItem>
+			</ToggleGroup>
+		</section>
+	);
+}

frontend/src/container/NewWidget/RightContainer/LineInterpolationSelector.styles.scss

@@ -0,0 +1,21 @@
+.line-interpolation-selector {
+	.line-interpolation-icon {
+		width: 24px;
+		height: 24px;
+	}
+
+	.line-interpolation-label {
+		text-transform: uppercase;
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--bg-vanilla-400);
+	}
+}
+
+.lightMode {
+	.line-interpolation-selector {
+		.line-interpolation-label {
+			color: var(--bg-ink-400);
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/LineInterpolationSelector.tsx

@@ -0,0 +1,110 @@
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Typography } from 'antd';
+import { LineInterpolation } from 'lib/uPlotV2/config/types';
+
+import './LineInterpolationSelector.styles.scss';
+
+interface LineInterpolationSelectorProps {
+	value: LineInterpolation;
+	onChange: (value: LineInterpolation) => void;
+}
+
+export function LineInterpolationSelector({
+	value,
+	onChange,
+}: LineInterpolationSelectorProps): JSX.Element {
+	return (
+		<section className="line-interpolation-selector control-container">
+			<Typography.Text className="section-heading">
+				Line interpolation
+			</Typography.Text>
+			<ToggleGroup
+				type="single"
+				value={value}
+				variant="outline"
+				size="lg"
+				onValueChange={(newValue): void => {
+					if (newValue) {
+						onChange(newValue as LineInterpolation);
+					}
+				}}
+			>
+				<ToggleGroupItem
+					value={LineInterpolation.Linear}
+					aria-label="Linear"
+					title="Linear"
+				>
+					<svg
+						className="line-interpolation-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="8" cy="32" r="3" fill="#888" />
+						<circle cx="24" cy="16" r="3" fill="#888" />
+						<circle cx="40" cy="32" r="3" fill="#888" />
+						<path d="M8 32 L24 16 L40 32" stroke="#888" />
+					</svg>
+				</ToggleGroupItem>
+				<ToggleGroupItem value={LineInterpolation.Spline} aria-label="Spline">
+					<svg
+						className="line-interpolation-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="8" cy="32" r="3" fill="#888" />
+						<circle cx="24" cy="16" r="3" fill="#888" />
+						<circle cx="40" cy="32" r="3" fill="#888" />
+						<path d="M8 32 C16 8, 32 8, 40 32" />
+					</svg>
+				</ToggleGroupItem>
+				<ToggleGroupItem
+					value={LineInterpolation.StepAfter}
+					aria-label="Step After"
+				>
+					<svg
+						className="line-interpolation-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="8" cy="32" r="3" fill="#888" />
+						<circle cx="24" cy="16" r="3" fill="#888" />
+						<circle cx="40" cy="32" r="3" fill="#888" />
+						<path d="M8 32 V16 H24 V32 H40" />
+					</svg>
+				</ToggleGroupItem>
+
+				<ToggleGroupItem
+					value={LineInterpolation.StepBefore}
+					aria-label="Step Before"
+				>
+					<svg
+						className="line-interpolation-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="8" cy="32" r="3" fill="#888" />
+						<circle cx="24" cy="16" r="3" fill="#888" />
+						<circle cx="40" cy="32" r="3" fill="#888" />
+						<path d="M8 32 H24 V16 H40 V32" />
+					</svg>
+				</ToggleGroupItem>
+			</ToggleGroup>
+		</section>
+	);
+}

frontend/src/container/NewWidget/RightContainer/LineStyleSelector.styles.scss

@@ -0,0 +1,21 @@
+.line-style-selector {
+	.line-style-icon {
+		width: 24px;
+		height: 24px;
+	}
+
+	.line-style-label {
+		text-transform: uppercase;
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--bg-vanilla-400);
+	}
+}
+
+.lightMode {
+	.line-style-selector {
+		.line-style-label {
+			color: var(--bg-ink-400);
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/LineStyleSelector.tsx

@@ -0,0 +1,66 @@
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Typography } from 'antd';
+import { LineStyle } from 'lib/uPlotV2/config/types';
+
+import './LineStyleSelector.styles.scss';
+
+interface LineStyleSelectorProps {
+	value: LineStyle;
+	onChange: (value: LineStyle) => void;
+}
+
+export function LineStyleSelector({
+	value,
+	onChange,
+}: LineStyleSelectorProps): JSX.Element {
+	return (
+		<section className="line-style-selector control-container">
+			<Typography.Text className="section-heading">Line style</Typography.Text>
+			<ToggleGroup
+				type="single"
+				value={value}
+				variant="outline"
+				size="lg"
+				onValueChange={(newValue): void => {
+					if (newValue) {
+						onChange(newValue as LineStyle);
+					}
+				}}
+			>
+				<ToggleGroupItem value={LineStyle.Solid} aria-label="Solid" title="Solid">
+					<svg
+						className="line-style-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<path d="M8 24 L40 24" />
+					</svg>
+					<Typography.Text className="section-heading-small">Solid</Typography.Text>
+				</ToggleGroupItem>
+				<ToggleGroupItem
+					value={LineStyle.Dashed}
+					aria-label="Dashed"
+					title="Dashed"
+				>
+					<svg
+						className="line-style-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						strokeDasharray="6 4"
+					>
+						<path d="M8 24 L40 24" />
+					</svg>
+					<Typography.Text className="section-heading-small">Dashed</Typography.Text>
+				</ToggleGroupItem>
+			</ToggleGroup>
+		</section>
+	);
+}

frontend/src/container/NewWidget/RightContainer/RightContainer.styles.scss

@@ -4,10 +4,6 @@
 	font-family: 'Space Mono';
 	padding-bottom: 48px;
 
-	.panel-type-select {
-		width: 100%;
-	}
-
 	.section-heading {
 		font-family: 'Space Mono';
 		color: var(--bg-vanilla-400);
@@ -30,6 +26,10 @@
 		letter-spacing: 0.48px;
 	}
 
+	.panel-type-select {
+		width: 100%;
+	}
+
 	.header {
 		display: flex;
 		padding: 14px 14px 14px 12px;
@@ -192,16 +192,6 @@
 			justify-content: space-between;
 		}
 	}
-
-	.context-links {
-		padding: 12px 12px 16px 12px;
-		border-bottom: 1px solid var(--bg-slate-500);
-	}
-
-	.thresholds-section {
-		padding: 12px 12px 16px 12px;
-		border-top: 1px solid var(--bg-slate-500);
-	}
 }
 
 .select-option {
@@ -226,8 +216,7 @@
 .lightMode {
 	.right-container {
 		background-color: var(--bg-vanilla-100);
-		.section-heading,
-		.section-heading-small {
+		.section-heading {
 			color: var(--bg-ink-400);
 		}
 		.header {

frontend/src/container/NewWidget/RightContainer/SettingSections/ChartAppearanceSection/ChartAppearanceSection.tsx

@@ -7,10 +7,9 @@ import {
 } from 'lib/uPlotV2/config/types';
 import { Paintbrush } from 'lucide-react';
 
-import DisconnectValuesSelector from '../../components/DisconnectValuesSelector/DisconnectValuesSelector';
-import FillModeSelector from '../../components/FillModeSelector/FillModeSelector';
-import LineInterpolationSelector from '../../components/LineInterpolationSelector/LineInterpolationSelector';
-import LineStyleSelector from '../../components/LineStyleSelector/LineStyleSelector';
+import { FillModeSelector } from '../../components/FillModeSelector/FillModeSelector';
+import { LineInterpolationSelector } from '../../components/LineInterpolationSelector/LineInterpolationSelector';
+import { LineStyleSelector } from '../../components/LineStyleSelector/LineStyleSelector';
 import SettingsSection from '../../components/SettingsSection/SettingsSection';
 
 interface ChartAppearanceSectionProps {
@@ -22,14 +21,10 @@ interface ChartAppearanceSectionProps {
 	setLineInterpolation: Dispatch<SetStateAction<LineInterpolation>>;
 	showPoints: boolean;
 	setShowPoints: Dispatch<SetStateAction<boolean>>;
-	spanGaps: boolean | number;
-	setSpanGaps: Dispatch<SetStateAction<boolean | number>>;
 	allowFillMode: boolean;
 	allowLineStyle: boolean;
 	allowLineInterpolation: boolean;
 	allowShowPoints: boolean;
-	allowSpanGaps: boolean;
-	stepInterval: number;
 }
 
 export default function ChartAppearanceSection({
@@ -41,14 +36,10 @@ export default function ChartAppearanceSection({
 	setLineInterpolation,
 	showPoints,
 	setShowPoints,
-	spanGaps,
-	setSpanGaps,
 	allowFillMode,
 	allowLineStyle,
 	allowLineInterpolation,
 	allowShowPoints,
-	allowSpanGaps,
-	stepInterval,
 }: ChartAppearanceSectionProps): JSX.Element {
 	return (
 		<SettingsSection title="Chart Appearance" icon={<Paintbrush size={14} />}>
@@ -75,13 +66,6 @@ export default function ChartAppearanceSection({
 					<Switch size="small" checked={showPoints} onChange={setShowPoints} />
 				</section>
 			)}
-			{allowSpanGaps && (
-				<DisconnectValuesSelector
-					value={spanGaps}
-					minValue={stepInterval}
-					onChange={setSpanGaps}
-				/>
-			)}
 		</SettingsSection>
 	);
 }

frontend/src/container/NewWidget/RightContainer/__tests__/RightContainer.test.tsx

@@ -178,8 +178,6 @@ describe('RightContainer - Alerts Section', () => {
 		setLineStyle: jest.fn(),
 		showPoints: false,
 		setShowPoints: jest.fn(),
-		spanGaps: false,
-		setSpanGaps: jest.fn(),
 	};
 
 	beforeEach(() => {

frontend/src/container/NewWidget/RightContainer/components/DisconnectValuesSelector/DisconnectValuesModeToggle.tsx

@@ -1,38 +0,0 @@
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { Typography } from 'antd';
-import { DisconnectedValuesMode } from 'lib/uPlotV2/config/types';
-
-interface DisconnectValuesModeToggleProps {
-	value: DisconnectedValuesMode;
-	onChange: (value: DisconnectedValuesMode) => void;
-}
-
-export default function DisconnectValuesModeToggle({
-	value,
-	onChange,
-}: DisconnectValuesModeToggleProps): JSX.Element {
-	return (
-		<ToggleGroup
-			type="single"
-			value={value}
-			size="lg"
-			onValueChange={(newValue): void => {
-				if (newValue) {
-					onChange(newValue as DisconnectedValuesMode);
-				}
-			}}
-		>
-			<ToggleGroupItem value={DisconnectedValuesMode.Never} aria-label="Never">
-				<Typography.Text className="section-heading-small">Never</Typography.Text>
-			</ToggleGroupItem>
-			<ToggleGroupItem
-				value={DisconnectedValuesMode.Threshold}
-				aria-label="Threshold"
-			>
-				<Typography.Text className="section-heading-small">
-					Threshold
-				</Typography.Text>
-			</ToggleGroupItem>
-		</ToggleGroup>
-	);
-}

frontend/src/container/NewWidget/RightContainer/components/DisconnectValuesSelector/DisconnectValuesSelector.styles.scss

@@ -1,21 +0,0 @@
-.disconnect-values-selector {
-	.disconnect-values-input-wrapper {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-
-		.disconnect-values-threshold-wrapper {
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-			.disconnect-values-threshold-input {
-				max-width: 160px;
-				height: auto;
-				.disconnect-values-threshold-prefix {
-					padding: 0 8px;
-					font-size: 20px;
-				}
-			}
-		}
-	}
-}

frontend/src/container/NewWidget/RightContainer/components/DisconnectValuesSelector/DisconnectValuesSelector.tsx

@@ -1,91 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Typography } from 'antd';
-import { DisconnectedValuesMode } from 'lib/uPlotV2/config/types';
-
-import DisconnectValuesModeToggle from './DisconnectValuesModeToggle';
-import DisconnectValuesThresholdInput from './DisconnectValuesThresholdInput';
-
-import './DisconnectValuesSelector.styles.scss';
-
-const DEFAULT_THRESHOLD_SECONDS = 60;
-
-interface DisconnectValuesSelectorProps {
-	value: boolean | number;
-	minValue: number;
-	onChange: (value: boolean | number) => void;
-}
-
-export default function DisconnectValuesSelector({
-	value,
-	minValue,
-	onChange,
-}: DisconnectValuesSelectorProps): JSX.Element {
-	const [mode, setMode] = useState<DisconnectedValuesMode>(() => {
-		if (typeof value === 'number') {
-			return DisconnectedValuesMode.Threshold;
-		}
-		return DisconnectedValuesMode.Never;
-	});
-	const [thresholdSeconds, setThresholdSeconds] = useState<number>(
-		typeof value === 'number' ? value : minValue ?? DEFAULT_THRESHOLD_SECONDS,
-	);
-
-	useEffect(() => {
-		if (typeof value === 'boolean') {
-			setMode(DisconnectedValuesMode.Never);
-		} else if (typeof value === 'number') {
-			setMode(DisconnectedValuesMode.Threshold);
-			setThresholdSeconds(value);
-		}
-	}, [value]);
-
-	useEffect(() => {
-		if (minValue !== undefined) {
-			setThresholdSeconds(minValue);
-			if (mode === DisconnectedValuesMode.Threshold) {
-				onChange(minValue);
-			}
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [minValue]);
-
-	const handleModeChange = (newMode: DisconnectedValuesMode): void => {
-		setMode(newMode);
-		switch (newMode) {
-			case DisconnectedValuesMode.Never:
-				onChange(true);
-				break;
-			case DisconnectedValuesMode.Threshold:
-				onChange(thresholdSeconds);
-				break;
-		}
-	};
-
-	const handleThresholdChange = (seconds: number): void => {
-		setThresholdSeconds(seconds);
-		onChange(seconds);
-	};
-
-	return (
-		<section className="disconnect-values-selector control-container">
-			<Typography.Text className="section-heading">
-				Disconnect values
-			</Typography.Text>
-			<div className="disconnect-values-input-wrapper">
-				<DisconnectValuesModeToggle value={mode} onChange={handleModeChange} />
-				{mode === DisconnectedValuesMode.Threshold && (
-					<section className="control-container">
-						<Typography.Text className="section-heading">
-							Threshold Value
-						</Typography.Text>
-						<DisconnectValuesThresholdInput
-							value={thresholdSeconds}
-							minValue={minValue}
-							onChange={handleThresholdChange}
-						/>
-					</section>
-				)}
-			</div>
-		</section>
-	);
-}

frontend/src/container/NewWidget/RightContainer/components/DisconnectValuesSelector/DisconnectValuesThresholdInput.tsx

@@ -1,92 +0,0 @@
-import { ChangeEvent, useEffect, useState } from 'react';
-import { rangeUtil } from '@grafana/data';
-import { Callout, Input } from '@signozhq/ui';
-interface DisconnectValuesThresholdInputProps {
-	value: number;
-	onChange: (seconds: number) => void;
-	minValue: number;
-}
-
-export default function DisconnectValuesThresholdInput({
-	value,
-	onChange,
-	minValue,
-}: DisconnectValuesThresholdInputProps): JSX.Element {
-	const [inputValue, setInputValue] = useState<string>(
-		rangeUtil.secondsToHms(value),
-	);
-	const [error, setError] = useState<string | null>(null);
-
-	useEffect(() => {
-		setInputValue(rangeUtil.secondsToHms(value));
-		setError(null);
-	}, [value]);
-
-	const updateValue = (txt: string): void => {
-		if (!txt) {
-			return;
-		}
-		try {
-			let seconds: number;
-			if (rangeUtil.isValidTimeSpan(txt)) {
-				seconds = rangeUtil.intervalToSeconds(txt);
-			} else {
-				const parsed = Number(txt);
-				if (Number.isNaN(parsed) || parsed <= 0) {
-					setError('Enter a valid duration (e.g. 1h, 10m, 1d)');
-					return;
-				}
-				seconds = parsed;
-			}
-			if (minValue !== undefined && seconds < minValue) {
-				setError(`Threshold should be > ${rangeUtil.secondsToHms(minValue)}`);
-				return;
-			}
-			setError(null);
-			setInputValue(txt);
-			onChange(seconds);
-		} catch {
-			setError('Invalid threshold value');
-		}
-	};
-
-	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
-		if (e.key === 'Enter') {
-			updateValue(e.currentTarget.value);
-		}
-	};
-
-	const handleBlur = (e: React.FocusEvent<HTMLInputElement>): void => {
-		updateValue(e.currentTarget.value);
-	};
-
-	const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
-		setInputValue(e.currentTarget.value);
-		if (error) {
-			setError(null);
-		}
-	};
-
-	return (
-		<div className="disconnect-values-threshold-wrapper">
-			<Input
-				name="disconnect-values-threshold"
-				type="text"
-				className="disconnect-values-threshold-input"
-				prefix={<span className="disconnect-values-threshold-prefix">&gt;</span>}
-				value={inputValue}
-				onChange={handleChange}
-				onKeyDown={handleKeyDown}
-				onBlur={handleBlur}
-				autoFocus={true}
-				aria-invalid={!!error}
-				aria-describedby={error ? 'threshold-error' : undefined}
-			/>
-			{error && (
-				<Callout type="error" size="small" showIcon>
-					{error}
-				</Callout>
-			)}
-		</div>
-	);
-}

frontend/src/container/NewWidget/RightContainer/components/FillModeSelector/FillModeSelector.tsx

@@ -9,7 +9,7 @@ interface FillModeSelectorProps {
 	onChange: (value: FillMode) => void;
 }
 
-export default function FillModeSelector({
+export function FillModeSelector({
 	value,
 	onChange,
 }: FillModeSelectorProps): JSX.Element {

frontend/src/container/NewWidget/RightContainer/components/LineInterpolationSelector/LineInterpolationSelector.tsx

@@ -9,7 +9,7 @@ interface LineInterpolationSelectorProps {
 	onChange: (value: LineInterpolation) => void;
 }
 
-export default function LineInterpolationSelector({
+export function LineInterpolationSelector({
 	value,
 	onChange,
 }: LineInterpolationSelectorProps): JSX.Element {

frontend/src/container/NewWidget/RightContainer/components/LineStyleSelector/LineStyleSelector.tsx

@@ -9,7 +9,7 @@ interface LineStyleSelectorProps {
 	onChange: (value: LineStyle) => void;
 }
 
-export default function LineStyleSelector({
+export function LineStyleSelector({
 	value,
 	onChange,
 }: LineStyleSelectorProps): JSX.Element {

frontend/src/container/NewWidget/RightContainer/constants.ts

@@ -262,17 +262,3 @@ export const panelTypeVsShowPoints: {
 	[PANEL_TYPES.TRACE]: false,
 	[PANEL_TYPES.EMPTY_WIDGET]: false,
 } as const;
-
-export const panelTypeVsSpanGaps: {
-	[key in PANEL_TYPES]: boolean;
-} = {
-	[PANEL_TYPES.TIME_SERIES]: true,
-	[PANEL_TYPES.VALUE]: false,
-	[PANEL_TYPES.TABLE]: false,
-	[PANEL_TYPES.LIST]: false,
-	[PANEL_TYPES.PIE]: false,
-	[PANEL_TYPES.BAR]: false,
-	[PANEL_TYPES.HISTOGRAM]: false,
-	[PANEL_TYPES.TRACE]: false,
-	[PANEL_TYPES.EMPTY_WIDGET]: false,
-} as const;

frontend/src/container/NewWidget/RightContainer/index.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction, useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Typography } from 'antd';
-import { ExecStats } from 'api/v5/v5';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { PANEL_TYPES, PanelDisplay } from 'constants/queryBuilder';
 import { PanelTypesWithData } from 'container/DashboardContainer/PanelTypeSelectionModal/menuItems';
@@ -12,7 +11,6 @@ import {
 	LineInterpolation,
 	LineStyle,
 } from 'lib/uPlotV2/config/types';
-import get from 'lodash-es/get';
 import { SuccessResponse } from 'types/api';
 import {
 	ColumnUnit,
@@ -38,7 +36,6 @@ import {
 	panelTypeVsPanelTimePreferences,
 	panelTypeVsShowPoints,
 	panelTypeVsSoftMinMax,
-	panelTypeVsSpanGaps,
 	panelTypeVsStackingChartPreferences,
 	panelTypeVsThreshold,
 	panelTypeVsYAxisUnit,
@@ -71,8 +68,6 @@ function RightContainer({
 	setLineStyle,
 	showPoints,
 	setShowPoints,
-	spanGaps,
-	setSpanGaps,
 	bucketCount,
 	bucketWidth,
 	stackedBarChart,
@@ -143,7 +138,6 @@ function RightContainer({
 	const allowLineStyle = panelTypeVsLineStyle[selectedGraph];
 	const allowFillMode = panelTypeVsFillMode[selectedGraph];
 	const allowShowPoints = panelTypeVsShowPoints[selectedGraph];
-	const allowSpanGaps = panelTypeVsSpanGaps[selectedGraph];
 
 	const decimapPrecisionOptions = useMemo(
 		() => [
@@ -182,26 +176,10 @@ function RightContainer({
 			(allowFillMode ||
 				allowLineStyle ||
 				allowLineInterpolation ||
-				allowShowPoints ||
-				allowSpanGaps),
-		[
-			allowFillMode,
-			allowLineStyle,
-			allowLineInterpolation,
-			allowShowPoints,
-			allowSpanGaps,
-		],
+				allowShowPoints),
+		[allowFillMode, allowLineStyle, allowLineInterpolation, allowShowPoints],
 	);
 
-	const stepInterval = useMemo(() => {
-		const stepIntervals: ExecStats['stepIntervals'] = get(
-			queryResponse,
-			'data.payload.data.newResult.meta.stepIntervals',
-			{},
-		);
-		return Math.min(...Object.values(stepIntervals));
-	}, [queryResponse]);
-
 	return (
 		<div className="right-container">
 			<section className="header">
@@ -259,14 +237,10 @@ function RightContainer({
 						setLineInterpolation={setLineInterpolation}
 						showPoints={showPoints}
 						setShowPoints={setShowPoints}
-						spanGaps={spanGaps}
-						setSpanGaps={setSpanGaps}
 						allowFillMode={allowFillMode}
 						allowLineStyle={allowLineStyle}
 						allowLineInterpolation={allowLineInterpolation}
 						allowShowPoints={allowShowPoints}
-						allowSpanGaps={allowSpanGaps}
-						stepInterval={stepInterval}
 					/>
 				)}
 
@@ -390,8 +364,6 @@ export interface RightContainerProps {
 	setLineStyle: Dispatch<SetStateAction<LineStyle>>;
 	showPoints: boolean;
 	setShowPoints: Dispatch<SetStateAction<boolean>>;
-	spanGaps: boolean | number;
-	setSpanGaps: Dispatch<SetStateAction<boolean | number>>;
 }
 
 RightContainer.defaultProps = {

frontend/src/container/NewWidget/__test__/NewWidget.test.tsx

@@ -14,6 +14,7 @@ import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import i18n from 'ReactI18';
 import {
+	fireEvent,
 	getByText as getByTextUtil,
 	render,
 	userEvent,
@@ -341,8 +342,9 @@ describe('Stacking bar in new panel', () => {
 const STACKING_STATE_ATTR = 'data-stacking-state';
 
 describe('when switching to BAR panel type', () => {
+	jest.setTimeout(10000);
+
 	beforeEach(() => {
-		jest.useFakeTimers();
 		jest.clearAllMocks();
 
 		// Mock useSearchParams to return the expected values
@@ -352,15 +354,7 @@ describe('when switching to BAR panel type', () => {
 		]);
 	});
 
-	afterEach(() => {
-		jest.useRealTimers();
-	});
-
 	it('should preserve saved stacking value of true', async () => {
-		const user = userEvent.setup({
-			advanceTimers: jest.advanceTimersByTime.bind(jest),
-		});
-
 		const { getByTestId, getByText, container } = render(
 			<DashboardProvider dashboardId="">
 				<NewWidget
@@ -376,7 +370,7 @@ describe('when switching to BAR panel type', () => {
 			'true',
 		);
 
-		await user.click(getByText('Bar')); // Panel Type Selected
+		await userEvent.click(getByText('Bar')); // Panel Type Selected
 
 		// find dropdown with - .ant-select-dropdown
 		const panelDropdown = document.querySelector(
@@ -386,7 +380,7 @@ describe('when switching to BAR panel type', () => {
 
 		// Select TimeSeries from dropdown
 		const option = within(panelDropdown).getByText('Time Series');
-		await user.click(option);
+		fireEvent.click(option);
 
 		expect(getByTestId('panel-change-select')).toHaveAttribute(
 			STACKING_STATE_ATTR,
@@ -401,7 +395,7 @@ describe('when switching to BAR panel type', () => {
 		expect(panelTypeDropdown2).toBeInTheDocument();
 
 		expect(getByTextUtil(panelTypeDropdown2, 'Time Series')).toBeInTheDocument();
-		await user.click(getByTextUtil(panelTypeDropdown2, 'Time Series'));
+		fireEvent.click(getByTextUtil(panelTypeDropdown2, 'Time Series'));
 
 		// find dropdown with - .ant-select-dropdown
 		const panelDropdown2 = document.querySelector(
@@ -409,7 +403,7 @@ describe('when switching to BAR panel type', () => {
 		) as HTMLElement;
 		// // Select BAR from dropdown
 		const BarOption = within(panelDropdown2).getByText('Bar');
-		await user.click(BarOption);
+		fireEvent.click(BarOption);
 
 		// Stack series should be true
 		checkStackSeriesState(container, true);

frontend/src/container/NewWidget/index.tsx

@@ -220,9 +220,6 @@ function NewWidget({
 	const [showPoints, setShowPoints] = useState<boolean>(
 		selectedWidget?.showPoints ?? false,
 	);
-	const [spanGaps, setSpanGaps] = useState<boolean | number>(
-		selectedWidget?.spanGaps ?? true,
-	);
 	const [customLegendColors, setCustomLegendColors] = useState<
 		Record<string, string>
 	>(selectedWidget?.customLegendColors || {});
@@ -292,7 +289,6 @@ function NewWidget({
 				fillMode,
 				lineStyle,
 				showPoints,
-				spanGaps,
 				columnUnits,
 				bucketCount,
 				stackedBarChart,
@@ -332,7 +328,6 @@ function NewWidget({
 		fillMode,
 		lineStyle,
 		showPoints,
-		spanGaps,
 		customLegendColors,
 		contextLinks,
 		selectedWidget.columnWidths,
@@ -546,7 +541,6 @@ function NewWidget({
 								softMin: selectedWidget?.softMin || 0,
 								softMax: selectedWidget?.softMax || 0,
 								fillSpans: selectedWidget?.fillSpans,
-								spanGaps: selectedWidget?.spanGaps ?? true,
 								isLogScale: selectedWidget?.isLogScale || false,
 								bucketWidth: selectedWidget?.bucketWidth || 0,
 								bucketCount: selectedWidget?.bucketCount || 0,
@@ -578,7 +572,6 @@ function NewWidget({
 								softMin: selectedWidget?.softMin || 0,
 								softMax: selectedWidget?.softMax || 0,
 								fillSpans: selectedWidget?.fillSpans,
-								spanGaps: selectedWidget?.spanGaps ?? true,
 								isLogScale: selectedWidget?.isLogScale || false,
 								bucketWidth: selectedWidget?.bucketWidth || 0,
 								bucketCount: selectedWidget?.bucketCount || 0,
@@ -896,8 +889,6 @@ function NewWidget({
 							setLineStyle={setLineStyle}
 							showPoints={showPoints}
 							setShowPoints={setShowPoints}
-							spanGaps={spanGaps}
-							setSpanGaps={setSpanGaps}
 							opacity={opacity}
 							yAxisUnit={yAxisUnit}
 							columnUnits={columnUnits}

frontend/src/hooks/useAuthZ/constants.ts

@@ -1,2 +0,0 @@
-export const SINGLE_FLIGHT_WAIT_TIME_MS = 50;
-export const AUTHZ_CACHE_TIME = 20_000;

frontend/src/hooks/useAuthZ/legacy.ts

@@ -1,18 +0,0 @@
-import { buildPermission } from './utils';
-
-export const IsAdminPermission = buildPermission(
-	'assignee',
-	'role:signoz-admin',
-);
-export const IsEditorPermission = buildPermission(
-	'assignee',
-	'role:signoz-editor',
-);
-export const IsViewerPermission = buildPermission(
-	'assignee',
-	'role:signoz-viewer',
-);
-export const IsAnonymousPermission = buildPermission(
-	'assignee',
-	'role:signoz-anonymous',
-);

frontend/src/hooks/useAuthZ/types.ts

@@ -14,7 +14,7 @@ type ResourceTypeMap = {
 
 type RelationName = keyof RelationsByType;
 
-export type ResourcesForRelation<R extends RelationName> = Extract<
+type ResourcesForRelation<R extends RelationName> = Extract<
 	Resource,
 	{ type: RelationsByType[R][number] }
 >['name'];
@@ -50,26 +50,8 @@ export type AuthZCheckResponse = Record<
 	}
 >;
 
-export type UseAuthZOptions = {
-	/**
-	 * If false, the query/permissions will not be fetched.
-	 * Useful when you want to disable the query/permissions for a specific use case, like logout.
-	 *
-	 * @default true
-	 */
-	enabled?: boolean;
-};
-
 export type UseAuthZResult = {
-	/**
-	 * If query is cached, and refetch happens in background, this is false.
-	 */
 	isLoading: boolean;
-	/**
-	 * If query is fetching, even if happens in background, this is true.
-	 */
-	isFetching: boolean;
 	error: Error | null;
 	permissions: AuthZCheckResponse | null;
-	refetchPermissions: () => void;
 };

frontend/src/hooks/useAuthZ/useAuthZ.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 import { authzCheck } from 'api/generated/services/authz';
 import type {
@@ -6,13 +6,7 @@ import type {
 	AuthtypesTransactionDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
-import { AUTHZ_CACHE_TIME, SINGLE_FLIGHT_WAIT_TIME_MS } from './constants';
-import {
-	AuthZCheckResponse,
-	BrandedPermission,
-	UseAuthZOptions,
-	UseAuthZResult,
-} from './types';
+import { AuthZCheckResponse, BrandedPermission, UseAuthZResult } from './types';
 import {
 	gettableTransactionToPermission,
 	permissionToTransactionDto,
@@ -20,6 +14,8 @@ import {
 
 let ctx: Promise<AuthZCheckResponse> | null;
 let pendingPermissions: BrandedPermission[] = [];
+const SINGLE_FLIGHT_WAIT_TIME_MS = 50;
+const AUTHZ_CACHE_TIME = 20_000;
 
 function dispatchPermission(
 	permission: BrandedPermission,
@@ -74,12 +70,7 @@ async function fetchManyPermissions(
 	}, {} as AuthZCheckResponse);
 }
 
-export function useAuthZ(
-	permissions: BrandedPermission[],
-	options?: UseAuthZOptions,
-): UseAuthZResult {
-	const { enabled } = options ?? { enabled: true };
-
+export function useAuthZ(permissions: BrandedPermission[]): UseAuthZResult {
 	const queryResults = useQueries(
 		permissions.map((permission) => {
 			return {
@@ -89,7 +80,6 @@ export function useAuthZ(
 				refetchIntervalInBackground: false,
 				refetchOnWindowFocus: false,
 				refetchOnReconnect: true,
-				enabled,
 				queryFn: async (): Promise<AuthZCheckResponse> => {
 					const response = await dispatchPermission(permission);
 
@@ -106,10 +96,6 @@ export function useAuthZ(
 	const isLoading = useMemo(() => queryResults.some((q) => q.isLoading), [
 		queryResults,
 	]);
-	const isFetching = useMemo(() => queryResults.some((q) => q.isFetching), [
-		queryResults,
-	]);
-
 	const error = useMemo(
 		() =>
 			!isLoading
@@ -135,17 +121,9 @@ export function useAuthZ(
 		}, {} as AuthZCheckResponse);
 	}, [isLoading, error, queryResults]);
 
-	const refetchPermissions = useCallback(() => {
-		for (const query of queryResults) {
-			query.refetch();
-		}
-	}, [queryResults]);
-
 	return {
 		isLoading,
-		isFetching,
 		error,
 		permissions: data ?? null,
-		refetchPermissions,
 	};
 }

frontend/src/hooks/useAuthZ/utils.ts

@@ -3,9 +3,9 @@ import permissionsType from './permissions.type';
 import {
 	AuthZObject,
 	AuthZRelation,
+	AuthZResource,
 	BrandedPermission,
 	ResourceName,
-	ResourcesForRelation,
 	ResourceType,
 } from './types';
 
@@ -19,10 +19,11 @@ export function buildPermission<R extends AuthZRelation>(
 	return `${relation}${PermissionSeparator}${object}` as BrandedPermission;
 }
 
-export function buildObjectString<
-	R extends 'delete' | 'read' | 'update' | 'assignee'
->(resource: ResourcesForRelation<R>, objectId: string): AuthZObject<R> {
-	return `${resource}${ObjectSeparator}${objectId}` as AuthZObject<R>;
+export function buildObjectString(
+	resource: AuthZResource,
+	objectId: string,
+): `${AuthZResource}${typeof ObjectSeparator}${string}` {
+	return `${resource}${ObjectSeparator}${objectId}` as const;
 }
 
 export function parsePermission(

frontend/src/lib/uPlotV2/components/UPlotChart.tsx

@@ -6,9 +6,8 @@ import { LineChart } from 'lucide-react';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import uPlot, { AlignedData, Options } from 'uplot';
 
-import { usePlotContext } from '../../context/PlotContext';
-import { UPlotChartProps } from '../types';
-import { prepareAlignedData } from './utils';
+import { usePlotContext } from '../context/PlotContext';
+import { UPlotChartProps } from './types';
 
 /**
  * Check if dimensions have changed
@@ -84,11 +83,8 @@ export default function UPlotChart({
 			...configOptions,
 		} as Options;
 
-		// prepare final AlignedData
-		const preparedData = prepareAlignedData({ data, config });
-
 		// Create new plot instance
-		const plot = new uPlot(plotConfig, preparedData, containerRef.current);
+		const plot = new uPlot(plotConfig, data as AlignedData, containerRef.current);
 
 		if (plotRef) {
 			plotRef(plot);
@@ -166,8 +162,7 @@ export default function UPlotChart({
 		}
 		// Update data if only data changed
 		else if (!sameData(prevProps, currentProps) && plotInstanceRef.current) {
-			const preparedData = prepareAlignedData({ data, config });
-			plotInstanceRef.current.setData(preparedData as AlignedData);
+			plotInstanceRef.current.setData(data as AlignedData);
 		}
 
 		prevPropsRef.current = currentProps;

frontend/src/lib/uPlotV2/components/UPlotChart/utils.ts

@@ -1,16 +0,0 @@
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { applySpanGapsToAlignedData } from 'lib/uPlotV2/utils/dataUtils';
-import { AlignedData } from 'uplot';
-
-export function prepareAlignedData({
-	data,
-	config,
-}: {
-	data: AlignedData;
-	config: UPlotConfigBuilder;
-}): AlignedData {
-	const seriesSpanGaps = config.getSeriesSpanGapsOptions();
-	return seriesSpanGaps.length > 0
-		? applySpanGapsToAlignedData(data as AlignedData, seriesSpanGaps)
-		: (data as AlignedData);
-}

frontend/src/lib/uPlotV2/components/__tests__/UPlotChart.test.tsx

@@ -4,7 +4,7 @@ import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import type { AlignedData } from 'uplot';
 
 import { PlotContextProvider } from '../../context/PlotContext';
-import UPlotChart from '../UPlotChart/UPlotChart';
+import UPlotChart from '../UPlotChart';
 
 // ---------------------------------------------------------------------------
 // Mocks
@@ -86,7 +86,6 @@ const createMockConfig = (): UPlotConfigBuilder => {
 		}),
 		getId: jest.fn().mockReturnValue(undefined),
 		getShouldSaveSelectionPreference: jest.fn().mockReturnValue(false),
-		getSeriesSpanGapsOptions: jest.fn().mockReturnValue([]),
 	} as unknown) as UPlotConfigBuilder;
 };
 
@@ -329,78 +328,6 @@ describe('UPlotChart', () => {
 		});
 	});
 
-	describe('spanGaps data transformation', () => {
-		it('inserts null break points before passing data to uPlot when a gap exceeds the numeric threshold', () => {
-			const config = createMockConfig();
-			// gap 0→100 = 100 > threshold 50 → null inserted at midpoint x=50
-			(config.getSeriesSpanGapsOptions as jest.Mock).mockReturnValue([
-				{ spanGaps: 50 },
-			]);
-			const data: AlignedData = [
-				[0, 100],
-				[1, 2],
-			];
-
-			render(<UPlotChart config={config} data={data} width={600} height={400} />, {
-				wrapper: Wrapper,
-			});
-
-			const [, receivedData] = mockUPlotConstructor.mock.calls[0];
-			expect(receivedData[0]).toEqual([0, 50, 100]);
-			expect(receivedData[1]).toEqual([1, null, 2]);
-		});
-
-		it('passes data through unchanged when no gap exceeds the numeric threshold', () => {
-			const config = createMockConfig();
-			// all gaps = 10, threshold = 50 → no insertions, same reference returned
-			(config.getSeriesSpanGapsOptions as jest.Mock).mockReturnValue([
-				{ spanGaps: 50 },
-			]);
-			const data: AlignedData = [
-				[0, 10, 20],
-				[1, 2, 3],
-			];
-
-			render(<UPlotChart config={config} data={data} width={600} height={400} />, {
-				wrapper: Wrapper,
-			});
-
-			const [, receivedData] = mockUPlotConstructor.mock.calls[0];
-			expect(receivedData).toBe(data);
-		});
-
-		it('transforms data passed to setData when data updates and a new gap exceeds the threshold', () => {
-			const config = createMockConfig();
-			(config.getSeriesSpanGapsOptions as jest.Mock).mockReturnValue([
-				{ spanGaps: 50 },
-			]);
-
-			// initial render: gap 10 < 50, no transformation
-			const initialData: AlignedData = [
-				[0, 10],
-				[1, 2],
-			];
-			// updated data: gap 100 > 50 → null inserted at midpoint x=50
-			const newData: AlignedData = [
-				[0, 100],
-				[3, 4],
-			];
-
-			const { rerender } = render(
-				<UPlotChart config={config} data={initialData} width={600} height={400} />,
-				{ wrapper: Wrapper },
-			);
-
-			rerender(
-				<UPlotChart config={config} data={newData} width={600} height={400} />,
-			);
-
-			const receivedData = instances[0].setData.mock.calls[0][0];
-			expect(receivedData[0]).toEqual([0, 50, 100]);
-			expect(receivedData[1]).toEqual([3, null, 4]);
-		});
-	});
-
 	describe('prop updates', () => {
 		it('calls setData without recreating the plot when only data changes', () => {
 			const config = createMockConfig();

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

@@ -14,7 +14,6 @@ import {
 	STEP_INTERVAL_MULTIPLIER,
 } from '../constants';
 import { calculateWidthBasedOnStepInterval } from '../utils';
-import { SeriesSpanGapsOption } from '../utils/dataUtils';
 import {
 	ConfigBuilder,
 	ConfigBuilderProps,
@@ -162,13 +161,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		this.series.push(new UPlotSeriesBuilder(props));
 	}
 
-	getSeriesSpanGapsOptions(): SeriesSpanGapsOption[] {
-		return this.series.map((s) => {
-			const { spanGaps } = s.props;
-			return { spanGaps };
-		});
-	}
-
 	/**
 	 * Add a hook for extensibility
 	 */

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

@@ -4,7 +4,6 @@ import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
 import uPlot, { Series } from 'uplot';
 
 import { generateGradientFill } from '../utils/generateGradientFill';
-import { isolatedPointFilter } from '../utils/seriesPointsFilter';
 import {
 	BarAlignment,
 	ConfigBuilder,
@@ -147,8 +146,20 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}: {
 		resolvedLineColor: string;
 	}): Partial<Series.Points> {
-		const { lineWidth, pointSize, pointsFilter } = this.props;
+		const {
+			lineWidth,
+			pointSize,
+			pointsBuilder,
+			pointsFilter,
+			drawStyle,
+			showPoints,
+		} = this.props;
 
+		/**
+		 * If pointSize is not provided, use the lineWidth * POINT_SIZE_FACTOR
+		 * to determine the point size.
+		 * POINT_SIZE_FACTOR is 2, so the point size will be 2x the line width.
+		 */
 		const resolvedPointSize =
 			pointSize ?? (lineWidth ?? DEFAULT_LINE_WIDTH) * POINT_SIZE_FACTOR;
 
@@ -157,39 +168,19 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			fill: resolvedLineColor,
 			size: resolvedPointSize,
 			filter: pointsFilter || undefined,
-			show: this.resolvePointsShow(),
 		};
 
-		// When spanGaps is in threshold (numeric) mode, points hidden by default
-		// become invisible when isolated by injected gap-nulls (no line connects
-		// to them). Use a gap-based filter to show only those isolated points as
-		// dots. Do NOT set show=true here — the filter is called with show=false
-		// and returns specific indices to render; setting show=true would cause
-		// uPlot to call filter with show=true which short-circuits the logic and
-		// renders all points.
-		if (this.shouldApplyIsolatedPointFilter(pointsConfig.show)) {
-			pointsConfig.filter = isolatedPointFilter;
+		if (pointsBuilder) {
+			pointsConfig.show = pointsBuilder;
+		} else if (drawStyle === DrawStyle.Points) {
+			pointsConfig.show = true;
+		} else {
+			pointsConfig.show = !!showPoints;
 		}
 
 		return pointsConfig;
 	}
 
-	private resolvePointsShow(): Series.Points['show'] {
-		const { pointsBuilder, drawStyle, showPoints } = this.props;
-		if (pointsBuilder) {
-			return pointsBuilder;
-		}
-		if (drawStyle === DrawStyle.Points) {
-			return true;
-		}
-		return !!showPoints;
-	}
-
-	private shouldApplyIsolatedPointFilter(show: Series.Points['show']): boolean {
-		const { drawStyle, pointsFilter } = this.props;
-		return drawStyle === DrawStyle.Line && !pointsFilter && !show;
-	}
-
 	private getLineColor(): string {
 		const { colorMapping, label, lineColor, isDarkMode } = this.props;
 		if (!label) {
@@ -221,12 +212,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		return {
 			scale: scaleKey,
 			label,
-			// When spanGaps is numeric, we always disable uPlot's internal
-			// spanGaps behavior and rely on data-prep to implement the
-			// threshold-based null handling. When spanGaps is boolean we
-			// map it directly. When spanGaps is undefined we fall back to
-			// the default of true.
-			spanGaps: typeof spanGaps === 'number' ? false : spanGaps ?? true,
+			spanGaps: typeof spanGaps === 'boolean' ? spanGaps : false,
 			value: (): string => '',
 			pxAlign: true,
 			show,

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

@@ -1,7 +1,6 @@
 import { themeColors } from 'constants/theme';
 import uPlot from 'uplot';
 
-import { isolatedPointFilter } from '../../utils/seriesPointsFilter';
 import type { SeriesProps } from '../types';
 import { DrawStyle, LineInterpolation, LineStyle } from '../types';
 import { POINT_SIZE_FACTOR, UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
@@ -41,37 +40,6 @@ describe('UPlotSeriesBuilder', () => {
 		expect(typeof config.value).toBe('function');
 	});
 
-	it('maps boolean spanGaps directly to uPlot spanGaps', () => {
-		const trueBuilder = new UPlotSeriesBuilder(
-			createBaseProps({
-				spanGaps: true,
-			}),
-		);
-		const falseBuilder = new UPlotSeriesBuilder(
-			createBaseProps({
-				spanGaps: false,
-			}),
-		);
-
-		const trueConfig = trueBuilder.getConfig();
-		const falseConfig = falseBuilder.getConfig();
-
-		expect(trueConfig.spanGaps).toBe(true);
-		expect(falseConfig.spanGaps).toBe(false);
-	});
-
-	it('disables uPlot spanGaps when spanGaps is a number', () => {
-		const builder = new UPlotSeriesBuilder(
-			createBaseProps({
-				spanGaps: 10000,
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.spanGaps).toBe(false);
-	});
-
 	it('uses explicit lineColor when provided, regardless of mapping', () => {
 		const builder = new UPlotSeriesBuilder(
 			createBaseProps({
@@ -316,50 +284,4 @@ describe('UPlotSeriesBuilder', () => {
 
 		expect(config.points?.filter).toBe(pointsFilter);
 	});
-
-	it('assigns isolatedPointFilter and does not force show=true when spanGaps is numeric and no custom filter', () => {
-		const builder = new UPlotSeriesBuilder(
-			createBaseProps({
-				drawStyle: DrawStyle.Line,
-				spanGaps: 10_000,
-				showPoints: false,
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.points?.filter).toBe(isolatedPointFilter);
-		expect(config.points?.show).toBe(false);
-	});
-
-	it('does not assign isolatedPointFilter when a custom pointsFilter is provided alongside numeric spanGaps', () => {
-		const customFilter: uPlot.Series.Points.Filter = jest.fn(() => null);
-
-		const builder = new UPlotSeriesBuilder(
-			createBaseProps({
-				drawStyle: DrawStyle.Line,
-				spanGaps: 10_000,
-				pointsFilter: customFilter,
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.points?.filter).toBe(customFilter);
-	});
-
-	it('does not assign isolatedPointFilter when showPoints is true even with numeric spanGaps', () => {
-		const builder = new UPlotSeriesBuilder(
-			createBaseProps({
-				drawStyle: DrawStyle.Line,
-				spanGaps: 10_000,
-				showPoints: true,
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.points?.filter).toBeUndefined();
-		expect(config.points?.show).toBe(true);
-	});
 });

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

@@ -99,11 +99,6 @@ export interface ScaleProps {
 	distribution?: DistributionType;
 }
 
-export enum DisconnectedValuesMode {
-	Never = 'never',
-	Threshold = 'threshold',
-}
-
 /**
  * Props for configuring a series
  */
@@ -180,16 +175,7 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	pointsFilter?: Series.Points.Filter;
 	pointsBuilder?: Series.Points.Show;
 	show?: boolean;
-	/**
-	 * Controls how nulls are treated for this series.
-	 *
-	 * - boolean: mapped directly to uPlot's spanGaps behavior
-	 * - number: interpreted as an X-axis threshold (same unit as ref values),
-	 *           where gaps smaller than this threshold are spanned by
-	 *           converting short null runs to undefined during data prep
-	 *           while uPlot's internal spanGaps is kept disabled.
-	 */
-	spanGaps?: boolean | number;
+	spanGaps?: boolean;
 	fillColor?: string;
 	fillMode?: FillMode;
 	isDarkMode?: boolean;

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

@@ -1,12 +1,4 @@
-import uPlot from 'uplot';
-
-import {
-	applySpanGapsToAlignedData,
-	insertLargeGapNullsIntoAlignedData,
-	isInvalidPlotValue,
-	normalizePlotValue,
-	SeriesSpanGapsOption,
-} from '../dataUtils';
+import { isInvalidPlotValue, normalizePlotValue } from '../dataUtils';
 
 describe('dataUtils', () => {
 	describe('isInvalidPlotValue', () => {
@@ -67,217 +59,4 @@ describe('dataUtils', () => {
 			expect(normalizePlotValue(42.5)).toBe(42.5);
 		});
 	});
-
-	describe('insertLargeGapNullsIntoAlignedData', () => {
-		it('returns original data unchanged when no gap exceeds the threshold', () => {
-			// all gaps = 10, threshold = 25 → no insertions
-			const data: uPlot.AlignedData = [
-				[0, 10, 20, 30],
-				[1, 2, 3, 4],
-			];
-			const options: SeriesSpanGapsOption[] = [{ spanGaps: 25 }];
-
-			const result = insertLargeGapNullsIntoAlignedData(data, options);
-
-			expect(result).toBe(data);
-		});
-
-		it('does not insert when the gap equals the threshold exactly', () => {
-			// gap = 50, threshold = 50 → condition is gap > threshold, not >=
-			const data: uPlot.AlignedData = [
-				[0, 50],
-				[1, 2],
-			];
-			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
-
-			const result = insertLargeGapNullsIntoAlignedData(data, options);
-
-			expect(result).toBe(data);
-		});
-
-		it('inserts a null at the midpoint when a single gap exceeds the threshold', () => {
-			// gap 0→100 = 100 > 50 → insert null at x=50
-			const data: uPlot.AlignedData = [
-				[0, 100],
-				[1, 2],
-			];
-			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
-
-			const result = insertLargeGapNullsIntoAlignedData(data, options);
-
-			expect(result[0]).toEqual([0, 50, 100]);
-			expect(result[1]).toEqual([1, null, 2]);
-		});
-
-		it('inserts nulls at every gap that exceeds the threshold', () => {
-			// gaps: 0→100=100, 100→110=10, 110→210=100; threshold=50
-			// → insert at 0→100 and 110→210
-			const data: uPlot.AlignedData = [
-				[0, 100, 110, 210],
-				[1, 2, 3, 4],
-			];
-			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
-
-			const result = insertLargeGapNullsIntoAlignedData(data, options);
-
-			expect(result[0]).toEqual([0, 50, 100, 110, 160, 210]);
-			expect(result[1]).toEqual([1, null, 2, 3, null, 4]);
-		});
-
-		it('inserts null for all series at a gap triggered by any one series', () => {
-			// series 0: threshold=50, gap=100 → triggers insertion
-			// series 1: threshold=200, gap=100 → would not trigger alone
-			// result: both series get null at the inserted x because the x-axis is shared
-			const data: uPlot.AlignedData = [
-				[0, 100],
-				[1, 2],
-				[3, 4],
-			];
-			const options: SeriesSpanGapsOption[] = [
-				{ spanGaps: 50 },
-				{ spanGaps: 200 },
-			];
-
-			const result = insertLargeGapNullsIntoAlignedData(data, options);
-
-			expect(result[0]).toEqual([0, 50, 100]);
-			expect(result[1]).toEqual([1, null, 2]);
-			expect(result[2]).toEqual([3, null, 4]);
-		});
-
-		it('ignores boolean spanGaps options (only numeric values trigger insertion)', () => {
-			const data: uPlot.AlignedData = [
-				[0, 100],
-				[1, 2],
-			];
-			const options: SeriesSpanGapsOption[] = [{ spanGaps: true }];
-
-			const result = insertLargeGapNullsIntoAlignedData(data, options);
-
-			expect(result).toBe(data);
-		});
-
-		it('returns original data when series options array is empty', () => {
-			const data: uPlot.AlignedData = [
-				[0, 100],
-				[1, 2],
-			];
-
-			const result = insertLargeGapNullsIntoAlignedData(data, []);
-
-			expect(result).toBe(data);
-		});
-
-		it('returns original data when there is only one x point', () => {
-			const data: uPlot.AlignedData = [[0], [1]];
-			const options: SeriesSpanGapsOption[] = [{ spanGaps: 10 }];
-
-			const result = insertLargeGapNullsIntoAlignedData(data, options);
-
-			expect(result).toBe(data);
-		});
-
-		it('preserves existing null values in the series alongside inserted ones', () => {
-			// original series already has a null; gap 0→100 also triggers insertion
-			const data: uPlot.AlignedData = [
-				[0, 100, 110],
-				[1, null, 2],
-			];
-			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
-
-			const result = insertLargeGapNullsIntoAlignedData(data, options);
-
-			expect(result[0]).toEqual([0, 50, 100, 110]);
-			expect(result[1]).toEqual([1, null, null, 2]);
-		});
-	});
-
-	describe('applySpanGapsToAlignedData', () => {
-		const xs: uPlot.AlignedData[0] = [0, 10, 20, 30];
-
-		it('returns original data when there are no series', () => {
-			const data: uPlot.AlignedData = [xs];
-			const result = applySpanGapsToAlignedData(data, []);
-
-			expect(result).toBe(data);
-		});
-
-		it('leaves data unchanged when spanGaps is undefined', () => {
-			const ys = [1, null, 2, null];
-			const data: uPlot.AlignedData = [xs, ys];
-			const options: SeriesSpanGapsOption[] = [{}];
-
-			const result = applySpanGapsToAlignedData(data, options);
-
-			expect(result[1]).toEqual(ys);
-		});
-
-		it('converts nulls to undefined when spanGaps is true', () => {
-			const ys = [1, null, 2, null];
-			const data: uPlot.AlignedData = [xs, ys];
-			const options: SeriesSpanGapsOption[] = [{ spanGaps: true }];
-
-			const result = applySpanGapsToAlignedData(data, options);
-
-			expect(result[1]).toEqual([1, undefined, 2, undefined]);
-		});
-
-		it('leaves data unchanged when spanGaps is false', () => {
-			const ys = [1, null, 2, null];
-			const data: uPlot.AlignedData = [xs, ys];
-			const options: SeriesSpanGapsOption[] = [{ spanGaps: false }];
-
-			const result = applySpanGapsToAlignedData(data, options);
-
-			expect(result[1]).toEqual(ys);
-		});
-
-		it('inserts a null break point when a gap exceeds the numeric threshold', () => {
-			// gap 0→100 = 100 > 50 → null inserted at midpoint x=50
-			const data: uPlot.AlignedData = [
-				[0, 100, 110],
-				[1, 2, 3],
-			];
-			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
-
-			const result = applySpanGapsToAlignedData(data, options);
-
-			expect(result[0]).toEqual([0, 50, 100, 110]);
-			expect(result[1]).toEqual([1, null, 2, 3]);
-		});
-
-		it('returns original data when no gap exceeds the numeric threshold', () => {
-			// all gaps = 10, threshold = 25 → no insertions
-			const data: uPlot.AlignedData = [xs, [1, 2, 3, 4]];
-			const options: SeriesSpanGapsOption[] = [{ spanGaps: 25 }];
-
-			const result = applySpanGapsToAlignedData(data, options);
-
-			expect(result).toBe(data);
-		});
-
-		it('applies both numeric gap insertion and boolean null-to-undefined in one pass', () => {
-			// series 0: spanGaps: 50 → gap 0→100 triggers a null break at midpoint x=50
-			// series 1: spanGaps: true → the inserted null at x=50 becomes undefined,
-			//   so the line spans over it rather than breaking
-			const data: uPlot.AlignedData = [
-				[0, 100],
-				[1, 2],
-				[3, 4],
-			];
-			const options: SeriesSpanGapsOption[] = [
-				{ spanGaps: 50 },
-				{ spanGaps: true },
-			];
-
-			const result = applySpanGapsToAlignedData(data, options);
-
-			// x-axis extended with the inserted midpoint
-			expect(result[0]).toEqual([0, 50, 100]);
-			// series 0: null at midpoint breaks the line
-			expect(result[1]).toEqual([1, null, 2]);
-			// series 1: null at midpoint converted to undefined → line spans over it
-			expect(result[2]).toEqual([3, undefined, 4]);
-		});
-	});
 });

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

@@ -1,251 +0,0 @@
-import type uPlot from 'uplot';
-
-import {
-	findNearestNonNull,
-	findSandwichedIndices,
-	isolatedPointFilter,
-} from '../seriesPointsFilter';
-
-// ---------------------------------------------------------------------------
-// Minimal uPlot stub — only the surface used by seriesPointsFilter
-// ---------------------------------------------------------------------------
-
-function makeUPlot({
-	xData,
-	yData,
-	idxs,
-	valToPosFn,
-	posToIdxFn,
-}: {
-	xData: number[];
-	yData: (number | null | undefined)[];
-	idxs?: [number, number];
-	valToPosFn?: (val: number) => number;
-	posToIdxFn?: (pos: number) => number;
-}): uPlot {
-	return ({
-		data: [xData, yData],
-		series: [{}, { idxs: idxs ?? [0, yData.length - 1] }],
-		valToPos: jest.fn((val: number) => (valToPosFn ? valToPosFn(val) : val)),
-		posToIdx: jest.fn((pos: number) =>
-			posToIdxFn ? posToIdxFn(pos) : Math.round(pos),
-		),
-	} as unknown) as uPlot;
-}
-
-// ---------------------------------------------------------------------------
-// findNearestNonNull
-// ---------------------------------------------------------------------------
-
-describe('findNearestNonNull', () => {
-	it('returns the right neighbor when left side is null', () => {
-		const yData = [null, null, 42, null];
-		expect(findNearestNonNull(yData, 1)).toBe(2);
-	});
-
-	it('returns the left neighbor when right side is null', () => {
-		const yData = [null, 42, null, null];
-		expect(findNearestNonNull(yData, 2)).toBe(1);
-	});
-
-	it('prefers the right neighbor over the left when both exist at the same distance', () => {
-		const yData = [10, null, 20];
-		// j=1: right (idx 3) is out of bounds (undefined == null), left (idx 1) is null
-		// Actually right (idx 2) exists at j=1
-		expect(findNearestNonNull(yData, 1)).toBe(2);
-	});
-
-	it('returns approxIdx unchanged when no non-null value is found within 100 steps', () => {
-		const yData: (number | null)[] = Array(5).fill(null);
-		expect(findNearestNonNull(yData, 2)).toBe(2);
-	});
-
-	it('handles undefined values the same as null', () => {
-		const yData: (number | null | undefined)[] = [undefined, undefined, 99];
-		expect(findNearestNonNull(yData, 0)).toBe(2);
-	});
-});
-
-// ---------------------------------------------------------------------------
-// findSandwichedIndices
-// ---------------------------------------------------------------------------
-
-describe('findSandwichedIndices', () => {
-	it('returns empty array when no consecutive gaps share a pixel boundary', () => {
-		const gaps = [
-			[0, 10],
-			[20, 30],
-		];
-		const yData = [1, null, null, 2];
-		const u = makeUPlot({ xData: [0, 1, 2, 3], yData });
-		expect(findSandwichedIndices(gaps, yData, u)).toEqual([]);
-	});
-
-	it('returns the index between two gaps that share a pixel boundary', () => {
-		// gaps[0] ends at 10, gaps[1] starts at 10 → sandwiched point at pixel 10
-		const gaps = [
-			[0, 10],
-			[10, 20],
-		];
-		// posToIdx(10) → 2
-		const yData = [null, null, 5, null, null];
-		const u = makeUPlot({ xData: [0, 1, 2, 3, 4], yData, posToIdxFn: () => 2 });
-		expect(findSandwichedIndices(gaps, yData, u)).toEqual([2]);
-	});
-
-	it('scans to nearest non-null when posToIdx lands on a null', () => {
-		// posToIdx returns 2 which is null; nearest non-null is index 3
-		const gaps = [
-			[0, 10],
-			[10, 20],
-		];
-		const yData = [null, null, null, 7, null];
-		const u = makeUPlot({ xData: [0, 1, 2, 3, 4], yData, posToIdxFn: () => 2 });
-		expect(findSandwichedIndices(gaps, yData, u)).toEqual([3]);
-	});
-
-	it('returns multiple indices when several gap pairs share boundaries', () => {
-		// Three consecutive gaps: [0,10], [10,20], [20,30]
-		// → two sandwiched points: between gaps 0-1 at px 10, between gaps 1-2 at px 20
-		const gaps = [
-			[0, 10],
-			[10, 20],
-			[20, 30],
-		];
-		const yData = [null, 1, null, 2, null];
-		const u = makeUPlot({
-			xData: [0, 1, 2, 3, 4],
-			yData,
-			posToIdxFn: (pos) => (pos === 10 ? 1 : 3),
-		});
-		expect(findSandwichedIndices(gaps, yData, u)).toEqual([1, 3]);
-	});
-});
-
-// ---------------------------------------------------------------------------
-// isolatedPointFilter
-// ---------------------------------------------------------------------------
-
-describe('isolatedPointFilter', () => {
-	it('returns null when show is true (normal point rendering active)', () => {
-		const u = makeUPlot({ xData: [0, 1], yData: [1, null] });
-		expect(isolatedPointFilter(u, 1, true, [[0, 10]])).toBeNull();
-	});
-
-	it('returns null when gaps is null', () => {
-		const u = makeUPlot({ xData: [0, 1], yData: [1, null] });
-		expect(isolatedPointFilter(u, 1, false, null)).toBeNull();
-	});
-
-	it('returns null when gaps is empty', () => {
-		const u = makeUPlot({ xData: [0, 1], yData: [1, null] });
-		expect(isolatedPointFilter(u, 1, false, [])).toBeNull();
-	});
-
-	it('returns null when series idxs is undefined', () => {
-		const u = ({
-			data: [
-				[0, 1],
-				[1, null],
-			],
-			series: [{}, { idxs: undefined }],
-			valToPos: jest.fn(() => 0),
-			posToIdx: jest.fn(() => 0),
-		} as unknown) as uPlot;
-		expect(isolatedPointFilter(u, 1, false, [[0, 10]])).toBeNull();
-	});
-
-	it('includes firstIdx when the first gap starts at the first data point pixel', () => {
-		// xData[firstIdx=0] → valToPos → 5; gaps[0][0] === 5 → isolated leading point
-		const xData = [0, 1, 2, 3, 4];
-		const yData = [10, null, null, null, 20];
-		const u = makeUPlot({
-			xData,
-			yData,
-			idxs: [0, 4],
-			valToPosFn: (val) => (val === 0 ? 5 : 40), // firstPos=5, lastPos=40
-		});
-		// gaps[0][0] === 5 (firstPos), gaps last end !== 40
-		const result = isolatedPointFilter(u, 1, false, [
-			[5, 15],
-			[20, 30],
-		]);
-		expect(result).toContain(0); // firstIdx
-	});
-
-	it('includes lastIdx when the last gap ends at the last data point pixel', () => {
-		const xData = [0, 1, 2, 3, 4];
-		const yData = [10, null, null, null, 20];
-		const u = makeUPlot({
-			xData,
-			yData,
-			idxs: [0, 4],
-			valToPosFn: (val) => (val === 0 ? 5 : 40), // firstPos=5, lastPos=40
-		});
-		// gaps last end === 40 (lastPos), gaps[0][0] !== 5
-		const result = isolatedPointFilter(u, 1, false, [
-			[10, 20],
-			[30, 40],
-		]);
-		expect(result).toContain(4); // lastIdx
-	});
-
-	it('includes sandwiched index between two gaps sharing a pixel boundary', () => {
-		const xData = [0, 1, 2, 3, 4];
-		const yData = [null, null, 5, null, null];
-		const u = makeUPlot({
-			xData,
-			yData,
-			idxs: [0, 4],
-			valToPosFn: () => 99, // firstPos/lastPos won't match gap boundaries
-			posToIdxFn: () => 2,
-		});
-		const result = isolatedPointFilter(u, 1, false, [
-			[0, 50],
-			[50, 100],
-		]);
-		expect(result).toContain(2);
-	});
-
-	it('returns null when no isolated points are found', () => {
-		const xData = [0, 1, 2];
-		const yData = [1, 2, 3];
-		const u = makeUPlot({
-			xData,
-			yData,
-			idxs: [0, 2],
-			// firstPos = 10, lastPos = 30 — neither matches any gap boundary
-			valToPosFn: (val) => (val === 0 ? 10 : 30),
-		});
-		// gaps don't share boundaries and don't touch firstPos/lastPos
-		const result = isolatedPointFilter(u, 1, false, [
-			[0, 5],
-			[15, 20],
-		]);
-		expect(result).toBeNull();
-	});
-
-	it('returns all three kinds of isolated points in one pass', () => {
-		// Leading (firstPos=0 === gaps[0][0]), sandwiched (gaps[1] and gaps[2] share 50),
-		// trailing (lastPos=100 === gaps last end)
-		const xData = [0, 1, 2, 3, 4];
-		const yData = [1, null, 2, null, 3];
-		const u = makeUPlot({
-			xData,
-			yData,
-			idxs: [0, 4],
-			valToPosFn: (val) => (val === 0 ? 0 : 100),
-			posToIdxFn: () => 2, // sandwiched point at idx 2
-		});
-		const gaps = [
-			[0, 20],
-			[40, 50],
-			[50, 80],
-			[90, 100],
-		];
-		const result = isolatedPointFilter(u, 1, false, gaps);
-		expect(result).toContain(0); // leading
-		expect(result).toContain(2); // sandwiched
-		expect(result).toContain(4); // trailing
-	});
-});

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

@@ -24,10 +24,10 @@ export function isInvalidPlotValue(value: unknown): boolean {
 		}
 
 		// Try to parse the string as a number
-		const parsedNumber = parseFloat(value);
+		const numValue = parseFloat(value);
 
 		// If parsing failed or resulted in a non-finite number, it's invalid
-		if (Number.isNaN(parsedNumber) || !Number.isFinite(parsedNumber)) {
+		if (Number.isNaN(numValue) || !Number.isFinite(numValue)) {
 			return true;
 		}
 	}
@@ -51,178 +51,3 @@ export function normalizePlotValue(
 	// Already a valid number
 	return value as number;
 }
-
-export interface SeriesSpanGapsOption {
-	spanGaps?: boolean | number;
-}
-
-// Internal type alias: a series value array that may contain nulls/undefineds.
-// uPlot uses null to draw a visible gap and undefined to represent "no sample"
-// (the line continues across undefined points but breaks at null ones).
-type SeriesArray = Array<number | null | undefined>;
-
-/**
- * Returns true if the given gap size exceeds the numeric spanGaps threshold
- * of at least one series. Used to decide whether to insert a null break point.
- */
-function gapExceedsThreshold(
-	gapSize: number,
-	seriesOptions: SeriesSpanGapsOption[],
-): boolean {
-	return seriesOptions.some(
-		({ spanGaps }) =>
-			typeof spanGaps === 'number' && spanGaps > 0 && gapSize > spanGaps,
-	);
-}
-
-/**
- * For each series with a numeric spanGaps threshold, insert a null data point
- * between consecutive x timestamps whose gap exceeds the threshold.
- *
- * Why: uPlot draws a continuous line between all non-null points. When the
- * time gap between two consecutive samples is larger than the configured
- * spanGaps value, we inject a synthetic null at the midpoint so uPlot renders
- * a visible break instead of a misleading straight line across the gap.
- *
- * Because uPlot's AlignedData shares a single x-axis across all series, a null
- * is inserted for every series at each position where any series needs a break.
- *
- * Two-pass approach for performance:
- *   Pass 1 — count how many nulls will be inserted (no allocations).
- *   Pass 2 — fill pre-allocated output arrays by index (no push/reallocation).
- */
-export function insertLargeGapNullsIntoAlignedData(
-	data: uPlot.AlignedData,
-	seriesOptions: SeriesSpanGapsOption[],
-): uPlot.AlignedData {
-	const [xValues, ...seriesValues] = data;
-
-	if (
-		!Array.isArray(xValues) ||
-		xValues.length < 2 ||
-		seriesValues.length === 0
-	) {
-		return data;
-	}
-
-	const timestamps = xValues as number[];
-	const totalPoints = timestamps.length;
-
-	// Pass 1: count insertions needed so we know the exact output length.
-	// This lets us pre-allocate arrays rather than growing them dynamically.
-	let insertionCount = 0;
-	for (let i = 0; i < totalPoints - 1; i += 1) {
-		if (gapExceedsThreshold(timestamps[i + 1] - timestamps[i], seriesOptions)) {
-			insertionCount += 1;
-		}
-	}
-
-	// No gaps exceed any threshold — return the original data unchanged.
-	if (insertionCount === 0) {
-		return data;
-	}
-
-	// Pass 2: build output arrays of exact size and fill them.
-	// `writeIndex` is the write cursor into the output arrays.
-	const outputLen = totalPoints + insertionCount;
-	const newX = new Array<number>(outputLen);
-	const newSeries: SeriesArray[] = seriesValues.map(
-		() => new Array<number | null | undefined>(outputLen),
-	);
-
-	let writeIndex = 0;
-	for (let i = 0; i < totalPoints; i += 1) {
-		// Copy the real data point at position i
-		newX[writeIndex] = timestamps[i];
-		for (
-			let seriesIndex = 0;
-			seriesIndex < seriesValues.length;
-			seriesIndex += 1
-		) {
-			newSeries[seriesIndex][writeIndex] = (seriesValues[
-				seriesIndex
-			] as SeriesArray)[i];
-		}
-		writeIndex += 1;
-
-		// If the gap to the next x timestamp exceeds the threshold, insert a
-		// synthetic null at the midpoint. The midpoint x is placed halfway
-		// between timestamps[i] and timestamps[i+1] (minimum 1 unit past timestamps[i] to stay unique).
-		if (
-			i < totalPoints - 1 &&
-			gapExceedsThreshold(timestamps[i + 1] - timestamps[i], seriesOptions)
-		) {
-			newX[writeIndex] =
-				timestamps[i] +
-				Math.max(1, Math.floor((timestamps[i + 1] - timestamps[i]) / 2));
-			for (
-				let seriesIndex = 0;
-				seriesIndex < seriesValues.length;
-				seriesIndex += 1
-			) {
-				newSeries[seriesIndex][writeIndex] = null; // null tells uPlot to break the line here
-			}
-			writeIndex += 1;
-		}
-	}
-
-	return [newX, ...newSeries] as uPlot.AlignedData;
-}
-
-/**
- * Apply per-series spanGaps (boolean | number) handling to an aligned dataset.
- *
- * spanGaps controls how uPlot handles gaps in a series:
- *   - boolean true  → convert null → undefined so uPlot spans over every gap
- *                     (draws a continuous line, skipping missing samples)
- *   - boolean false → no change; nulls render as visible breaks (default)
- *   - number        → insert a null break point between any two consecutive
- *                     timestamps whose difference exceeds the threshold;
- *                     gaps smaller than the threshold are left as-is
- *
- * The input data is expected to be of the form:
- * [xValues, series1Values, series2Values, ...]
- */
-export function applySpanGapsToAlignedData(
-	data: uPlot.AlignedData,
-	seriesOptions: SeriesSpanGapsOption[],
-): uPlot.AlignedData {
-	const [xValues, ...seriesValues] = data;
-
-	if (!Array.isArray(xValues) || seriesValues.length === 0) {
-		return data;
-	}
-
-	// Numeric spanGaps: operates on the whole dataset at once because inserting
-	// null break points requires modifying the shared x-axis.
-	const hasNumericSpanGaps = seriesOptions.some(
-		({ spanGaps }) => typeof spanGaps === 'number',
-	);
-	const gapProcessed = hasNumericSpanGaps
-		? insertLargeGapNullsIntoAlignedData(data, seriesOptions)
-		: data;
-
-	// Boolean spanGaps === true: convert null → undefined per series so uPlot
-	// draws a continuous line across missing samples instead of breaking it.
-	// Skip this pass entirely if no series uses spanGaps: true.
-	const hasBooleanTrue = seriesOptions.some(({ spanGaps }) => spanGaps === true);
-	if (!hasBooleanTrue) {
-		return gapProcessed;
-	}
-
-	const [newX, ...newSeries] = gapProcessed;
-	const transformedSeries = newSeries.map((yValues, seriesIndex) => {
-		const { spanGaps } = seriesOptions[seriesIndex] ?? {};
-		if (spanGaps !== true) {
-			// This series doesn't use spanGaps: true — leave it unchanged.
-			return yValues;
-		}
-		// Replace null with undefined: uPlot skips undefined points without
-		// breaking the line, effectively spanning over the gap.
-		return (yValues as SeriesArray).map((pointValue) =>
-			pointValue === null ? undefined : pointValue,
-		) as uPlot.AlignedData[0];
-	});
-
-	return [newX, ...transformedSeries] as uPlot.AlignedData;
-}

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

@@ -1,93 +0,0 @@
-import uPlot from 'uplot';
-
-/**
- * Scans outward from approxIdx to find the nearest non-null data index.
- * posToIdx can land on a null when pixel density exceeds 1 point-per-pixel.
- */
-export function findNearestNonNull(
-	yData: (number | null | undefined)[],
-	approxIdx: number,
-): number {
-	for (let j = 1; j < 100; j++) {
-		if (yData[approxIdx + j] != null) {
-			return approxIdx + j;
-		}
-		if (yData[approxIdx - j] != null) {
-			return approxIdx - j;
-		}
-	}
-	return approxIdx;
-}
-
-/**
- * Returns data indices of points sandwiched between two consecutive gaps that
- * share a pixel boundary — meaning a point (or cluster) is isolated between them.
- */
-export function findSandwichedIndices(
-	gaps: number[][],
-	yData: (number | null | undefined)[],
-	uPlotInstance: uPlot,
-): number[] {
-	const indices: number[] = [];
-	for (let i = 0; i < gaps.length; i++) {
-		const nextGap = gaps[i + 1];
-		if (nextGap && gaps[i][1] === nextGap[0]) {
-			const approxIdx = uPlotInstance.posToIdx(gaps[i][1], true);
-			indices.push(
-				yData[approxIdx] == null ? findNearestNonNull(yData, approxIdx) : approxIdx,
-			);
-		}
-	}
-	return indices;
-}
-
-/**
- * Points filter that shows data points isolated by gap-nulls (no connecting line).
- * Used when spanGaps threshold mode injects nulls around gaps — without this,
- * lone points become invisible because no line connects to them.
- *
- * Uses uPlot's gap pixel array rather than checking raw null neighbors in the
- * data array. Returns an array of data indices (not a bitmask); null = no points.
- *
-
- */
-// eslint-disable-next-line max-params
-export function isolatedPointFilter(
-	uPlotInstance: uPlot,
-	seriesIdx: number,
-	show: boolean,
-	gaps?: null | number[][],
-): number[] | null {
-	if (show || !gaps || gaps.length === 0) {
-		return null;
-	}
-
-	const idxs = uPlotInstance.series[seriesIdx].idxs;
-	if (!idxs) {
-		return null;
-	}
-
-	const [firstIdx, lastIdx] = idxs;
-	const xData = uPlotInstance.data[0] as number[];
-	const yData = uPlotInstance.data[seriesIdx] as (number | null | undefined)[];
-
-	// valToPos with canvas=true matches the pixel space used by the gaps array.
-	const firstPos = Math.round(
-		uPlotInstance.valToPos(xData[firstIdx], 'x', true),
-	);
-	const lastPos = Math.round(uPlotInstance.valToPos(xData[lastIdx], 'x', true));
-
-	const filtered: number[] = [];
-
-	if (gaps[0][0] === firstPos) {
-		filtered.push(firstIdx);
-	}
-
-	filtered.push(...findSandwichedIndices(gaps, yData, uPlotInstance));
-
-	if (gaps[gaps.length - 1][1] === lastPos) {
-		filtered.push(lastIdx);
-	}
-
-	return filtered.length ? filtered : null;
-}

frontend/src/pages/UnAuthorized/index.styles.scss

@@ -1,5 +0,0 @@
-.unauthorized-page {
-	&__description {
-		text-align: center;
-	}
-}

frontend/src/pages/UnAuthorized/index.tsx

@@ -1,51 +1,20 @@
-import { useCallback } from 'react';
 import { Space, Typography } from 'antd';
 import UnAuthorized from 'assets/UnAuthorized';
-import { Container } from 'components/NotFound/styles';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { useQueryState } from 'nuqs';
-import { handleContactSupport } from 'pages/Integrations/utils';
-
-import { useAppContext } from '../../providers/App/App';
-import { USER_ROLES } from '../../types/roles';
-
-import './index.styles.scss';
+import { Button, Container } from 'components/NotFound/styles';
+import ROUTES from 'constants/routes';
 
 function UnAuthorizePage(): JSX.Element {
-	const [debugCurrentRole] = useQueryState('currentRole');
-	const { user } = useAppContext();
-	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
-
-	const userIsAnonymous =
-		debugCurrentRole === USER_ROLES.ANONYMOUS ||
-		user.role === USER_ROLES.ANONYMOUS;
-	const mistakeMessage = userIsAnonymous
-		? 'If you believe this is a mistake, please contact your administrator or'
-		: 'Please contact your administrator.';
-
-	const handleContactSupportClick = useCallback((): void => {
-		handleContactSupport(isCloudUserVal);
-	}, [isCloudUserVal]);
-
 	return (
-		<Container className="unauthorized-page">
+		<Container>
 			<Space align="center" direction="vertical">
-				<UnAuthorized width={64} height={64} />
-				<Typography.Title level={3}>Access Restricted</Typography.Title>
+				<UnAuthorized />
+				<Typography.Title level={3}>
+					Oops.. you don&apos;t have permission to view this page
+				</Typography.Title>
 
-				<p className="unauthorized-page__description">
-					It looks like you don&lsquo;t have permission to view this page. <br />
-					{mistakeMessage}
-					{userIsAnonymous ? (
-						<Typography.Link
-							className="contact-support-link"
-							onClick={handleContactSupportClick}
-						>
-							{' '}
-							reach out to us.
-						</Typography.Link>
-					) : null}
-				</p>
+				<Button to={ROUTES.HOME} tabIndex={0} className="periscope-btn primary">
+					Return To Home
+				</Button>
 			</Space>
 		</Container>
 	);

frontend/src/providers/App/App.tsx

@@ -19,12 +19,6 @@ import getUserVersion from 'api/v1/version/get';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import dayjs from 'dayjs';
 import useActiveLicenseV3 from 'hooks/useActiveLicenseV3/useActiveLicenseV3';
-import {
-	IsAdminPermission,
-	IsEditorPermission,
-	IsViewerPermission,
-} from 'hooks/useAuthZ/legacy';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import { useGetFeatureFlag } from 'hooks/useGetFeatureFlag';
 import { useGlobalEventListener } from 'hooks/useGlobalEventListener';
 import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
@@ -40,7 +34,7 @@ import {
 	UserPreference,
 } from 'types/api/preferences/preference';
 import { Organization } from 'types/api/user/getOrganization';
-import { ROLES, USER_ROLES } from 'types/roles';
+import { USER_ROLES } from 'types/roles';
 
 import { IAppContext, IUser } from './types';
 import { getUserDefaults } from './utils';
@@ -49,7 +43,7 @@ export const AppContext = createContext<IAppContext | undefined>(undefined);
 
 export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 	// on load of the provider set the user defaults with access token , refresh token from local storage
-	const [defaultUser, setDefaultUser] = useState<IUser>(() => getUserDefaults());
+	const [user, setUser] = useState<IUser>(() => getUserDefaults());
 	const [activeLicense, setActiveLicense] = useState<LicenseResModel | null>(
 		null,
 	);
@@ -76,51 +70,18 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 	// if logged out and trying to hit any route none of these calls will trigger
 	const {
 		data: userData,
-		isFetching: isFetchingUserData,
-		error: userFetchDataError,
+		isFetching: isFetchingUser,
+		error: userFetchError,
 	} = useQuery({
 		queryFn: get,
 		queryKey: ['/api/v1/user/me'],
 		enabled: isLoggedIn,
 	});
 
-	const {
-		permissions: permissionsResult,
-		isFetching: isFetchingPermissions,
-		error: errorOnPermissions,
-		refetchPermissions,
-	} = useAuthZ([IsAdminPermission, IsEditorPermission, IsViewerPermission], {
-		enabled: isLoggedIn,
-	});
-
-	const isFetchingUser = isFetchingUserData || isFetchingPermissions;
-	const userFetchError = userFetchDataError || errorOnPermissions;
-
-	const userRole = useMemo(() => {
-		if (permissionsResult?.[IsAdminPermission]?.isGranted) {
-			return USER_ROLES.ADMIN;
-		}
-		if (permissionsResult?.[IsEditorPermission]?.isGranted) {
-			return USER_ROLES.EDITOR;
-		}
-		if (permissionsResult?.[IsViewerPermission]?.isGranted) {
-			return USER_ROLES.VIEWER;
-		}
-		// if none of the permissions, so anonymous
-		return USER_ROLES.ANONYMOUS;
-	}, [permissionsResult]);
-
-	const user: IUser = useMemo(() => {
-		return {
-			...defaultUser,
-			role: userRole as ROLES,
-		};
-	}, [defaultUser, userRole]);
-
 	useEffect(() => {
 		if (!isFetchingUser && userData && userData.data) {
 			setLocalStorageApi(LOCALSTORAGE.LOGGED_IN_USER_EMAIL, userData.data.email);
-			setDefaultUser((prev) => ({
+			setUser((prev) => ({
 				...prev,
 				...userData.data,
 			}));
@@ -242,7 +203,7 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 	}, [userPreferencesData, isFetchingUserPreferences, isLoggedIn]);
 
 	function updateUser(user: IUser): void {
-		setDefaultUser((prev) => ({
+		setUser((prev) => ({
 			...prev,
 			...user,
 		}));
@@ -283,7 +244,7 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 					...org.slice(orgIndex + 1, org.length),
 				];
 				setOrg(updatedOrg);
-				setDefaultUser((prev) => {
+				setUser((prev) => {
 					if (prev.orgId === orgId) {
 						return {
 							...prev,
@@ -311,7 +272,7 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 	// global event listener for AFTER_LOGIN event to start the user fetch post all actions are complete
 	useGlobalEventListener('AFTER_LOGIN', (event) => {
 		if (event.detail) {
-			setDefaultUser((prev) => ({
+			setUser((prev) => ({
 				...prev,
 				accessJwt: event.detail.accessJWT,
 				refreshJwt: event.detail.refreshJWT,
@@ -319,14 +280,12 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 			}));
 			setIsLoggedIn(true);
 		}
-
-		refetchPermissions();
 	});
 
 	// global event listener for LOGOUT event to clean the app context state
 	useGlobalEventListener('LOGOUT', () => {
 		setIsLoggedIn(false);
-		setDefaultUser(getUserDefaults());
+		setUser(getUserDefaults());
 		setActiveLicense(null);
 		setTrialInfo(null);
 		setFeatureFlags(null);

frontend/src/providers/App/__tests__/App.test.tsx

@@ -1,273 +0,0 @@
-import { ReactElement } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { renderHook, waitFor } from '@testing-library/react';
-import setLocalStorageApi from 'api/browser/localstorage/set';
-import {
-	AuthtypesGettableTransactionDTO,
-	AuthtypesTransactionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { SINGLE_FLIGHT_WAIT_TIME_MS } from 'hooks/useAuthZ/constants';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { USER_ROLES } from 'types/roles';
-
-import { AppProvider, useAppContext } from '../App';
-
-const AUTHZ_CHECK_URL = 'http://localhost/api/v1/authz/check';
-
-jest.mock('constants/env', () => ({
-	ENVIRONMENT: { baseURL: 'http://localhost', wsURL: '' },
-}));
-
-/**
- * Since we are mocking the check permissions, this is needed
- */
-const waitForSinglePreflightToFinish = async (): Promise<void> =>
-	await new Promise((r) => setTimeout(r, SINGLE_FLIGHT_WAIT_TIME_MS));
-
-function authzMockResponse(
-	payload: AuthtypesTransactionDTO[],
-	authorizedByIndex: boolean[],
-): { data: AuthtypesGettableTransactionDTO[]; status: string } {
-	return {
-		data: payload.map((txn, i) => ({
-			relation: txn.relation,
-			object: txn.object,
-			authorized: authorizedByIndex[i] ?? false,
-		})),
-		status: 'success',
-	};
-}
-
-const queryClient = new QueryClient({
-	defaultOptions: {
-		queries: {
-			refetchOnWindowFocus: false,
-			retry: false,
-		},
-	},
-});
-
-function createWrapper(): ({
-	children,
-}: {
-	children: ReactElement;
-}) => ReactElement {
-	return function Wrapper({
-		children,
-	}: {
-		children: ReactElement;
-	}): ReactElement {
-		return (
-			<QueryClientProvider client={queryClient}>
-				<AppProvider>{children}</AppProvider>
-			</QueryClientProvider>
-		);
-	};
-}
-
-describe('AppProvider user.role from permissions', () => {
-	beforeEach(() => {
-		queryClient.clear();
-		setLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN, 'true');
-	});
-
-	it('sets user.role to ADMIN and hasEditPermission to true when admin permission is granted', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [true, false, false])),
-				);
-			}),
-		);
-
-		const wrapper = createWrapper();
-		const { result } = renderHook(() => useAppContext(), { wrapper });
-
-		await waitForSinglePreflightToFinish();
-
-		await waitFor(
-			() => {
-				expect(result.current.user.role).toBe(USER_ROLES.ADMIN);
-				expect(result.current.hasEditPermission).toBe(true);
-			},
-			{ timeout: 2000 },
-		);
-	});
-
-	it('sets user.role to EDITOR and hasEditPermission to true when only editor permission is granted', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [false, true, false])),
-				);
-			}),
-		);
-
-		const wrapper = createWrapper();
-		const { result } = renderHook(() => useAppContext(), { wrapper });
-
-		await waitForSinglePreflightToFinish();
-
-		await waitFor(
-			() => {
-				expect(result.current.user.role).toBe(USER_ROLES.EDITOR);
-				expect(result.current.hasEditPermission).toBe(true);
-			},
-			{ timeout: 2000 },
-		);
-	});
-
-	it('sets user.role to VIEWER and hasEditPermission to false when only viewer permission is granted', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [false, false, true])),
-				);
-			}),
-		);
-
-		const wrapper = createWrapper();
-		const { result } = renderHook(() => useAppContext(), { wrapper });
-
-		await waitForSinglePreflightToFinish();
-
-		await waitFor(
-			() => {
-				expect(result.current.user.role).toBe(USER_ROLES.VIEWER);
-				expect(result.current.hasEditPermission).toBe(false);
-			},
-			{ timeout: 2000 },
-		);
-	});
-
-	it('sets user.role to ANONYMOUS and hasEditPermission to false when no role permission is granted', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [false, false, false])),
-				);
-			}),
-		);
-
-		const wrapper = createWrapper();
-		const { result } = renderHook(() => useAppContext(), { wrapper });
-
-		await waitForSinglePreflightToFinish();
-
-		await waitFor(
-			() => {
-				expect(result.current.user.role).toBe(USER_ROLES.ANONYMOUS);
-				expect(result.current.hasEditPermission).toBe(false);
-			},
-			{ timeout: 2000 },
-		);
-	});
-
-	/**
-	 * This is expected to not happen, but we'll test it just in case.
-	 */
-	describe('when multiple role permissions are granted', () => {
-		it('prefers ADMIN over EDITOR and VIEWER when multiple role permissions are granted', async () => {
-			server.use(
-				rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-					const payload = await req.json();
-					return res(
-						ctx.status(200),
-						ctx.json(authzMockResponse(payload, [true, true, true])),
-					);
-				}),
-			);
-
-			const wrapper = createWrapper();
-			const { result } = renderHook(() => useAppContext(), { wrapper });
-
-			await waitFor(
-				() => {
-					expect(result.current.user.role).toBe(USER_ROLES.ADMIN);
-					expect(result.current.hasEditPermission).toBe(true);
-				},
-				{ timeout: 300 },
-			);
-		});
-
-		it('prefers EDITOR over VIEWER when editor and viewer permissions are granted', async () => {
-			server.use(
-				rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-					const payload = await req.json();
-					return res(
-						ctx.status(200),
-						ctx.json(authzMockResponse(payload, [false, true, true])),
-					);
-				}),
-			);
-
-			const wrapper = createWrapper();
-			const { result } = renderHook(() => useAppContext(), { wrapper });
-
-			await waitForSinglePreflightToFinish();
-
-			await waitFor(
-				() => {
-					expect(result.current.user.role).toBe(USER_ROLES.EDITOR);
-					expect(result.current.hasEditPermission).toBe(true);
-				},
-				{ timeout: 2000 },
-			);
-		});
-	});
-});
-
-describe('AppProvider when authz/check fails', () => {
-	beforeEach(() => {
-		queryClient.clear();
-		setLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN, 'true');
-	});
-
-	it('sets userFetchError when authz/check returns 500 (same as user fetch error)', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_, res, ctx) =>
-				res(ctx.status(500), ctx.json({ error: 'Internal Server Error' })),
-			),
-		);
-
-		const wrapper = createWrapper();
-		const { result } = renderHook(() => useAppContext(), { wrapper });
-
-		await waitForSinglePreflightToFinish();
-
-		await waitFor(
-			() => {
-				expect(result.current.userFetchError).toBeTruthy();
-			},
-			{ timeout: 2000 },
-		);
-	});
-
-	it('sets userFetchError when authz/check fails with network error (same as user fetch error)', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_, res) => res.networkError('Network error')),
-		);
-
-		const wrapper = createWrapper();
-		const { result } = renderHook(() => useAppContext(), { wrapper });
-
-		await waitForSinglePreflightToFinish();
-
-		await waitFor(
-			() => {
-				expect(result.current.userFetchError).toBeTruthy();
-			},
-			{ timeout: 2000 },
-		);
-	});
-});

frontend/src/types/api/dashboard/getAll.ts

@@ -141,7 +141,6 @@ export interface IBaseWidget {
 	showPoints?: boolean;
 	lineStyle?: LineStyle;
 	fillMode?: FillMode;
-	spanGaps?: boolean | number;
 }
 export interface Widgets extends IBaseWidget {
 	query: Query;

frontend/src/types/api/user/getUser.ts

@@ -13,9 +13,6 @@ export interface UserResponse {
 	displayName: string;
 	orgId: string;
 	organization: string;
-	/**
-	 * @deprecated This will be removed in the future releases in favor of new AuthZ framework
-	 */
 	role: ROLES;
 	updatedAt?: number;
 }

frontend/src/types/roles.ts

@@ -2,16 +2,14 @@ export type ADMIN = 'ADMIN';
 export type VIEWER = 'VIEWER';
 export type EDITOR = 'EDITOR';
 export type AUTHOR = 'AUTHOR';
-export type ANONYMOUS = 'ANONYMOUS';
 
-export type ROLES = ADMIN | VIEWER | EDITOR | AUTHOR | ANONYMOUS;
+export type ROLES = ADMIN | VIEWER | EDITOR | AUTHOR;
 
 export const USER_ROLES = {
 	ADMIN: 'ADMIN',
 	VIEWER: 'VIEWER',
 	EDITOR: 'EDITOR',
 	AUTHOR: 'AUTHOR',
-	ANONYMOUS: 'ANONYMOUS',
 };
 
 export enum RoleType {

frontend/src/utils/permission/index.ts

@@ -69,7 +69,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	ALERT_OVERVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LOGIN: ['ADMIN', 'EDITOR', 'VIEWER'],
 	FORGOT_PASSWORD: ['ADMIN', 'EDITOR', 'VIEWER'],
-	NOT_FOUND: ['ADMIN', 'VIEWER', 'EDITOR', 'ANONYMOUS'],
+	NOT_FOUND: ['ADMIN', 'VIEWER', 'EDITOR'],
 	PASSWORD_RESET: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SERVICE_METRICS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
@@ -77,7 +77,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	TRACES_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	TRACE: ['ADMIN', 'EDITOR', 'VIEWER'],
 	TRACE_DETAIL: ['ADMIN', 'EDITOR', 'VIEWER'],
-	UN_AUTHORIZED: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
+	UN_AUTHORIZED: ['ADMIN', 'EDITOR', 'VIEWER'],
 	USAGE_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	VERSION: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LOGS: ['ADMIN', 'EDITOR', 'VIEWER'],
@@ -101,7 +101,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	ROLE_DETAILS: ['ADMIN'],
 	MEMBERS_SETTINGS: ['ADMIN'],
 	BILLING: ['ADMIN'],
-	SUPPORT: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
+	SUPPORT: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SOMETHING_WENT_WRONG: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LOGS_SAVE_VIEWS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	TRACES_SAVE_VIEWS: ['ADMIN', 'EDITOR', 'VIEWER'],

frontend/yarn.lock

@@ -4506,19 +4506,6 @@
     "@radix-ui/react-use-callback-ref" "1.1.1"
     "@radix-ui/react-use-escape-keydown" "1.1.1"
 
-"@radix-ui/react-dropdown-menu@^2.1.16":
-  version "2.1.16"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz#5ee045c62bad8122347981c479d92b1ff24c7254"
-  integrity sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==
-  dependencies:
-    "@radix-ui/primitive" "1.1.3"
-    "@radix-ui/react-compose-refs" "1.1.2"
-    "@radix-ui/react-context" "1.1.2"
-    "@radix-ui/react-id" "1.1.1"
-    "@radix-ui/react-menu" "2.1.16"
-    "@radix-ui/react-primitive" "2.1.3"
-    "@radix-ui/react-use-controllable-state" "1.2.2"
-
 "@radix-ui/react-focus-guards@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz#339c1c69c41628c1a5e655f15f7020bf11aa01fa"
@@ -4578,30 +4565,6 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.1"
 
-"@radix-ui/react-menu@2.1.16":
-  version "2.1.16"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.1.16.tgz#528a5a973c3a7413d3d49eb9ccd229aa52402911"
-  integrity sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==
-  dependencies:
-    "@radix-ui/primitive" "1.1.3"
-    "@radix-ui/react-collection" "1.1.7"
-    "@radix-ui/react-compose-refs" "1.1.2"
-    "@radix-ui/react-context" "1.1.2"
-    "@radix-ui/react-direction" "1.1.1"
-    "@radix-ui/react-dismissable-layer" "1.1.11"
-    "@radix-ui/react-focus-guards" "1.1.3"
-    "@radix-ui/react-focus-scope" "1.1.7"
-    "@radix-ui/react-id" "1.1.1"
-    "@radix-ui/react-popper" "1.2.8"
-    "@radix-ui/react-portal" "1.1.9"
-    "@radix-ui/react-presence" "1.1.5"
-    "@radix-ui/react-primitive" "2.1.3"
-    "@radix-ui/react-roving-focus" "1.1.11"
-    "@radix-ui/react-slot" "1.2.3"
-    "@radix-ui/react-use-callback-ref" "1.1.1"
-    aria-hidden "^1.2.4"
-    react-remove-scroll "^2.6.3"
-
 "@radix-ui/react-popover@^1.1.15", "@radix-ui/react-popover@^1.1.2":
   version "1.1.15"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.1.15.tgz#9c852f93990a687ebdc949b2c3de1f37cdc4c5d5"
@@ -4841,20 +4804,6 @@
     "@radix-ui/react-roving-focus" "1.0.4"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
-"@radix-ui/react-tabs@^1.1.3":
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz#3537ce379d7e7ff4eeb6b67a0973e139c2ac1f15"
-  integrity sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==
-  dependencies:
-    "@radix-ui/primitive" "1.1.3"
-    "@radix-ui/react-context" "1.1.2"
-    "@radix-ui/react-direction" "1.1.1"
-    "@radix-ui/react-id" "1.1.1"
-    "@radix-ui/react-presence" "1.1.5"
-    "@radix-ui/react-primitive" "2.1.3"
-    "@radix-ui/react-roving-focus" "1.1.11"
-    "@radix-ui/react-use-controllable-state" "1.2.2"
-
 "@radix-ui/react-toggle-group@^1.1.7":
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz#e513d6ffdb07509b400ab5b26f2523747c0d51c1"
@@ -5726,42 +5675,6 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
-"@signozhq/ui@0.0.5":
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/@signozhq/ui/-/ui-0.0.5.tgz#8badef53416b7ace0fe61ff01ff3da679a0e4ba5"
-  integrity sha512-4vPvUh3rwpst068qXUZ26JfCQGv1vo1xMSwtKw6wTjiiq1Bf3geP84HWVXycNMIrIeVnUgDGnqe0D4doh+mL8A==
-  dependencies:
-    "@radix-ui/react-checkbox" "^1.2.3"
-    "@radix-ui/react-dialog" "^1.1.11"
-    "@radix-ui/react-dropdown-menu" "^2.1.16"
-    "@radix-ui/react-icons" "^1.3.0"
-    "@radix-ui/react-popover" "^1.1.15"
-    "@radix-ui/react-radio-group" "^1.3.4"
-    "@radix-ui/react-slot" "^1.2.3"
-    "@radix-ui/react-switch" "^1.1.4"
-    "@radix-ui/react-tabs" "^1.1.3"
-    "@radix-ui/react-toggle" "^1.1.6"
-    "@radix-ui/react-toggle-group" "^1.1.7"
-    "@radix-ui/react-tooltip" "^1.2.6"
-    "@tanstack/react-table" "^8.21.3"
-    "@tanstack/react-virtual" "^3.13.9"
-    "@types/lodash-es" "^4.17.12"
-    class-variance-authority "^0.7.0"
-    clsx "^2.1.1"
-    cmdk "^1.1.1"
-    date-fns "^4.1.0"
-    dayjs "^1.11.10"
-    lodash-es "^4.17.21"
-    lucide-react "^0.445.0"
-    lucide-solid "^0.510.0"
-    motion "^11.11.17"
-    next-themes "^0.4.6"
-    nuqs "^2.8.9"
-    react-day-picker "^9.8.1"
-    react-resizable-panels "^4.7.1"
-    sonner "^2.0.7"
-    tailwind-merge "^3.5.0"
-
 "@sinclair/typebox@^0.25.16":
   version "0.25.24"
   resolved "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.25.24.tgz"
@@ -9660,11 +9573,6 @@ dayjs@^1.10.7, dayjs@^1.11.1:
   resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
-dayjs@^1.11.10:
-  version "1.11.20"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.20.tgz#88d919fd639dc991415da5f4cb6f1b6650811938"
-  integrity sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==
-
 debounce@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
@@ -11184,15 +11092,6 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-framer-motion@^11.18.2:
-  version "11.18.2"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.18.2.tgz#0c6bd05677f4cfd3b3bdead4eb5ecdd5ed245718"
-  integrity sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==
-  dependencies:
-    motion-dom "^11.18.1"
-    motion-utils "^11.18.1"
-    tslib "^2.4.0"
-
 framer-motion@^12.4.13:
   version "12.4.13"
   resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-12.4.13.tgz#1efd954f95e6a54685b660929c00f5a61e35256a"
@@ -15103,13 +15002,6 @@ moment@^2.29.4:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
-motion-dom@^11.18.1:
-  version "11.18.1"
-  resolved "https://registry.yarnpkg.com/motion-dom/-/motion-dom-11.18.1.tgz#e7fed7b7dc6ae1223ef1cce29ee54bec826dc3f2"
-  integrity sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==
-  dependencies:
-    motion-utils "^11.18.1"
-
 motion-dom@^12.4.11:
   version "12.4.11"
   resolved "https://registry.yarnpkg.com/motion-dom/-/motion-dom-12.4.11.tgz#0419c8686cda4d523f08249deeb8fa6683a9b9d3"
@@ -15117,11 +15009,6 @@ motion-dom@^12.4.11:
   dependencies:
     motion-utils "^12.4.10"
 
-motion-utils@^11.18.1:
-  version "11.18.1"
-  resolved "https://registry.yarnpkg.com/motion-utils/-/motion-utils-11.18.1.tgz#671227669833e991c55813cf337899f41327db5b"
-  integrity sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==
-
 motion-utils@^12.4.10:
   version "12.4.10"
   resolved "https://registry.yarnpkg.com/motion-utils/-/motion-utils-12.4.10.tgz#3d93acea5454419eaaad8d5e5425cb71cbfa1e7f"
@@ -15135,14 +15022,6 @@ motion@12.4.13:
     framer-motion "^12.4.13"
     tslib "^2.4.0"
 
-motion@^11.11.17:
-  version "11.18.2"
-  resolved "https://registry.yarnpkg.com/motion/-/motion-11.18.2.tgz#17fb372f3ed94fc9ee1384a25a9068e9da1951e7"
-  integrity sha512-JLjvFDuFr42NFtcVoMAyC2sEjnpA8xpy6qWPyzQvCloznAyQ8FIXioxWfHiLtgYhoVpfUqSWpn1h9++skj9+Wg==
-  dependencies:
-    framer-motion "^11.18.2"
-    tslib "^2.4.0"
-
 mri@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
@@ -15413,13 +15292,6 @@ nuqs@2.8.8:
   dependencies:
     "@standard-schema/spec" "1.0.0"
 
-nuqs@^2.8.9:
-  version "2.8.9"
-  resolved "https://registry.yarnpkg.com/nuqs/-/nuqs-2.8.9.tgz#e2c27d87c0dd0e3b4412fe867bcd0947cc4c998f"
-  integrity sha512-8ou6AEwsxMWSYo2qkfZtYFVzngwbKmg4c00HVxC1fF6CEJv3Fwm6eoZmfVPALB+vw8Udo7KL5uy96PFcYe1BIQ==
-  dependencies:
-    "@standard-schema/spec" "1.0.0"
-
 nwsapi@^2.2.2:
   version "2.2.23"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.23.tgz#59712c3a88e6de2bb0b6ccc1070397267019cf6c"
@@ -17085,11 +16957,6 @@ react-resizable-panels@^3.0.5:
   resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-3.0.5.tgz#50a20645263eed02344de4a70d1319bbc0014bbd"
   integrity sha512-3z1yN25DMTXLg2wfyFrW32r5k4WEcUa3F7cJ2EgtNK07lnOs4mpM8yWLGunCpkhcQRwJX4fqoLcIh/pHPxzlmQ==
 
-react-resizable-panels@^4.7.1:
-  version "4.7.3"
-  resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-4.7.3.tgz#4040aa0f5c5c4cc4bb685cb69973601ccda3b014"
-  integrity sha512-PYcYMLtvJD+Pr0TQNeMvddcnLOwUa/Yb4iNwU7ThNLlHaQYEEC9MIBWHaBGODzYuXIkPRZ/OWe5sbzG1Rzq5ew==
-
 react-resizable@3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.4.tgz"
@@ -18930,11 +18797,6 @@ tailwind-merge@^2.5.2:
   resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.6.0.tgz#ac5fb7e227910c038d458f396b7400d93a3142d5"
   integrity sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==
 
-tailwind-merge@^3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-3.5.0.tgz#06502f4496ba15151445d97d916a26564d50d1ca"
-  integrity sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==
-
 tailwindcss-animate@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"

go.mod

@@ -11,6 +11,7 @@ require (
 	github.com/SigNoz/signoz-otel-collector v0.144.2
 	github.com/antlr4-go/antlr/v4 v4.13.1
 	github.com/antonmedv/expr v1.15.3
+	github.com/bytedance/sonic v1.14.1
 	github.com/cespare/xxhash/v2 v2.3.0
 	github.com/coreos/go-oidc/v3 v3.17.0
 	github.com/dgraph-io/ristretto/v2 v2.3.0
@@ -105,7 +106,6 @@ require (
 	github.com/aws/aws-sdk-go-v2/service/sts v1.41.6 // indirect
 	github.com/aws/smithy-go v1.24.0 // indirect
 	github.com/bytedance/gopkg v0.1.3 // indirect
-	github.com/bytedance/sonic v1.14.1 // indirect
 	github.com/bytedance/sonic/loader v0.3.0 // indirect
 	github.com/cloudwego/base64x v0.1.6 // indirect
 	github.com/gabriel-vasile/mimetype v1.4.8 // indirect

perses/all.sh

@@ -0,0 +1,4 @@
+./setup.sh
+sleep 2
+./validate.sh
+./deletePostValidate.sh

perses/cue.mod/module.cue

@@ -0,0 +1,4 @@
+module: "github.com/signoz"
+language: {
+	version: "v0.12.0"
+}

perses/deletePostValidate.sh

@@ -0,0 +1,2 @@
+docker rm -f perses
+rm signoz-0.0.1.tar.gz

perses/examples/perses.json

@@ -0,0 +1,628 @@
+{
+    "kind": "Dashboard",
+    "metadata": {
+        "name": "the-everything-dashboard",
+        "project": "signoz"
+    },
+    "spec": {
+        "display": {
+            "name": "The everything dashboard",
+            "description": "Trying to cover as many concepts here as possible"
+        },
+        "duration": "1h",
+        "variables": [
+            {
+                "kind": "ListVariable",
+                "spec": {
+                    "name": "serviceName",
+                    "display": {
+                        "name": "serviceName"
+                    },
+                    "allowAllValue": true,
+                    "allowMultiple": false,
+                    "plugin": {
+                        "kind": "SigNozDynamicVariable",
+                        "spec": {
+                            "dynamicVariablesAttribute": "service.name",
+                            "dynamicVariablesSource": "Metrics",
+                            "sort": "DISABLED"
+                        }
+                    }
+                }
+            },
+            {
+                "kind": "ListVariable",
+                "spec": {
+                    "name": "statusCodesFromQuery",
+                    "display": {
+                        "name": "statusCodesFromQuery"
+                    },
+                    "allowAllValue": true,
+                    "allowMultiple": true,
+                    "plugin": {
+                        "kind": "SigNozQueryVariable",
+                        "spec": {
+                            "queryValue": "SELECT JSONExtractString(labels, 'http.status_code') AS status_code FROM signoz_metrics.distributed_time_series_v4_1day WHERE status_code != '' GROUP BY status_code",
+                            "sort": "ASC"
+                        }
+                    }
+                }
+            },
+            {
+                "kind": "ListVariable",
+                "spec": {
+                    "name": "limit",
+                    "display": {
+                        "name": "limit"
+                    },
+                    "allowAllValue": false,
+                    "allowMultiple": false,
+                    "plugin": {
+                        "kind": "SigNozCustomVariable",
+                        "spec": {
+                            "customValue": "1,10,20,40,80,160,200",
+                            "sort": "DISABLED"
+                        }
+                    }
+                }
+            }
+        ],
+        "panels": {
+            "24e2697b": {
+                "kind": "Panel",
+                "spec": {
+                    "display": {
+                        "name": "total resp size"
+                    },
+                    "plugin": {
+                        "kind": "TimeSeriesChart",
+                        "spec": {}
+                    },
+                    "queries": [
+                        {
+                            "kind": "TimeSeriesQuery",
+                            "spec": {
+                                "plugin": {
+                                    "kind": "SigNozBuilderQuery",
+                                    "spec": {
+                                        "name": "A",
+                                        "signal": "metrics",
+                                        "expression": "A",
+                                        "aggregations": [
+                                            {
+                                                "metricName": "http.server.response.body.size.sum",
+                                                "reduceTo": "sum",
+                                                "spaceAggregation": "sum",
+                                                "timeAggregation": "rate"
+                                            }
+                                        ],
+                                        "filter": {
+                                            "expression": "http.response.status_code IN $statusCodesFromQuery"
+                                        },
+                                        "groupBy": [
+                                            {
+                                                "name": "service.name",
+                                                "fieldDataType": "string",
+                                                "fieldContext": "tag"
+                                            }
+                                        ]
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                }
+            },
+            "ff2f72f1": {
+                "kind": "Panel",
+                "spec": {
+                    "display": {
+                        "name": "fraction of calls"
+                    },
+                    "plugin": {
+                        "kind": "TimeSeriesChart",
+                        "spec": {}
+                    },
+                    "queries": [
+                        {
+                            "kind": "TimeSeriesQuery",
+                            "spec": {
+                                "plugin": {
+                                    "kind": "SigNozCompositeQuery",
+                                    "spec": {
+                                        "queries": [
+                                            {
+                                                "type": "builder_query",
+                                                "spec": {
+                                                    "name": "A",
+                                                    "signal": "metrics",
+                                                    "expression": "A",
+                                                    "aggregations": [
+                                                        {
+                                                            "metricName": "signoz_calls_total",
+                                                            "reduceTo": "sum",
+                                                            "spaceAggregation": "sum",
+                                                            "timeAggregation": "rate"
+                                                        }
+                                                    ],
+                                                    "filter": {
+                                                        "expression": "service.name IN $serviceName  AND http.status_code IN $statusCodesFromQuery"
+                                                    }
+                                                }
+                                            },
+                                            {
+                                                "type": "builder_query",
+                                                "spec": {
+                                                    "name": "B",
+                                                    "signal": "metrics",
+                                                    "expression": "B",
+                                                    "aggregations": [
+                                                        {
+                                                            "metricName": "signoz_calls_total",
+                                                            "reduceTo": "sum",
+                                                            "spaceAggregation": "sum",
+                                                            "timeAggregation": "rate"
+                                                        }
+                                                    ],
+                                                    "filter": {
+                                                        "expression": "service.name in $serviceName"
+                                                    }
+                                                }
+                                            },
+                                            {
+                                                "type": "builder_formula",
+                                                "spec": {
+                                                    "name": "F1",
+                                                    "expression": "A / B"
+                                                }
+                                            }
+                                        ]
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                }
+            },
+            "011605e7": {
+                "kind": "Panel",
+                "spec": {
+                    "display": {
+                        "name": "total resp size"
+                    },
+                    "plugin": {
+                        "kind": "BarChart",
+                        "spec": {}
+                    },
+                    "queries": [
+                        {
+                            "kind": "TimeSeriesQuery",
+                            "spec": {
+                                "plugin": {
+                                    "kind": "SigNozBuilderQuery",
+                                    "spec": {
+                                        "name": "A",
+                                        "signal": "metrics",
+                                        "expression": "A",
+                                        "aggregations": [
+                                            {
+                                                "metricName": "http.server.response.body.size.sum",
+                                                "reduceTo": "sum",
+                                                "spaceAggregation": "sum",
+                                                "timeAggregation": "rate"
+                                            }
+                                        ],
+                                        "filter": {
+                                            "expression": "http.response.status_code IN $statusCodesFromQuery"
+                                        },
+                                        "groupBy": [
+                                            {
+                                                "name": "service.name",
+                                                "fieldDataType": "string",
+                                                "fieldContext": "tag"
+                                            }
+                                        ]
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                }
+            },
+            "e23516fc": {
+                "kind": "Panel",
+                "spec": {
+                    "display": {
+                        "name": "num traces for service"
+                    },
+                    "plugin": {
+                        "kind": "StatChart",
+                        "spec": {}
+                    },
+                    "queries": [
+                        {
+                            "kind": "TimeSeriesQuery",
+                            "spec": {
+                                "plugin": {
+                                    "kind": "SigNozBuilderQuery",
+                                    "spec": {
+                                        "name": "A",
+                                        "signal": "traces",
+                                        "expression": "A",
+                                        "expressionAggregations": [
+                                            {
+                                                "expression": "count() "
+                                            }
+                                        ],
+                                        "filter": {
+                                            "expression": "service.name = $serviceName "
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                }
+            },
+            "130c8d6b": {
+                "kind": "Panel",
+                "spec": {
+                    "display": {
+                        "name": "num logs for service"
+                    },
+                    "plugin": {
+                        "kind": "StatChart",
+                        "spec": {}
+                    },
+                    "queries": [
+                        {
+                            "kind": "TimeSeriesQuery",
+                            "spec": {
+                                "plugin": {
+                                    "kind": "SigNozBuilderQuery",
+                                    "spec": {
+                                        "name": "A",
+                                        "signal": "logs",
+                                        "expression": "A",
+                                        "expressionAggregations": [
+                                            {
+                                                "expression": "count() "
+                                            }
+                                        ],
+                                        "filter": {
+                                            "expression": "service.name = $serviceName "
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                }
+            },
+            "246f7c6d": {
+                "kind": "Panel",
+                "spec": {
+                    "display": {
+                        "name": "num traces for service per resp code"
+                    },
+                    "plugin": {
+                        "kind": "PieChart",
+                        "spec": {
+                            "radius": 4892398421894629486193
+                        }
+                    },
+                    "queries": [
+                        {
+                            "kind": "TimeSeriesQuery",
+                            "spec": {
+                                "plugin": {
+                                    "kind": "SigNozBuilderQuery",
+                                    "spec": {
+                                        "name": "A",
+                                        "signal": "traces",
+                                        "expression": "A",
+                                        "expressionAggregations": [
+                                            {
+                                                "expression": "count() "
+                                            }
+                                        ],
+                                        "filter": {
+                                            "expression": "service.name = $serviceName isEntryPoint = 'true'"
+                                        },
+                                        "groupBy": [
+                                            {
+                                                "name": "http.response.status_code",
+                                                "fieldDataType": "float64",
+                                                "fieldContext": "tag"
+                                            }
+                                        ],
+                                        "legend": "\"{{http.response.status_code}}\""
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                }
+            },
+            "21f7d4d0": {
+                "kind": "Panel",
+                "spec": {
+                    "display": {
+                        "name": "average latency per service"
+                    },
+                    "plugin": {
+                        "kind": "Table",
+                        "spec": {}
+                    },
+                    "queries": [
+                        {
+                            "kind": "TimeSeriesQuery",
+                            "spec": {
+                                "plugin": {
+                                    "kind": "SigNozClickHouseSQL",
+                                    "spec": {
+                                        "name": "A",
+                                        "query": "WITH\n    __spatial_aggregation_cte AS\n    (\n        SELECT\n            toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(60)) AS ts,\n            `service.name`,\n            le,\n            sum(value) / 60 AS value\n        FROM signoz_metrics.distributed_samples_v4 AS points\n        INNER JOIN\n        (\n            SELECT\n                fingerprint,\n                JSONExtractString(labels, 'service.name') AS `service.name`,\n                JSONExtractString(labels, 'le') AS le\n            FROM signoz_metrics.time_series_v4\n            WHERE (metric_name IN ('signoz_latency.bucket')) AND (LOWER(temporality) LIKE LOWER('delta')) AND (__normalized = 0)\n            GROUP BY\n                fingerprint,\n                `service.name`,\n                le\n        ) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint\n        WHERE metric_name IN ('signoz_latency.bucket')\n        GROUP BY\n            ts,\n            `service.name`,\n            le\n    ),\n    __histogramCTE AS\n    (\n        SELECT\n            ts,\n            `service.name`,\n            histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), 0.9) AS value\n        FROM __spatial_aggregation_cte\n        GROUP BY\n            `service.name`,\n            ts\n        ORDER BY\n            `service.name` ASC,\n            ts ASC\n    )\nSELECT\n    `service.name` AS service,\n    avg(value) AS avgLatency\nFROM __histogramCTE\nGROUP BY `service.name`"
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                }
+            },
+            "ad5fd556": {
+                "kind": "Panel",
+                "spec": {
+                    "display": {
+                        "name": "logs from service"
+                    },
+                    "plugin": {
+                        "kind": "LogsTable",
+                        "spec": {}
+                    },
+                    "queries": [
+                        {
+                            "kind": "LogQuery",
+                            "spec": {
+                                "plugin": {
+                                    "kind": "SigNozBuilderQuery",
+                                    "spec": {
+                                        "name": "A",
+                                        "signal": "logs",
+                                        "expression": "A",
+                                        "expressionAggregations": [
+                                            {
+                                                "expression": "count() "
+                                            }
+                                        ],
+                                        "filter": {
+                                            "expression": "service.name = $serviceName"
+                                        },
+                                        "groupBy": [],
+                                        "order": [
+                                            {
+                                                "columnName": "timestamp",
+                                                "order": "desc"
+                                            },
+                                            {
+                                                "columnName": "id",
+                                                "order": "desc"
+                                            }
+                                        ]
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                }
+            },
+            "f07b59ee": {
+                "kind": "Panel",
+                "spec": {
+                    "display": {
+                        "name": "response size buckets"
+                    },
+                    "plugin": {
+                        "kind": "HistogramChart",
+                        "spec": {}
+                    },
+                    "queries": [
+                        {
+                            "kind": "TimeSeriesQuery",
+                            "spec": {
+                                "plugin": {
+                                    "kind": "SigNozBuilderQuery",
+                                    "spec": {
+                                        "name": "A",
+                                        "signal": "metrics",
+                                        "expression": "A",
+                                        "aggregations": [
+                                            {
+                                                "metricName": "http.server.response.body.size.bucket",
+                                                "reduceTo": "avg",
+                                                "spaceAggregation": "p90",
+                                                "timeAggregation": "rate"
+                                            }
+                                        ]
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                }
+            },
+            "e1a41831": {
+                "kind": "Panel",
+                "spec": {
+                    "display": {
+                        "name": "trace operator"
+                    },
+                    "plugin": {
+                        "kind": "TimeSeriesChart",
+                        "spec": {}
+                    },
+                    "queries": [
+                        {
+                            "kind": "TimeSeriesQuery",
+                            "spec": {
+                                "plugin": {
+                                    "kind": "SigNozCompositeQuery",
+                                    "spec": {      
+                                        "queries": [
+                                            {
+                                                "type": "builder_query",
+                                                "spec": {
+                                                    "name": "A",
+                                                    "signal": "traces",
+                                                    "expression": "A",
+                                                    "expressionAggregations": [
+                                                        {
+                                                            "expression": "count() "
+                                                        }
+                                                    ],
+                                                    "filter": {
+                                                        "expression": "service.name = 'sampleapp-gateway' "
+                                                    },
+                                                    "legend": "Gateway"
+                                                }
+                                            },
+                                            {
+                                                "type": "builder_query",
+                                                "spec": {
+                                                    "name": "B",
+                                                    "signal": "traces",
+                                                    "expression": "B",
+                                                    "expressionAggregations": [
+                                                        {
+                                                            "expression": "count() "
+                                                        }
+                                                    ],
+                                                    "filter": {
+                                                        "expression": "http.response.status_code = 200"
+                                                    },
+                                                    "legend": "$serviceName"
+                                                }
+                                            },
+                                            {
+                                                "type": "builder_trace_operator",
+                                                "spec": {
+                                                    "name": "T1",
+                                                    "expression": "A -> B ",
+                                                    "aggregations": [
+                                                        {
+                                                            "expression": "count()",
+                                                            "alias": "request_count"
+                                                        }
+                                                    ]
+                                                }
+                                            }
+                                        ]
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                }
+            }
+        },
+        "layouts": [
+            {
+                "kind": "Grid",
+                "spec": {
+                    "items": [
+                        {
+                            "x": 0,
+                            "y": 0,
+                            "width": 6,
+                            "height": 6,
+                            "content": {
+                                "$ref": "#/spec/panels/24e2697b"
+                            }
+                        },
+                        {
+                            "x": 6,
+                            "y": 0,
+                            "width": 6,
+                            "height": 6,
+                            "content": {
+                                "$ref": "#/spec/panels/ff2f72f1"
+                            }
+                        },
+                        {
+                            "x": 0,
+                            "y": 6,
+                            "width": 6,
+                            "height": 6,
+                            "content": {
+                                "$ref": "#/spec/panels/011605e7"
+                            }
+                        },
+                        {
+                            "x": 6,
+                            "y": 6,
+                            "width": 6,
+                            "height": 3,
+                            "content": {
+                                "$ref": "#/spec/panels/e23516fc"
+                            }
+                        },
+                        {
+                            "x": 6,
+                            "y": 9,
+                            "width": 6,
+                            "height": 3,
+                            "content": {
+                                "$ref": "#/spec/panels/130c8d6b"
+                            }
+                        },
+                        {
+                            "x": 0,
+                            "y": 12,
+                            "width": 6,
+                            "height": 6,
+                            "content": {
+                                "$ref": "#/spec/panels/246f7c6d"
+                            }
+                        },
+                        {
+                            "x": 6,
+                            "y": 12,
+                            "width": 6,
+                            "height": 6,
+                            "content": {
+                                "$ref": "#/spec/panels/21f7d4d0"
+                            }
+                        },
+                        {
+                            "x": 0,
+                            "y": 18,
+                            "width": 6,
+                            "height": 6,
+                            "content": {
+                                "$ref": "#/spec/panels/ad5fd556"
+                            }
+                        },
+                        {
+                            "x": 6,
+                            "y": 18,
+                            "width": 6,
+                            "height": 6,
+                            "content": {
+                                "$ref": "#/spec/panels/f07b59ee"
+                            }
+                        },
+                        {
+                            "x": 0,
+                            "y": 24,
+                            "width": 12,
+                            "height": 6,
+                            "content": {
+                                "$ref": "#/spec/panels/e1a41831"
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    }
+}

perses/mf-manifest.json

@@ -0,0 +1,9 @@
+{
+  "id": "signoz",
+  "name": "signoz",
+  "metaData": {
+    "buildInfo": {
+      "buildVersion": "0.0.1"
+    }
+  }
+}

perses/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@signoz/signoz",
+  "version": "0.0.1",
+  "description": "signoz plugin module for Perses",
+  "perses": {
+    "schemasPath": "schemas",
+    "plugins": [
+      {
+        "kind": "Datasource",
+        "spec": {
+          "name": "SigNozDatasource"
+        }
+      },
+      {
+        "kind": "Variable",
+        "spec": {
+          "name": "SigNozCustomVariable"
+        }
+      },
+      {
+        "kind": "Variable",
+        "spec": {
+          "name": "SigNozDynamicVariable"
+        }
+      },
+      {
+        "kind": "Variable",
+        "spec": {
+          "name": "SigNozQueryVariable"
+        }
+      },
+      {
+        "kind": "TimeSeriesQuery",
+        "spec": {
+          "name": "SigNozBuilderQuery"
+        }
+      },
+      {
+        "kind": "TimeSeriesQuery",
+        "spec": {
+          "name": "SigNozClickHouseSQL"
+        }
+      },
+      {
+        "kind": "TimeSeriesQuery",
+        "spec": {
+          "name": "SigNozPromQL"
+        }
+      },
+      {
+        "kind": "TimeSeriesQuery",
+        "spec": {
+          "name": "SigNozCompositeQuery"
+        }
+      },
+      {
+        "kind": "TimeSeriesQuery",
+        "spec": {
+          "name": "SigNozTraceOperator"
+        }
+      },
+      {
+        "kind": "TimeSeriesQuery",
+        "spec": {
+          "name": "SigNozFormula"
+        }
+      },
+      {
+        "kind": "TimeSeriesQuery",
+        "spec": {
+          "name": "SigNozJoin"
+        }
+      },
+      {
+        "kind": "LogQuery",
+        "spec": {
+          "name": "SigNozBuilderQuery"
+        }
+      },
+      {
+        "kind": "TraceQuery",
+        "spec": {
+          "name": "SigNozBuilderQuery"
+        }
+      }
+    ]
+  }
+}

perses/panels/NOTE.txt

@@ -0,0 +1,27 @@
+Panel Plugins
+
+All SigNoz panels use Perses built-in panel kinds directly. No custom CUE
+schemas exist yet because Perses does not publish CUE schemas for its panel
+plugins (only Go SDK + TypeScript). Once it does, each panel can embed the
+upstream spec and add the SigNoz-specific fields listed below.
+
+SigNoz-specific fields by panel type:
+
+  TimeSeriesChart    timePreference
+  StatChart          timePreference, contextLinks
+  BarChart           timePreference, contextLinks
+  PieChart           timePreference, contextLinks
+  Table              timePreference, contextLinks
+  LogsTable (List)   timePreference, selectedLogFields, selectedTracesFields, columnWidths
+  TraceTable         timePreference, selectedTracesFields, columnWidths
+  HistogramChart     timePreference, contextLinks, bucketCount, bucketWidth, mergeAllActiveQueries
+
+Common fields:
+  timePreference  — panel-local vs dashboard-global time range
+  contextLinks    — clickable drill-down links on data points
+
+Panel-specific fields:
+  selectedLogFields / selectedTracesFields — which fields to display as columns in list views
+  columnWidths              — saved column width overrides
+  bucketCount / bucketWidth — histogram bucket configuration
+  mergeAllActiveQueries     — combine multiple queries into one histogram

perses/schemas/datasources/signoz-datasource/signoz-datasource.cue

@@ -0,0 +1,9 @@
+package model
+
+kind: "SigNozDatasource"
+
+// SigNoz has a single built-in backend — the frontend already knows
+// the API endpoint, so there is no connection config to validate.
+// Add fields here if SigNoz ever supports multiple backends or
+// configurable API versions.
+spec: close({})

perses/schemas/datasources/signoz-datasource/signoz-datasource.json

@@ -0,0 +1,4 @@
+{
+    "kind": "SigNozDatasource",
+    "spec": {}
+}

perses/schemas/queries/signoz-builder-query/signoz-builder-query.cue

@@ -0,0 +1,84 @@
+package model
+
+// Source: pkg/types/querybuildertypes/querybuildertypesv5/builder_query.go — QueryBuilderQuery
+kind: "SigNozBuilderQuery"
+spec: close({
+	name:       #QueryName
+	signal:     "metrics" | "logs" | "traces"
+	expression: string
+	disabled?:  bool | *false
+
+	// Metrics use structured aggregations; logs/traces use expression-based.
+	aggregations?:           [...#MetricAggregation]
+	expressionAggregations?: [...#ExpressionAggregation]
+	filter?:         #FilterExpression
+	groupBy?:        [...#GroupByItem]
+	order?:          [...#OrderByItem]
+	selectFields?:   [...]
+	limit?:          #Limit
+	limitBy?:        #LimitBy
+	offset?:         #Offset
+	cursor?:         string
+	having?:         #HavingExpression
+	// secondaryAggregations not added — not yet implemented.
+	functions?:      [...#Function]
+	legend?:         string
+	stepInterval?:   number
+	reduceTo?:       #ReduceTo
+	pageSize?:       int & >=1
+	source?:         string
+})
+
+#LimitBy: close({
+	keys:  [...string]
+	value: string
+})
+
+#QueryName: =~"^[A-Za-z][A-Za-z0-9_]*$"
+
+#ReduceTo: "sum" | "count" | "avg" | "min" | "max" | "last" | "median"
+
+#Limit: int & >=0 & <=10000
+
+#Offset: int & >=0
+
+#MetricAggregation: close({
+	metricName:       string & !=""
+	timeAggregation:  "latest" | "sum" | "avg" | "min" | "max" | "count" | "rate" | "increase"
+	spaceAggregation: "sum" | "avg" | "min" | "max" | "count" | "p50" | "p75" | "p90" | "p95" | "p99"
+	reduceTo?:        #ReduceTo
+	temporality?:     "delta" | "cumulative" | "unspecified"
+})
+
+#ExpressionAggregation: close({
+	expression: string & !=""
+	alias?:     string
+})
+
+#FilterExpression: close({
+	expression: string
+})
+
+#GroupByItem: close({
+	name:           string & !=""
+	fieldDataType?: string
+	fieldContext?:   string
+})
+
+#OrderByItem: close({
+	columnName: string & !=""
+	order:      "asc" | "desc"
+})
+
+#HavingExpression: close({
+	expression: string
+})
+
+#Function: close({
+	name: "cutOffMin" | "cutOffMax" | "clampMin" | "clampMax" |
+		"absolute" | "runningDiff" | "log2" | "log10" |
+		"cumulativeSum" | "ewma3" | "ewma5" | "ewma7" |
+		"median3" | "median5" | "median7" | "timeShift" |
+		"anomaly" | "fillZero"
+	args?: [...close({value: number | string | bool})]
+})

perses/schemas/queries/signoz-builder-query/signoz-builder-query.json

@@ -0,0 +1,24 @@
+{
+    "kind": "SigNozBuilderQuery",
+    "spec": {
+        "name": "A",
+        "signal": "metrics",
+        "expression": "A",
+        "aggregations": [
+            {
+                "metricName": "redis_keyspace_hits",
+                "timeAggregation": "rate",
+                "spaceAggregation": "sum",
+                "reduceTo": "sum"
+            }
+        ],
+        "filter": {
+            "expression": "host_name IN $host_name"
+        },
+        "groupBy": [],
+        "order": [],
+        "disabled": false,
+        "legend": "Hit/s across all hosts",
+        "stepInterval": 60
+    }
+}

perses/schemas/queries/signoz-clickhouse-sql/signoz-clickhouse-sql.cue

@@ -0,0 +1,12 @@
+package model
+
+// Source: pkg/types/querybuildertypes/querybuildertypesv5/clickhouse_query.go — ClickHouseQuery
+kind: "SigNozClickHouseSQL"
+spec: close({
+	name:      #QueryName
+	query:     string & !=""
+	disabled?: bool | *false
+	legend?:   string
+})
+
+#QueryName: =~"^[A-Za-z][A-Za-z0-9_]*$"

perses/schemas/queries/signoz-clickhouse-sql/signoz-clickhouse-sql.json

@@ -0,0 +1,9 @@
+{
+    "kind": "SigNozClickHouseSQL",
+    "spec": {
+        "name": "A",
+        "query": "SELECT toStartOfInterval(timestamp, INTERVAL 1 MINUTE) AS ts, count() AS total FROM signoz_logs.distributed_logs GROUP BY ts ORDER BY ts",
+        "disabled": false,
+        "legend": "Log count"
+    }
+}

perses/schemas/queries/signoz-composite-query/signoz-composite-query.cue

@@ -0,0 +1,46 @@
+package model
+
+import (
+	bq "github.com/signoz/schemas/queries/signoz-builder-query:model"
+	f "github.com/signoz/schemas/queries/signoz-formula:model"
+	j "github.com/signoz/schemas/queries/signoz-join:model"
+	to "github.com/signoz/schemas/queries/signoz-trace-operator:model"
+	pql "github.com/signoz/schemas/queries/signoz-promql:model"
+	ch "github.com/signoz/schemas/queries/signoz-clickhouse-sql:model"
+)
+
+// Source: pkg/types/querybuildertypes/querybuildertypesv5/req.go — CompositeQuery
+// SigNozCompositeQuery groups multiple query plugins into a single
+// query request. Each entry is a typed envelope whose spec is
+// validated by the corresponding plugin schema.
+kind: "SigNozCompositeQuery"
+spec: close({
+	queries: [...#QueryEnvelope]
+})
+
+// QueryEnvelope wraps a single query plugin with a type discriminator.
+#QueryEnvelope:
+	close({
+		type: "builder_query",
+		spec: bq.spec
+	}) |
+	close({
+		type: "builder_formula",
+		spec: f.spec
+	}) |
+	close({
+		type: "builder_join",
+		spec: j.spec
+	}) |
+	close({
+		type: "builder_trace_operator",
+		spec: to.spec
+	}) |
+	close({
+		type: "promql",
+		spec: pql.spec
+	}) |
+	close({
+		type: "clickhouse_sql",
+		spec: ch.spec
+	})

perses/schemas/queries/signoz-composite-query/signoz-composite-query.json

@@ -0,0 +1,53 @@
+{
+    "kind": "SigNozCompositeQuery",
+    "spec": {
+        "queries": [
+            {
+                "type": "builder_query",
+                "spec": {
+                    "name": "A",
+                    "signal": "metrics",
+                    "expression": "A",
+                    "aggregations": [
+                        {
+                            "metricName": "redis_keyspace_hits",
+                            "timeAggregation": "rate",
+                            "spaceAggregation": "sum",
+                            "reduceTo": "sum"
+                        }
+                    ],
+                    "filter": {
+                        "expression": "host_name IN $host_name"
+                    }
+                }
+            },
+            {
+                "type": "builder_query",
+                "spec": {
+                    "name": "B",
+                    "signal": "metrics",
+                    "expression": "B",
+                    "aggregations": [
+                        {
+                            "metricName": "redis_keyspace_misses",
+                            "timeAggregation": "rate",
+                            "spaceAggregation": "sum",
+                            "reduceTo": "sum"
+                        }
+                    ],
+                    "filter": {
+                        "expression": "host_name IN $host_name"
+                    }
+                }
+            },
+            {
+                "type": "builder_formula",
+                "spec": {
+                    "name": "F1",
+                    "expression": "A / (A + B) * 100",
+                    "legend": "Hit rate %"
+                }
+            }
+        ]
+    }
+}

perses/schemas/queries/signoz-formula/signoz-formula.cue

@@ -0,0 +1,27 @@
+package model
+
+// Source: pkg/types/querybuildertypes/querybuildertypesv5/formula.go — QueryBuilderFormula
+kind: "SigNozFormula"
+spec: close({
+	name:          #QueryName
+	expression:    string
+	disabled?:     bool | *false
+	legend?:       string
+	limit?:        #Limit
+	having?:       #HavingExpression
+	stepInterval?: number
+	order?:        [...#OrderByItem]
+})
+
+#QueryName: =~"^[A-Za-z][A-Za-z0-9_]*$"
+
+#Limit: int & >=0 & <=10000
+
+#HavingExpression: close({
+	expression: string
+})
+
+#OrderByItem: close({
+	columnName: string & !=""
+	order:      "asc" | "desc"
+})

perses/schemas/queries/signoz-formula/signoz-formula.json

@@ -0,0 +1,8 @@
+{
+    "kind": "SigNozFormula",
+    "spec": {
+        "name": "F1",
+        "expression": "A / B * 100",
+        "legend": "Hit rate %"
+    }
+}

perses/schemas/queries/signoz-join/signoz-join.cue

@@ -0,0 +1,75 @@
+package model
+
+// Source: pkg/types/querybuildertypes/querybuildertypesv5/join.go — QueryBuilderJoin
+kind: "SigNozJoin"
+spec: close({
+	name:           #QueryName
+	left:           #QueryRef
+	right:          #QueryRef
+	type:           #JoinType
+	on:             string
+	disabled?:      bool | *false
+	aggregations?:           [...#MetricAggregation]
+	expressionAggregations?: [...#ExpressionAggregation]
+	selectFields?:  [...]
+	filter?:        #FilterExpression
+	groupBy?:       [...#GroupByItem]
+	having?:        #HavingExpression
+	// secondaryAggregations not added — not yet implemented.
+	order?:         [...#OrderByItem]
+	limit?:         #Limit
+	functions?:     [...#Function]
+})
+
+#QueryRef: close({
+	name: #QueryName
+})
+
+#JoinType: "inner" | "left" | "right" | "full" | "cross"
+
+#QueryName: =~"^[A-Za-z][A-Za-z0-9_]*$"
+
+#ReduceTo: "sum" | "count" | "avg" | "min" | "max" | "last" | "median"
+
+#Limit: int & >=0 & <=10000
+
+#MetricAggregation: close({
+	metricName:       string & !=""
+	timeAggregation:  "latest" | "sum" | "avg" | "min" | "max" | "count" | "rate" | "increase"
+	spaceAggregation: "sum" | "avg" | "min" | "max" | "count" | "p50" | "p75" | "p90" | "p95" | "p99"
+	reduceTo?:        #ReduceTo
+	temporality?:     "delta" | "cumulative" | "unspecified"
+})
+
+#ExpressionAggregation: close({
+	expression: string & !=""
+	alias?:     string
+})
+
+#FilterExpression: close({
+	expression: string
+})
+
+#GroupByItem: close({
+	name:           string & !=""
+	fieldDataType?: string
+	fieldContext?:   string
+})
+
+#OrderByItem: close({
+	columnName: string & !=""
+	order:      "asc" | "desc"
+})
+
+#HavingExpression: close({
+	expression: string
+})
+
+#Function: close({
+	name: "cutOffMin" | "cutOffMax" | "clampMin" | "clampMax" |
+		"absolute" | "runningDiff" | "log2" | "log10" |
+		"cumulativeSum" | "ewma3" | "ewma5" | "ewma7" |
+		"median3" | "median5" | "median7" | "timeShift" |
+		"anomaly" | "fillZero"
+	args?: [...close({value: number | string | bool})]
+})

perses/schemas/queries/signoz-join/signoz-join.json

@@ -0,0 +1,11 @@
+{
+    "kind": "SigNozJoin",
+    "spec": {
+        "name": "J1",
+        "left": {"name": "A"},
+        "right": {"name": "B"},
+        "type": "inner",
+        "on": "service.name = service.name",
+        "disabled": false
+    }
+}

perses/schemas/queries/signoz-promql/signoz-promql.cue

@@ -0,0 +1,14 @@
+package model
+
+// Source: pkg/types/querybuildertypes/querybuildertypesv5/prom_query.go — PromQuery
+kind: "SigNozPromQL"
+spec: close({
+	name:      #QueryName
+	query:     string & !=""
+	disabled?: bool | *false
+	step?:     number
+	stats?:    bool
+	legend?:   string
+})
+
+#QueryName: =~"^[A-Za-z][A-Za-z0-9_]*$"

perses/schemas/queries/signoz-promql/signoz-promql.json

@@ -0,0 +1,9 @@
+{
+    "kind": "SigNozPromQL",
+    "spec": {
+        "name": "A",
+        "query": "rate(http_requests_total{status=\"200\"}[5m])",
+        "disabled": false,
+        "legend": "{{method}} {{path}}"
+    }
+}

perses/schemas/queries/signoz-trace-operator/signoz-trace-operator.cue

@@ -0,0 +1,68 @@
+package model
+
+// Source: pkg/types/querybuildertypes/querybuildertypesv5/trace_operator.go — QueryBuilderTraceOperator
+// SigNozTraceOperator composes multiple trace BuilderQueries using
+// relational operators (=>, ->, &&, ||, NOT) to query trace relationships.
+// Signal is implicitly "traces" — all referenced queries must be trace queries.
+kind: "SigNozTraceOperator"
+spec: close({
+	name:       #QueryName
+	// Operator expression composing trace queries, e.g. "A => B && C".
+	expression: string & !=""
+	disabled?:  bool | *false
+
+	// Which query's spans to return (must be a query referenced in expression).
+	returnSpansFrom?: #QueryName
+
+	aggregations?: [...#ExpressionAggregation]
+	filter?:       #FilterExpression
+	groupBy?:      [...#GroupByItem]
+	order?:        [...#OrderByItem]
+	limit?:        #Limit
+	offset?:       #Offset
+	cursor?:       string
+	functions?:    [...#Function]
+	stepInterval?: number
+	having?:       #HavingExpression
+	legend?:       string
+	selectFields?: [...]
+})
+
+#QueryName: =~"^[A-Za-z][A-Za-z0-9_]*$"
+
+#Limit: int & >=0 & <=10000
+
+#Offset: int & >=0
+
+#ExpressionAggregation: close({
+	expression: string & !=""
+	alias?:     string
+})
+
+#FilterExpression: close({
+	expression: string
+})
+
+#GroupByItem: close({
+	name:           string & !=""
+	fieldDataType?: string
+	fieldContext?:   string
+})
+
+#OrderByItem: close({
+	columnName: string & !=""
+	order:      "asc" | "desc"
+})
+
+#HavingExpression: close({
+	expression: string
+})
+
+#Function: close({
+	name: "cutOffMin" | "cutOffMax" | "clampMin" | "clampMax" |
+		"absolute" | "runningDiff" | "log2" | "log10" |
+		"cumulativeSum" | "ewma3" | "ewma5" | "ewma7" |
+		"median3" | "median5" | "median7" | "timeShift" |
+		"anomaly" | "fillZero"
+	args?: [...close({value: number | string | bool})]
+})

perses/schemas/queries/signoz-trace-operator/signoz-trace-operator.json

@@ -0,0 +1,19 @@
+{
+    "kind": "SigNozTraceOperator",
+    "spec": {
+        "name": "T1",
+        "expression": "A => B",
+        "returnSpansFrom": "A",
+        "aggregations": [
+            {
+                "expression": "count()",
+                "alias": "request_count"
+            }
+        ],
+        "filter": {
+            "expression": "service.name = 'frontend'"
+        },
+        "groupBy": [],
+        "order": []
+    }
+}

perses/schemas/variables/signoz-custom-variable/signoz-custom-variable.cue

@@ -0,0 +1,10 @@
+package model
+
+// defaultValue lives on the Perses ListVariable wrapper (spec level).
+kind: "SigNozCustomVariable"
+spec: close({
+	customValue: =~"^[^,]+(,[^,]+)*$"
+	sort?:       #VariableSortOrder
+})
+
+#VariableSortOrder: *"DISABLED" | "ASC" | "DESC"

perses/schemas/variables/signoz-custom-variable/signoz-custom-variable.json

@@ -0,0 +1,7 @@
+{
+    "kind": "SigNozCustomVariable",
+    "spec": {
+        "customValue": "production,staging,development",
+        "sort": "DISABLED"
+    }
+}

perses/schemas/variables/signoz-dynamic-variable/signoz-dynamic-variable.cue

@@ -0,0 +1,11 @@
+package model
+
+// defaultValue lives on the Perses ListVariable wrapper (spec level).
+kind: "SigNozDynamicVariable"
+spec: close({
+	dynamicVariablesAttribute: string
+	dynamicVariablesSource:    string
+	sort?:                     #VariableSortOrder
+})
+
+#VariableSortOrder: *"DISABLED" | "ASC" | "DESC"

perses/schemas/variables/signoz-dynamic-variable/signoz-dynamic-variable.json

@@ -0,0 +1,8 @@
+{
+    "kind": "SigNozDynamicVariable",
+    "spec": {
+        "dynamicVariablesAttribute": "host_name",
+        "dynamicVariablesSource": "metrics",
+        "sort": "ASC"
+    }
+}

perses/schemas/variables/signoz-query-variable/signoz-query-variable.cue

@@ -0,0 +1,10 @@
+package model
+
+// defaultValue lives on the Perses ListVariable wrapper (spec level).
+kind: "SigNozQueryVariable"
+spec: close({
+	queryValue: string
+	sort?:      #VariableSortOrder
+})
+
+#VariableSortOrder: *"DISABLED" | "ASC" | "DESC"

perses/schemas/variables/signoz-query-variable/signoz-query-variable.json

@@ -0,0 +1,7 @@
+{
+    "kind": "SigNozQueryVariable",
+    "spec": {
+        "queryValue": "SELECT DISTINCT host_name FROM signoz_metrics.distributed_time_series_v4_1day WHERE metric_name = 'redis_cpu_time'",
+        "sort": "ASC"
+    }
+}