test: type the mock and update tests

Preferences belong to an explorer page, not a signal.

frontend/src/components/Editor/index.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { EditorProps } from '@monaco-editor/react';
-import MonacoEditor from 'lib/monaco/MonacoEditor';
+import MEditor, { EditorProps } from '@monaco-editor/react';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 
 function Editor({
 	value,
@@ -10,6 +10,8 @@ function Editor({
 	height,
 	options,
 }: MEditorProps): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+
 	const onChangeHandler = (newValue?: string): void => {
 		if (readOnly) {
 			return;
@@ -26,7 +28,8 @@ function Editor({
 	);
 
 	return (
-		<MonacoEditor
+		<MEditor
+			theme={isDarkMode ? 'vs-dark' : 'vs-light'}
 			language={language}
 			value={value}
 			options={editorOptions}

frontend/src/components/LogDetail/index.tsx

@@ -4,6 +4,7 @@ import { Button } from '@signozhq/ui/button';
 import { Drawer, Tooltip } from 'antd';
 import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
@@ -147,7 +148,7 @@ function LogDetailInner({
 
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: DataSource.LOGS,
+		sourcePage: SavedviewtypesSourceDTO.logs,
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 

frontend/src/container/LLMObservability/AttributeMapping/TestTab/TestTab.tsx

@@ -1,11 +1,17 @@
+import MEditor from '@monaco-editor/react';
 import { Play, RotateCcw } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
-import MonacoEditor from 'lib/monaco/MonacoEditor';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 
 import styles from './TestTab.module.scss';
 import JsonEditorSkeleton from './JsonEditorSkeleton';
 import TestResult from './TestResult';
+import {
+	defineSignozJsonTheme,
+	SIGNOZ_JSON_THEME_DARK,
+	SIGNOZ_JSON_THEME_LIGHT,
+} from './jsonEditorTheme';
 import { UseTestSpanMapper } from './useTestSpanMapper';
 
 interface TestTabProps {
@@ -26,6 +32,7 @@ function TestTab({ spanTest }: TestTabProps): JSX.Element {
 		error,
 		validationError,
 	} = spanTest;
+	const isDarkMode = useIsDarkMode();
 
 	function renderResults(): JSX.Element {
 		if (error) {
@@ -115,12 +122,14 @@ function TestTab({ spanTest }: TestTabProps): JSX.Element {
 					data-testid="test-span-input"
 					aria-label="Sample span JSON"
 				>
-					<MonacoEditor
+					<MEditor
 						language="json"
 						value={input}
 						onChange={(value): void => setInput(value ?? '')}
 						height="100%"
 						loading={<JsonEditorSkeleton />}
+						theme={isDarkMode ? SIGNOZ_JSON_THEME_DARK : SIGNOZ_JSON_THEME_LIGHT}
+						beforeMount={defineSignozJsonTheme}
 						options={{
 							minimap: { enabled: false },
 							fontSize: 12,

frontend/src/container/LLMObservability/AttributeMapping/TestTab/jsonEditorTheme.ts

@@ -0,0 +1,38 @@
+//TODO: This is a local theme for now, but ideally for the editor as well. Just like prettyViewer, we have a theme. We should have a theme for the editor as well.
+import { Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
+
+export const SIGNOZ_JSON_THEME_DARK = 'signoz-attr-mapping-json-dark';
+export const SIGNOZ_JSON_THEME_LIGHT = 'signoz-attr-mapping-json-light';
+
+const SHARED_THEME = {
+	inherit: true,
+	colors: {
+		'editor.background': '#00000000', // transparent — inherit the panel bg
+	},
+	fontFamily: 'SF Mono, Geist Mono, Fira Code, monospace',
+	fontSize: 12,
+	fontWeight: 'normal',
+	lineHeight: 18,
+	letterSpacing: -0.06,
+};
+
+export function defineSignozJsonTheme(monaco: Monaco): void {
+	monaco.editor.defineTheme(SIGNOZ_JSON_THEME_DARK, {
+		...SHARED_THEME,
+		base: 'vs-dark',
+		rules: [
+			{ token: 'string.key.json', foreground: Color.BG_ROBIN_400 },
+			{ token: 'string.value.json', foreground: Color.BG_VANILLA_400 },
+		],
+	});
+
+	monaco.editor.defineTheme(SIGNOZ_JSON_THEME_LIGHT, {
+		...SHARED_THEME,
+		base: 'vs',
+		rules: [
+			{ token: 'string.key.json', foreground: Color.BG_ROBIN_500 },
+			{ token: 'string.value.json', foreground: Color.BG_INK_400 },
+		],
+	});
+}

frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import FieldsSelector from 'components/FieldsSelector';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import { MAX_LOGS_LIST_SIZE } from 'constants/liveTail';
@@ -54,7 +55,7 @@ function LiveLogsContainer({
 
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: DataSource.LOGS,
+		sourcePage: SavedviewtypesSourceDTO.logs,
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -5,6 +5,7 @@ import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { toast } from '@signozhq/ui/sonner';
 import { Card } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
@@ -30,7 +31,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useEventSource } from 'providers/EventSource';
 // interfaces
 import { ILog } from 'types/api/logs/log';
-import { DataSource, StringOperators } from 'types/common/queryBuilder';
+import { StringOperators } from 'types/common/queryBuilder';
 
 import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
 import { getAbsoluteUrl } from 'utils/basePath';
@@ -68,7 +69,7 @@ function LiveLogsList({
 
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: DataSource.LOGS,
+		sourcePage: SavedviewtypesSourceDTO.logs,
 		aggregateOperator: StringOperators.NOOP,
 	});
 

frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import { Button, Skeleton } from 'antd';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -16,7 +17,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { ILog } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource, StringOperators } from 'types/common/queryBuilder';
+import { StringOperators } from 'types/common/queryBuilder';
 import { withBasePath } from 'utils/basePath';
 
 import { useContextLogData } from './useContextLogData';
@@ -45,7 +46,7 @@ function ContextLogRenderer({
 
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: DataSource.LOGS,
+		sourcePage: SavedviewtypesSourceDTO.logs,
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 

frontend/src/container/LogsExplorerList/index.tsx

@@ -5,6 +5,7 @@ import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { toast } from '@signozhq/ui/sonner';
 import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
@@ -77,7 +78,7 @@ function LogsExplorerList({
 
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: DataSource.LOGS,
+		sourcePage: SavedviewtypesSourceDTO.logs,
 		aggregateOperator:
 			currentStagedQueryData?.aggregateOperator || StringOperators.NOOP,
 	});

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useState } from 'react';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import FieldsSelector from 'components/FieldsSelector';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
@@ -28,7 +29,7 @@ function LogsActionsContainer({
 }): JSX.Element {
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: DataSource.LOGS,
+		sourcePage: SavedviewtypesSourceDTO.logs,
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 

frontend/src/container/OptionsMenu/__test__/useOptionsMenu.test.ts

@@ -1,11 +1,20 @@
-import { useQueries } from 'react-query';
-import { renderHook } from '@testing-library/react';
+import { createElement, ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { usePreferenceContext } from 'providers/preferences/context/PreferenceContextProvider';
-import { DataSource } from 'types/common/queryBuilder';
+import {
+	FormattingOptions,
+	PreferenceContextValue,
+	PreferenceSlice,
+} from 'providers/preferences/types';
+import { renderHook } from 'tests/test-utils';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
+import { FontSize } from '../types';
 import useOptionsMenu from '../useOptionsMenu';
 
 // Mock all dependencies
@@ -13,104 +22,118 @@ jest.mock('hooks/useNotifications');
 jest.mock('providers/preferences/context/PreferenceContextProvider');
 jest.mock('hooks/useUrlQueryData');
 jest.mock('hooks/querySuggestions/useGetQueryKeySuggestions');
-jest.mock('react-query', () => ({
-	...jest.requireActual('react-query'),
-	useQueries: jest.fn(),
-}));
+
+const mockUseNotifications = jest.mocked(useNotifications);
+const mockUsePreferenceContext = jest.mocked(usePreferenceContext);
+const mockUseUrlQueryData = jest.mocked(useUrlQueryData);
+const mockUseGetQueryKeySuggestions = jest.mocked(useGetQueryKeySuggestions);
+
+type KeySuggestionsResult = ReturnType<typeof useGetQueryKeySuggestions>;
+
+// The hook reads only `data.data.data.keys` and `isFetching`.
+const keySuggestions = (
+	attributeKeys: Record<string, string>[],
+): KeySuggestionsResult =>
+	({
+		data: { data: { data: { complete: true, keys: { attributeKeys } } } },
+		isFetching: false,
+	}) as unknown as KeySuggestionsResult;
+
+const wrapper = ({ children }: { children: ReactNode }): JSX.Element =>
+	createElement(QueryClientProvider, { client: new QueryClient() }, children);
+
+const toIds = (columns: TelemetryFieldKey[]): string[] =>
+	columns.map((column) => `${column.fieldContext}:${column.name}`);
 
 describe('useOptionsMenu', () => {
-	const mockNotifications = { error: jest.fn(), success: jest.fn() };
-	const mockUpdateColumns = jest.fn();
-	const mockUpdateFormatting = jest.fn();
-	const mockRedirectWithQuery = jest.fn();
+	const mockNotifications = {
+		error: jest.fn() as jest.MockedFunction<NotificationInstance['error']>,
+		success: jest.fn() as jest.MockedFunction<NotificationInstance['success']>,
+	} as Partial<NotificationInstance> as NotificationInstance;
+	const mockUpdateColumns = jest.fn() as jest.MockedFunction<
+		PreferenceSlice['updateColumns']
+	>;
+	const mockUpdateFormatting = jest.fn() as jest.MockedFunction<
+		PreferenceSlice['updateFormatting']
+	>;
+	const mockRedirectWithQuery = jest.fn() as jest.MockedFunction<
+		(newQueryData: unknown) => void
+	>;
+
+	const slice = (
+		columns: TelemetryFieldKey[],
+		formatting: FormattingOptions,
+	): PreferenceSlice => ({
+		preferences: { columns, formatting },
+		loading: false,
+		error: null,
+		updateColumns: mockUpdateColumns,
+		updateFormatting: mockUpdateFormatting,
+	});
+
+	const rawFormatting: FormattingOptions = {
+		format: 'raw',
+		maxLines: 1,
+		fontSize: FontSize.SMALL,
+	};
 
 	beforeEach(() => {
 		jest.clearAllMocks();
 
-		(useNotifications as jest.Mock).mockReturnValue({
+		mockUseNotifications.mockReturnValue({
 			notifications: mockNotifications,
 		});
 
-		(usePreferenceContext as jest.Mock).mockReturnValue({
-			traces: {
-				preferences: {
-					columns: [],
-					formatting: {
-						format: 'raw',
-						maxLines: 1,
-						fontSize: 'small',
-					},
-				},
-				updateColumns: mockUpdateColumns,
-				updateFormatting: mockUpdateFormatting,
-			},
-			logs: {
-				preferences: {
-					columns: [],
-					formatting: {
-						format: 'raw',
-						maxLines: 1,
-						fontSize: 'small',
-					},
-				},
-				updateColumns: mockUpdateColumns,
-				updateFormatting: mockUpdateFormatting,
-			},
-		});
+		mockUsePreferenceContext.mockReturnValue({
+			[SavedviewtypesSourceDTO.traces]: slice([], rawFormatting),
+			[SavedviewtypesSourceDTO.logs]: slice([], rawFormatting),
+		} satisfies PreferenceContextValue);
 
-		(useUrlQueryData as jest.Mock).mockReturnValue({
+		mockUseUrlQueryData.mockReturnValue({
 			query: null,
+			queryData: undefined,
 			redirectWithQuery: mockRedirectWithQuery,
 		});
-
-		(useQueries as jest.Mock).mockReturnValue([]);
 	});
 
-	it('does not show isRoot or isEntryPoint in column options when dataSource is TRACES', () => {
+	it('does not show isRoot or isEntryPoint in column options when sourcePage is traces', () => {
 		// Mock the query key suggestions to return data including isRoot and isEntryPoint
-		(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
-			data: {
-				data: {
-					data: {
-						keys: {
-							attributeKeys: [
-								{
-									name: 'isRoot',
-									signal: 'traces',
-									fieldDataType: 'bool',
-									fieldContext: '',
-								},
-								{
-									name: 'isEntryPoint',
-									signal: 'traces',
-									fieldDataType: 'bool',
-									fieldContext: '',
-								},
-								{
-									name: 'duration',
-									signal: 'traces',
-									fieldDataType: 'float64',
-									fieldContext: '',
-								},
-								{
-									name: 'serviceName',
-									signal: 'traces',
-									fieldDataType: 'string',
-									fieldContext: '',
-								},
-							],
-						},
-					},
+		mockUseGetQueryKeySuggestions.mockReturnValue(
+			keySuggestions([
+				{
+					name: 'isRoot',
+					signal: 'traces',
+					fieldDataType: 'bool',
+					fieldContext: '',
 				},
-			},
-			isFetching: false,
-		});
+				{
+					name: 'isEntryPoint',
+					signal: 'traces',
+					fieldDataType: 'bool',
+					fieldContext: '',
+				},
+				{
+					name: 'duration',
+					signal: 'traces',
+					fieldDataType: 'float64',
+					fieldContext: '',
+				},
+				{
+					name: 'serviceName',
+					signal: 'traces',
+					fieldDataType: 'string',
+					fieldContext: '',
+				},
+			]),
+		);
 
-		const { result } = renderHook(() =>
-			useOptionsMenu({
-				dataSource: DataSource.TRACES,
-				aggregateOperator: 'count',
-			}),
+		const { result } = renderHook(
+			() =>
+				useOptionsMenu({
+					sourcePage: SavedviewtypesSourceDTO.traces,
+					aggregateOperator: 'count',
+				}),
+			{ wrapper },
 		);
 
 		// Get the column options from the config
@@ -127,98 +150,38 @@ describe('useOptionsMenu', () => {
 		expect(optionNames).toContain('serviceName');
 	});
 
-	it('does not show body in column options when dataSource is METRICS', () => {
+	it('shows body in column options when sourcePage is logs', () => {
 		// Mock the query key suggestions to return data including body
-		(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
-			data: {
-				data: {
-					data: {
-						keys: {
-							attributeKeys: [
-								{
-									name: 'body',
-									signal: 'logs',
-									fieldDataType: 'string',
-									fieldContext: '',
-								},
-								{
-									name: 'status',
-									signal: 'metrics',
-									fieldDataType: 'int64',
-									fieldContext: '',
-								},
-								{
-									name: 'value',
-									signal: 'metrics',
-									fieldDataType: 'float64',
-									fieldContext: '',
-								},
-							],
-						},
-					},
+		mockUseGetQueryKeySuggestions.mockReturnValue(
+			keySuggestions([
+				{
+					name: 'body',
+					signal: 'logs',
+					fieldDataType: 'string',
+					fieldContext: '',
 				},
-			},
-			isFetching: false,
-		});
-
-		const { result } = renderHook(() =>
-			useOptionsMenu({
-				dataSource: DataSource.METRICS,
-				aggregateOperator: 'count',
-			}),
+				{
+					name: 'level',
+					signal: 'logs',
+					fieldDataType: 'string',
+					fieldContext: '',
+				},
+				{
+					name: 'timestamp',
+					signal: 'logs',
+					fieldDataType: 'int64',
+					fieldContext: '',
+				},
+			]),
 		);
 
-		// Get the column options from the config
-		const columnOptions = result.current.config.addColumn?.options ?? [];
-		const optionNames = columnOptions.map((option) => option.label);
-
-		// body should NOT be in the options
-		expect(optionNames).not.toContain('body');
-
-		// Other attributes should be present
-		expect(optionNames).toContain('status');
-		expect(optionNames).toContain('value');
-	});
-
-	it('does not show body in column options when dataSource is LOGS', () => {
-		// Mock the query key suggestions to return data including body
-		(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
-			data: {
-				data: {
-					data: {
-						keys: {
-							attributeKeys: [
-								{
-									name: 'body',
-									signal: 'logs',
-									fieldDataType: 'string',
-									fieldContext: '',
-								},
-								{
-									name: 'level',
-									signal: 'logs',
-									fieldDataType: 'string',
-									fieldContext: '',
-								},
-								{
-									name: 'timestamp',
-									signal: 'logs',
-									fieldDataType: 'int64',
-									fieldContext: '',
-								},
-							],
-						},
-					},
-				},
-			},
-			isFetching: false,
-		});
-
-		const { result } = renderHook(() =>
-			useOptionsMenu({
-				dataSource: DataSource.LOGS,
-				aggregateOperator: 'count',
-			}),
+		const { result } = renderHook(
+			() =>
+				useOptionsMenu({
+					sourcePage: SavedviewtypesSourceDTO.logs,
+					aggregateOperator: 'count',
+				}),
+			{ wrapper },
 		);
 
 		// Get the column options from the config
@@ -234,15 +197,15 @@ describe('useOptionsMenu', () => {
 	});
 
 	describe('reorderSelectColumns / handleRemoveSelectedColumn — composite ID lookup', () => {
-		const baseFormatting = {
+		const baseFormatting: FormattingOptions = {
 			format: 'table',
 			maxLines: 1,
-			fontSize: 'small',
+			fontSize: FontSize.SMALL,
 		};
 
 		// Two entries share the same `name` but differ in `fieldContext` — the
 		// exact case composite IDs are meant to disambiguate.
-		const seedColumns = [
+		const seedColumns: TelemetryFieldKey[] = [
 			{
 				name: 'body',
 				fieldContext: 'log',
@@ -264,36 +227,26 @@ describe('useOptionsMenu', () => {
 			{
 				name: 'timestamp',
 				fieldContext: 'log',
-				fieldDataType: '',
 				signal: 'logs',
 			},
 		];
 
 		beforeEach(() => {
-			(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
-				data: { data: { data: { keys: {} } } },
-				isFetching: false,
-			});
-			(usePreferenceContext as jest.Mock).mockReturnValue({
-				traces: {
-					preferences: { columns: [], formatting: baseFormatting },
-					updateColumns: mockUpdateColumns,
-					updateFormatting: mockUpdateFormatting,
-				},
-				logs: {
-					preferences: { columns: seedColumns, formatting: baseFormatting },
-					updateColumns: mockUpdateColumns,
-					updateFormatting: mockUpdateFormatting,
-				},
-			});
+			mockUseGetQueryKeySuggestions.mockReturnValue(keySuggestions([]));
+			mockUsePreferenceContext.mockReturnValue({
+				[SavedviewtypesSourceDTO.traces]: slice([], baseFormatting),
+				[SavedviewtypesSourceDTO.logs]: slice(seedColumns, baseFormatting),
+			} satisfies PreferenceContextValue);
 		});
 
 		it('reorders by composite IDs — preserves both same-name variants distinctly', () => {
-			const { result } = renderHook(() =>
-				useOptionsMenu({
-					dataSource: DataSource.LOGS,
-					aggregateOperator: 'count',
-				}),
+			const { result } = renderHook(
+				() =>
+					useOptionsMenu({
+						sourcePage: SavedviewtypesSourceDTO.logs,
+						aggregateOperator: 'count',
+					}),
+				{ wrapper },
 			);
 
 			// New order: [attribute:service.name, log:body, resource:service.name, log:timestamp]
@@ -306,12 +259,7 @@ describe('useOptionsMenu', () => {
 
 			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
 			const reordered = mockUpdateColumns.mock.calls[0][0];
-			expect(
-				reordered.map(
-					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}:${c.name}`,
-				),
-			).toStrictEqual([
+			expect(toIds(reordered)).toStrictEqual([
 				'attribute:service.name',
 				'log:body',
 				'resource:service.name',
@@ -320,11 +268,13 @@ describe('useOptionsMenu', () => {
 		});
 
 		it('reorder ignores ids that are not columns (e.g. state-indicator) and skips unknown ids', () => {
-			const { result } = renderHook(() =>
-				useOptionsMenu({
-					dataSource: DataSource.LOGS,
-					aggregateOperator: 'count',
-				}),
+			const { result } = renderHook(
+				() =>
+					useOptionsMenu({
+						sourcePage: SavedviewtypesSourceDTO.logs,
+						aggregateOperator: 'count',
+					}),
+				{ wrapper },
 			);
 
 			result.current.config.addColumn?.onReorder([
@@ -338,12 +288,7 @@ describe('useOptionsMenu', () => {
 
 			const reordered = mockUpdateColumns.mock.calls[0][0];
 			// state-indicator + unknown.composite filtered; rest preserved in given order.
-			expect(
-				reordered.map(
-					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}:${c.name}`,
-				),
-			).toStrictEqual([
+			expect(toIds(reordered)).toStrictEqual([
 				'log:timestamp',
 				'log:body',
 				'resource:service.name',
@@ -352,11 +297,13 @@ describe('useOptionsMenu', () => {
 		});
 
 		it('removes only the variant whose composite ID matches', () => {
-			const { result } = renderHook(() =>
-				useOptionsMenu({
-					dataSource: DataSource.LOGS,
-					aggregateOperator: 'count',
-				}),
+			const { result } = renderHook(
+				() =>
+					useOptionsMenu({
+						sourcePage: SavedviewtypesSourceDTO.logs,
+						aggregateOperator: 'count',
+					}),
+				{ wrapper },
 			);
 
 			// Removing 'resource:service.name' should drop ONLY the resource variant.
@@ -364,20 +311,21 @@ describe('useOptionsMenu', () => {
 
 			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
 			const remaining = mockUpdateColumns.mock.calls[0][0];
-			expect(
-				remaining.map(
-					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}:${c.name}`,
-				),
-			).toStrictEqual(['log:body', 'attribute:service.name', 'log:timestamp']);
+			expect(toIds(remaining)).toStrictEqual([
+				'log:body',
+				'attribute:service.name',
+				'log:timestamp',
+			]);
 		});
 
 		it('removing by a non-matching composite ID is a no-op (filter returns the full list)', () => {
-			const { result } = renderHook(() =>
-				useOptionsMenu({
-					dataSource: DataSource.LOGS,
-					aggregateOperator: 'count',
-				}),
+			const { result } = renderHook(
+				() =>
+					useOptionsMenu({
+						sourcePage: SavedviewtypesSourceDTO.logs,
+						aggregateOperator: 'count',
+					}),
+				{ wrapper },
 			);
 
 			result.current.config.addColumn?.onRemove('unknown.composite');
@@ -390,35 +338,34 @@ describe('useOptionsMenu', () => {
 
 	describe('fieldsSelector.value drops legacy columns without a name', () => {
 		it('excludes entries missing name while keeping valid columns', () => {
-			(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
-				data: { data: { data: { keys: {} } } },
-				isFetching: false,
-			});
-			(usePreferenceContext as jest.Mock).mockReturnValue({
-				traces: {
-					preferences: {
-						columns: [
-							{ name: 'body', fieldContext: 'log' },
-							{ key: 'legacy-key-no-name', fieldContext: 'log' },
-							{ name: 'timestamp', fieldContext: 'log' },
-						],
-						formatting: { format: 'table', maxLines: 1, fontSize: 'small' },
+			mockUseGetQueryKeySuggestions.mockReturnValue(keySuggestions([]));
+			mockUsePreferenceContext.mockReturnValue({
+				[SavedviewtypesSourceDTO.traces]: slice(
+					[
+						{ name: 'body', fieldContext: 'log' },
+						// A legacy stored column: `key` only, no `name`.
+						{
+							key: 'legacy-key-no-name',
+							fieldContext: 'log',
+						} as unknown as TelemetryFieldKey,
+						{ name: 'timestamp', fieldContext: 'log' },
+					],
+					{
+						format: 'table',
+						maxLines: 1,
+						fontSize: FontSize.SMALL,
 					},
-					updateColumns: mockUpdateColumns,
-					updateFormatting: mockUpdateFormatting,
-				},
-				logs: {
-					preferences: { columns: [], formatting: {} },
-					updateColumns: mockUpdateColumns,
-					updateFormatting: mockUpdateFormatting,
-				},
-			});
+				),
+				[SavedviewtypesSourceDTO.logs]: slice([], {}),
+			} satisfies PreferenceContextValue);
 
-			const { result } = renderHook(() =>
-				useOptionsMenu({
-					dataSource: DataSource.TRACES,
-					aggregateOperator: 'count',
-				}),
+			const { result } = renderHook(
+				() =>
+					useOptionsMenu({
+						sourcePage: SavedviewtypesSourceDTO.traces,
+						aggregateOperator: 'count',
+					}),
+				{ wrapper },
 			);
 
 			const fields = result.current.config.fieldsSelector?.value ?? [];

frontend/src/container/OptionsMenu/constants.ts

@@ -1,4 +1,6 @@
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'api/v5/v5';
+import { PREFERENCE_SOURCE_PAGES } from 'providers/preferences/constants';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { FontSize, OptionsQuery } from './types';
@@ -13,6 +15,14 @@ export const defaultOptionsQuery: OptionsQuery = {
 	fontSize: FontSize.SMALL,
 };
 
+export const SOURCE_PAGE_SIGNAL: Record<
+	(typeof PREFERENCE_SOURCE_PAGES)[number],
+	DataSource
+> = {
+	[SavedviewtypesSourceDTO.logs]: DataSource.LOGS,
+	[SavedviewtypesSourceDTO.traces]: DataSource.TRACES,
+};
+
 export const EXCLUDED_COLUMNS: Record<DataSource, string[]> = {
 	[DataSource.TRACES]: ['body', 'isRoot', 'isEntryPoint'],
 	[DataSource.METRICS]: ['body'],

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueries } from 'react-query';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { AxiosResponse } from 'axios';
@@ -11,6 +12,7 @@ import useUrlQueryData from 'hooks/useUrlQueryData';
 import { has } from 'lodash-es';
 import { AllTraceFilterKeyValue } from 'constants/traceFilterKeys';
 import { usePreferenceContext } from 'providers/preferences/context/PreferenceContextProvider';
+import { PreferenceSourcePage } from 'providers/preferences/types';
 import {
 	QueryKeyRequestProps,
 	QueryKeySuggestionsResponseProps,
@@ -20,13 +22,13 @@ import {
 	FieldDataType,
 	SignalType,
 } from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
 
 import {
 	defaultLogsSelectedColumns,
 	defaultOptionsQuery,
 	defaultTraceSelectedColumns,
 	EXCLUDED_COLUMNS,
+	SOURCE_PAGE_SIGNAL,
 	URL_OPTIONS,
 } from './constants';
 import {
@@ -40,7 +42,7 @@ import { buildCompositeKey, getOptionsFromKeys } from './utils';
 
 interface UseOptionsMenuProps {
 	storageKey?: string;
-	dataSource: DataSource;
+	sourcePage: PreferenceSourcePage;
 	aggregateOperator?: string;
 	initialOptions?: InitialOptions;
 }
@@ -52,15 +54,14 @@ interface UseOptionsMenu {
 }
 
 const useOptionsMenu = ({
-	dataSource,
-	// aggregateOperator,
+	sourcePage,
 	initialOptions = {},
 }: UseOptionsMenuProps): UseOptionsMenu => {
+	const signal = SOURCE_PAGE_SIGNAL[sourcePage];
 	const { notifications } = useNotifications();
-	const prefCtx = usePreferenceContext();
 	// TODO: send null to updateColumns and updateFormatting if dataSource is not logs or traces
-	const slice = dataSource === DataSource.TRACES ? prefCtx.traces : prefCtx.logs;
-	const { preferences, updateColumns, updateFormatting } = slice;
+	const { preferences, updateColumns, updateFormatting } =
+		usePreferenceContext()[sourcePage];
 
 	const [searchText, setSearchText] = useState<string>('');
 	const [isFocused, setIsFocused] = useState<boolean>(false);
@@ -68,10 +69,10 @@ const useOptionsMenu = ({
 
 	const initialQueryParamsV5: QueryKeyRequestProps = useMemo(
 		() => ({
-			signal: dataSource,
+			signal,
 			searchText: '',
 		}),
-		[dataSource],
+		[signal],
 	);
 
 	const { query: optionsQuery, redirectWithQuery: redirectWithOptionsData } =
@@ -127,7 +128,7 @@ const useOptionsMenu = ({
 			?.map((column) => attributesData.find(({ name }) => name === column))
 			.filter((e) => !!e) || []) as TelemetryFieldKey[];
 
-		if (dataSource === DataSource.TRACES) {
+		if (sourcePage === SavedviewtypesSourceDTO.traces) {
 			initialSelected = initialSelected
 				?.map((col) => {
 					if (col && Object.keys(AllTraceFilterKeyValue).includes(col?.name)) {
@@ -157,7 +158,7 @@ const useOptionsMenu = ({
 		isFetchedInitialAttributes,
 		initialOptions?.selectColumns,
 		initialAttributesResult,
-		dataSource,
+		sourcePage,
 	]);
 
 	const {
@@ -195,7 +196,7 @@ const useOptionsMenu = ({
 				fieldDataType: e.fieldDataType,
 			}));
 		}
-		if (dataSource === DataSource.TRACES) {
+		if (sourcePage === SavedviewtypesSourceDTO.traces) {
 			return defaultTraceSelectedColumns.map((e) => ({
 				...e,
 				name: e.name,
@@ -203,16 +204,16 @@ const useOptionsMenu = ({
 		}
 
 		return [];
-	}, [dataSource, searchedAttributesDataV5?.data.data.keys]);
+	}, [sourcePage, searchedAttributesDataV5?.data.data.keys]);
 
 	const initialOptionsQuery: OptionsQuery = useMemo(() => {
 		let defaultColumns: TelemetryFieldKey[] = defaultOptionsQuery.selectColumns;
-		if (dataSource === DataSource.TRACES) {
+		if (sourcePage === SavedviewtypesSourceDTO.traces) {
 			defaultColumns = defaultTraceSelectedColumns.map((e) => ({
 				...e,
 				name: e.name,
 			}));
-		} else if (dataSource === DataSource.LOGS) {
+		} else if (sourcePage === SavedviewtypesSourceDTO.logs) {
 			// eslint-disable-next-line sonarjs/no-identical-functions
 			defaultColumns = defaultLogsSelectedColumns.map((e) => ({
 				...e,
@@ -232,7 +233,7 @@ const useOptionsMenu = ({
 			...initialOptions,
 			selectColumns: finalSelectColumns,
 		};
-	}, [dataSource, initialOptions, initialSelectedColumns]);
+	}, [sourcePage, initialOptions, initialSelectedColumns]);
 
 	const selectedColumnKeys = useMemo(
 		() => preferences?.columns?.map(({ name }) => name) || [],
@@ -241,7 +242,7 @@ const useOptionsMenu = ({
 
 	const optionsFromAttributeKeys = useMemo(() => {
 		const filteredAttributeKeys = searchedAttributeKeys.filter((item) => {
-			const exclusions = EXCLUDED_COLUMNS[dataSource];
+			const exclusions = EXCLUDED_COLUMNS[signal];
 			if (exclusions) {
 				return !exclusions.includes(item.name);
 			}
@@ -249,7 +250,7 @@ const useOptionsMenu = ({
 		});
 
 		return getOptionsFromKeys(filteredAttributeKeys, selectedColumnKeys);
-	}, [dataSource, searchedAttributeKeys, selectedColumnKeys]);
+	}, [signal, searchedAttributeKeys, selectedColumnKeys]);
 
 	const handleRedirectWithOptionsData = useCallback(
 		(newQueryData: OptionsQuery) => {
@@ -285,7 +286,10 @@ const useOptionsMenu = ({
 					buildCompositeKey(f.name, f.fieldContext, f.fieldDataType) !== columnKey,
 			);
 
-			if (!newSelectedColumns?.length && dataSource !== DataSource.LOGS) {
+			if (
+				!newSelectedColumns?.length &&
+				sourcePage !== SavedviewtypesSourceDTO.logs
+			) {
 				notifications.error({
 					message: 'There must be at least one selected column',
 				});
@@ -294,7 +298,7 @@ const useOptionsMenu = ({
 
 			updateColumns(newSelectedColumns || []);
 		},
-		[dataSource, notifications, preferences, updateColumns],
+		[sourcePage, notifications, preferences, updateColumns],
 	);
 
 	const handleFormatChange = useCallback(

frontend/src/container/QueryBuilder/rawQueryEditors/ClickHouse/query.tsx

@@ -1,8 +1,10 @@
 import { ChangeEvent, useCallback } from 'react';
+import MEditor, { Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
 import { Input } from 'antd';
 import { LEGEND } from 'constants/global';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import MonacoEditor from 'lib/monaco/MonacoEditor';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import { IClickHouseQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { getFormatedLegend } from 'utils/getFormatedLegend';
@@ -69,6 +71,22 @@ function ClickHouseQueryBuilder({
 		[handleUpdateQuery],
 	);
 
+	const isDarkMode = useIsDarkMode();
+
+	function setEditorTheme(monaco: Monaco): void {
+		monaco.editor.defineTheme('my-theme', {
+			base: 'vs-dark',
+			inherit: true,
+			rules: [
+				{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
+				{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
+			],
+			colors: {
+				'editor.background': Color.BG_INK_300,
+			},
+		});
+	}
+
 	return (
 		<QueryHeader
 			name={queryData?.name}
@@ -77,13 +95,15 @@ function ClickHouseQueryBuilder({
 			onDelete={handleRemoveQuery}
 			deletable={deletable}
 		>
-			<MonacoEditor
+			<MEditor
 				language="sql"
 				height="200px"
 				onChange={handleUpdateEditor}
 				value={queryData?.query}
 				onMount={(_, monaco): void => {
-					void document.fonts.ready.then(() => monaco.editor.remeasureFonts());
+					document.fonts.ready.then(() => {
+						monaco.editor.remeasureFonts();
+					});
 				}}
 				options={{
 					scrollbar: {
@@ -95,6 +115,8 @@ function ClickHouseQueryBuilder({
 					fontSize: 14,
 					fontFamily: 'Space Mono',
 				}}
+				theme={isDarkMode ? 'my-theme' : 'light'}
+				beforeMount={setEditorTheme}
 			/>
 			<Input
 				onChange={handleUpdateInput}

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

@@ -7,7 +7,7 @@ import {
 	useRef,
 } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Monaco, OnMount } from '@monaco-editor/react';
+import MEditor, { Monaco, OnMount } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Check, Copy } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
@@ -15,9 +15,12 @@ import { Tooltip } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import type { AuthtypesTransactionGroupDTO } from 'api/generated/services/sigNoz.schemas';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { EDITABLE_EDITOR_OPTIONS } from 'lib/monaco/editorOptions';
-import MonacoEditor from 'lib/monaco/MonacoEditor';
 
+import {
+	defineJsonTheme,
+	EDITABLE_EDITOR_OPTIONS,
+	JSON_THEME_DARK,
+} from '../../monaco.config';
 import {
 	transformResourcePermissionsToTransactionGroups,
 	transformTransactionGroupsToResourcePermissions,
@@ -31,7 +34,7 @@ import {
 import styles from './JsonEditor.module.scss';
 import { JsonEditorProps, JsonEditorRef } from './JsonEditor.types';
 
-type MonacoEditorInstance = Parameters<OnMount>[0];
+type MonacoEditor = Parameters<OnMount>[0];
 
 const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 	function JsonEditor({ resources, mode, onChange, onValidityChange }, ref) {
@@ -47,7 +50,7 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 		});
 		const prevModeRef = useRef(mode);
 		const completionDisposableRef = useRef<{ dispose(): void } | null>(null);
-		const editorRef = useRef<MonacoEditorInstance | null>(null);
+		const editorRef = useRef<MonacoEditor | null>(null);
 		const markersListenerRef = useRef<{ dispose(): void } | null>(null);
 
 		const hasError = parseError !== null || schemaErrors.length > 0;
@@ -97,6 +100,7 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 		);
 
 		const configureMonaco = useCallback((monaco: Monaco): void => {
+			defineJsonTheme(monaco);
 			registerJsonSchema(monaco);
 			completionDisposableRef.current = registerCompletionProvider(monaco);
 		}, []);
@@ -180,7 +184,7 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 							</Button>
 						</Tooltip>
 					</div>
-					<MonacoEditor
+					<MEditor
 						value={jsonBuffer}
 						language="json"
 						path={ROLE_PERMISSIONS_MODEL_PATH}
@@ -188,6 +192,7 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 						onChange={handleEditorChange}
 						onMount={handleEditorMount}
 						height="100%"
+						theme={isDarkMode ? JSON_THEME_DARK : 'light'}
 						beforeMount={configureMonaco}
 					/>
 				</div>
@@ -220,11 +225,7 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 								className={styles.jsonEditorErrorMessage}
 							>
 								{schemaErrors[0]}
-								{schemaErrors.length > 1 && (
-									<span className="translate-safe">
-										{` (+${schemaErrors.length - 1} more)`}
-									</span>
-								)}
+								{schemaErrors.length > 1 && ` (+${schemaErrors.length - 1} more)`}
 							</Typography>
 						</div>
 					)}

frontend/src/container/RolesSettings/ViewRolePage/ReadOnlyJsonViewer.tsx

@@ -1,13 +1,17 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import MEditor from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Check, Copy } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { READONLY_EDITOR_OPTIONS } from 'lib/monaco/editorOptions';
-import MonacoEditor from 'lib/monaco/MonacoEditor';
 
+import {
+	defineJsonTheme,
+	JSON_THEME_DARK,
+	READONLY_EDITOR_OPTIONS,
+} from '../monaco.config';
 import { RolePermissionsData } from '../types';
 import { transformResourcePermissionsToTransactionGroups } from '../hooks/useRolePermissions';
 
@@ -75,11 +79,13 @@ function ReadOnlyJsonViewer({
 						</Button>
 					</Tooltip>
 				</div>
-				<MonacoEditor
+				<MEditor
 					value={jsonContent}
 					language="json"
 					options={READONLY_EDITOR_OPTIONS}
 					height="100%"
+					theme={isDarkMode ? JSON_THEME_DARK : 'light'}
+					beforeMount={defineJsonTheme}
 				/>
 			</div>
 		</div>

frontend/src/container/RolesSettings/monaco.config.ts

@@ -1,7 +1,24 @@
 import { Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
 
 type EditorOptions = Parameters<Monaco['editor']['create']>[1];
 
+export const JSON_THEME_DARK = 'json-theme-dark';
+
+export function defineJsonTheme(monaco: Monaco): void {
+	monaco.editor.defineTheme(JSON_THEME_DARK, {
+		base: 'vs-dark',
+		inherit: true,
+		rules: [
+			{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
+			{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
+		],
+		colors: {
+			'editor.background': Color.BG_INK_400,
+		},
+	});
+}
+
 const BASE_EDITOR_OPTIONS: EditorOptions = {
 	automaticLayout: true,
 	wordWrap: 'on',

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

@@ -1,10 +1,9 @@
 import { useState } from 'react';
-import { act, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import { Button } from '@signozhq/ui/button';
 import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
 import { usePreferenceContext } from 'providers/preferences/context/PreferenceContextProvider';
+import { act, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import SavedViewsHeader from '../SavedViewsHeader';
 import { mockSavedViewsApi } from './savedViewsApiMock';
@@ -28,7 +27,7 @@ const errors = {
 };
 
 function Harness(): JSX.Element {
-	const { traces } = usePreferenceContext();
+	const traces = usePreferenceContext()[SavedviewtypesSourceDTO.traces];
 	const [headerKey, setHeaderKey] = useState(0);
 	const columns = traces.preferences?.columns ?? [];
 
@@ -37,7 +36,7 @@ function Harness(): JSX.Element {
 			<SavedViewsHeader
 				key={headerKey}
 				source={SavedviewtypesSourceDTO.traces}
-				onOpenViews={jest.fn()}
+				onOpenViews={jest.fn() as jest.MockedFunction<() => void>}
 			/>
 			<span data-testid="columns">
 				{columns.map((column) => column.name).join(',')}
@@ -84,13 +83,14 @@ describe('SavedViewsHeader columns', () => {
 	});
 
 	it('keeps edited columns when the view is fetched again', async () => {
+		const user = userEvent.setup();
 		mockSavedViewsApi([errors]);
 		await openView();
 
-		await userEvent.click(screen.getByTestId('add-column'));
+		await user.click(screen.getByTestId('add-column'));
 		await waitFor(() => expect(isDirty()).toBe(true));
 
-		await userEvent.click(screen.getByTestId('remount-header'));
+		await user.click(screen.getByTestId('remount-header'));
 		await act(() => new Promise((resolve) => setTimeout(resolve, 200)));
 
 		expect(columnsText()).toBe('service.name,name,extra-2');
@@ -98,35 +98,37 @@ describe('SavedViewsHeader columns', () => {
 	});
 
 	it('discard puts the saved columns back', async () => {
+		const user = userEvent.setup();
 		mockSavedViewsApi([errors]);
 		await openView();
 
-		await userEvent.click(screen.getByTestId('add-column'));
+		await user.click(screen.getByTestId('add-column'));
 		await waitFor(() => expect(isDirty()).toBe(true));
 
-		await userEvent.click(screen.getByTestId('saved-views-discard'));
+		await user.click(screen.getByTestId('saved-views-discard'));
 
 		await waitFor(() => expect(columnsText()).toBe('service.name,name'));
 		expect(isDirty()).toBe(false);
 	});
 
 	it('discard after an update goes back to the updated columns', async () => {
+		const user = userEvent.setup();
 		mockSavedViewsApi([errors]);
 		await openView();
 
-		await userEvent.click(screen.getByTestId('add-column'));
+		await user.click(screen.getByTestId('add-column'));
 		await waitFor(() => expect(isDirty()).toBe(true));
-		await userEvent.click(screen.getByTestId('saved-views-save-changes'));
+		await user.click(screen.getByTestId('saved-views-save-changes'));
 		const update = await screen.findByTestId(
 			'saved-views-save-changes-item-update',
 		);
 		await waitFor(() => expectRowUsable(update), MENU_CHECK_TIMEOUT);
-		await userEvent.click(update);
+		await user.click(update);
 		await waitFor(() => expect(isDirty()).toBe(false));
 
-		await userEvent.click(screen.getByTestId('add-column'));
+		await user.click(screen.getByTestId('add-column'));
 		await waitFor(() => expect(isDirty()).toBe(true));
-		await userEvent.click(screen.getByTestId('saved-views-discard'));
+		await user.click(screen.getByTestId('saved-views-discard'));
 
 		await waitFor(() => expect(columnsText()).toBe('service.name,name,extra-2'));
 		expect(isDirty()).toBe(false);

frontend/src/container/SavedViews/constants.ts

@@ -1,28 +1,16 @@
 import { Copy, Link, PenLine, Trash2 } from '@signozhq/icons';
-import {
-	SavedviewtypesSchemaVersionDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { SavedviewtypesSchemaVersionDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import {
 	buildSavedViewDeletePermission,
 	buildSavedViewUpdatePermission,
 } from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
-import { DataSource } from 'types/common/queryBuilder';
 
 import { SavedViewRowActionConfig, SaveViewModalMode } from './types';
 
 export const SAVED_VIEW_SCHEMA_VERSION = SavedviewtypesSchemaVersionDTO.v2;
 
-// Only the logs and traces explorers have columns and formatting to save.
-export const SAVED_VIEW_OPTIONS_DATA_SOURCE: Partial<
-	Record<SavedviewtypesSourceDTO, DataSource>
-> = {
-	[SavedviewtypesSourceDTO.logs]: DataSource.LOGS,
-	[SavedviewtypesSourceDTO.traces]: DataSource.TRACES,
-};
-
 // What selecting a view writes to the url, so clearing it removes exactly these.
 export const SAVED_VIEW_URL_PARAMS = [
 	QueryParams.viewKey,

frontend/src/container/SavedViews/hooks/useActiveSavedView.ts

@@ -8,10 +8,9 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
 import { buildSavedViewReadPermission } from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
 import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-import { DataSource } from 'types/common/queryBuilder';
+import { isPreferenceSourcePage } from 'providers/preferences/utils';
 import { toAPIError } from 'utils/errorUtils';
 
-import { SAVED_VIEW_OPTIONS_DATA_SOURCE } from '../constants';
 import { UseActiveSavedViewResult } from '../types';
 import { hasUnsavedViewChanges } from '../utils/hasUnsavedViewChanges';
 
@@ -21,9 +20,9 @@ export function useActiveSavedView(
 	const { viewKey } = useGetSavedViewParams();
 	const { stagedQuery, panelType } = useQueryBuilder();
 
-	const optionsDataSource = SAVED_VIEW_OPTIONS_DATA_SOURCE[source];
+	const hasOptions = isPreferenceSourcePage(source);
 	const { options } = useOptionsMenu({
-		dataSource: optionsDataSource ?? DataSource.LOGS,
+		sourcePage: hasOptions ? source : SavedviewtypesSourceDTO.logs,
 	});
 
 	const { isLoading: isCheckingRead, deniedPermissions } = useAuthZ(
@@ -63,7 +62,7 @@ export function useActiveSavedView(
 			view,
 			stagedQuery,
 			panelType: panelType ?? PANEL_TYPES.LIST,
-			options: optionsDataSource ? options : undefined,
+			options: hasOptions ? options : undefined,
 		});
 	}, [
 		view,
@@ -71,7 +70,7 @@ export function useActiveSavedView(
 		isStagedQueryCurrent,
 		stagedQuery,
 		panelType,
-		optionsDataSource,
+		hasOptions,
 		options,
 	]);
 

frontend/src/container/SavedViews/hooks/useSavedViewActions.ts

@@ -20,13 +20,12 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { usePreferenceContext } from 'providers/preferences/context/PreferenceContextProvider';
-import { DataSource } from 'types/common/queryBuilder';
+import { usePreferenceSlice } from 'providers/preferences/context/usePreferenceSlice';
+import { isPreferenceSourcePage } from 'providers/preferences/utils';
 import { toAPIError } from 'utils/errorUtils';
 import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';
 
 import {
-	SAVED_VIEW_OPTIONS_DATA_SOURCE,
 	SAVED_VIEW_SCHEMA_VERSION,
 	SAVED_VIEW_TOAST_POSITION,
 	SAVED_VIEW_URL_PARAMS,
@@ -60,15 +59,11 @@ export function useSavedViewActions(
 	const { viewKey } = useGetSavedViewParams();
 	const logSavedViewEvent = useSavedViewLogEvent(source);
 
-	const optionsDataSource = SAVED_VIEW_OPTIONS_DATA_SOURCE[source];
+	const hasOptions = isPreferenceSourcePage(source);
 	const { options } = useOptionsMenu({
-		dataSource: optionsDataSource ?? DataSource.LOGS,
+		sourcePage: hasOptions ? source : SavedviewtypesSourceDTO.logs,
 	});
-	const preferences = usePreferenceContext();
-	const preferencesSlice =
-		optionsDataSource === DataSource.TRACES
-			? preferences.traces
-			: preferences.logs;
+	const preferenceSlice = usePreferenceSlice(source);
 
 	const { mutateAsync: createSavedView, isLoading: isCreating } =
 		useCreateSavedView();
@@ -86,10 +81,10 @@ export function useSavedViewActions(
 				query: stagedQuery ?? currentQuery,
 				panelType: panelType ?? PANEL_TYPES.LIST,
 				displayName,
-				options: optionsDataSource ? options : undefined,
+				options: hasOptions ? options : undefined,
 				color,
 			}),
-		[stagedQuery, currentQuery, panelType, optionsDataSource, options],
+		[stagedQuery, currentQuery, panelType, hasOptions, options],
 	);
 
 	const selectView = useCallback(
@@ -105,14 +100,14 @@ export function useSavedViewActions(
 
 	const revertView = useCallback(
 		(view: SavedviewtypesSavedViewDTO): void => {
-			if (optionsDataSource) {
+			if (preferenceSlice) {
 				const { columns, formatting } = getViewColumnsAndFormatting(
 					view.spec,
-					optionsDataSource,
+					source,
 				);
-				preferencesSlice.updateColumns(columns);
+				preferenceSlice.updateColumns(columns);
 				if (formatting) {
-					preferencesSlice.updateFormatting(formatting);
+					preferenceSlice.updateFormatting(formatting);
 				}
 			}
 			selectView(view);
@@ -120,7 +115,7 @@ export function useSavedViewActions(
 				[SavedViewEventKeys.ViewId]: view.id,
 			});
 		},
-		[optionsDataSource, preferencesSlice, selectView, logSavedViewEvent],
+		[source, preferenceSlice, selectView, logSavedViewEvent],
 	);
 
 	// The query builder redirects only ever add params, so the url is rebuilt

frontend/src/container/SavedViews/utils/getViewColumnsAndFormatting.ts

@@ -1,4 +1,7 @@
-import { SavedviewtypesSavedViewSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	SavedviewtypesSavedViewSpecDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import {
 	defaultLogsSelectedColumns,
@@ -7,7 +10,6 @@ import {
 } from 'container/OptionsMenu/constants';
 import { FontSize, LogViewMode } from 'container/OptionsMenu/types';
 import { Preferences } from 'providers/preferences/types';
-import { DataSource } from 'types/common/queryBuilder';
 
 function withColumnNames(
 	columns: TelemetryFieldKey[] | undefined,
@@ -25,11 +27,11 @@ function withColumnNames(
 // defaults filled in where the view has none.
 export function getViewColumnsAndFormatting(
 	spec: SavedviewtypesSavedViewSpecDTO | undefined,
-	dataSource: DataSource,
+	sourcePage: SavedviewtypesSourceDTO,
 ): Preferences {
 	const selectedFields = spec?.selectedFields as TelemetryFieldKey[] | undefined;
 
-	if (dataSource === DataSource.LOGS) {
+	if (sourcePage === SavedviewtypesSourceDTO.logs) {
 		return {
 			columns: ensureLogsRequiredColumns(
 				withColumnNames(selectedFields) || defaultLogsSelectedColumns,
@@ -42,7 +44,7 @@ export function getViewColumnsAndFormatting(
 			},
 		};
 	}
-	if (dataSource === DataSource.TRACES) {
+	if (sourcePage === SavedviewtypesSourceDTO.traces) {
 		return { columns: selectedFields || defaultTraceSelectedColumns };
 	}
 	return { columns: [] };

frontend/src/container/SavedViews/utils/hasUnsavedViewChanges.ts

@@ -7,6 +7,7 @@ import { HasUnsavedViewChangesArgs } from '../types';
 import { getSavedViewQuery } from './getSavedViewQuery';
 import { toSavedViewPanelType } from './toSavedViewSpec';
 import { getViewColumnsAndFormatting } from './getViewColumnsAndFormatting';
+import { toSavedViewSource } from './toSavedViewSource';
 
 // Legacy context names the server stores under their v5 name.
 const FIELD_CONTEXT_ALIASES: Record<string, TelemetrytypesFieldContextDTO> = {
@@ -79,7 +80,7 @@ export function hasUnsavedViewChanges({
 	const dataSource = stagedQuery.builder.queryData[0]?.dataSource;
 	const { columns, formatting } = getViewColumnsAndFormatting(
 		view.spec,
-		dataSource,
+		toSavedViewSource(dataSource),
 	);
 	const toNames = (fields: { name?: string; key?: string }[]): unknown[] =>
 		fields.map((field) => field.name ?? field.key);

frontend/src/container/SavedViews/utils/toSavedViewSource.ts

@@ -3,11 +3,8 @@ import { DataSource } from 'types/common/queryBuilder';
 
 import { SavedViewSourcePage } from '../types';
 
-// Explorers and the preferences module are keyed by DataSource (the signal),
-// the api keys views by source page. Same values today, so this is the one
-// place they meet. AI observability views will come with their own source and
-// DataSource cannot tell them apart from traces, so preferences should move to
-// source page at that point and this map goes with it.
+// Queries and the AI assistant name a source by DataSource (the signal), the
+// api keys views by source page.
 const SAVED_VIEW_SOURCE: Record<SavedViewSourcePage, SavedviewtypesSourceDTO> =
 	{
 		[DataSource.LOGS]: SavedviewtypesSourceDTO.logs,

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

@@ -11,6 +11,7 @@ import {
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import logEvent from 'api/common/logEvent';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import type { TableColumnDef } from 'components/TanStackTableView/types';
@@ -86,7 +87,7 @@ function ListView({
 
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS,
-		dataSource: DataSource.TRACES,
+		sourcePage: SavedviewtypesSourceDTO.traces,
 		aggregateOperator: 'count',
 		initialOptions: {
 			selectColumns: defaultSelectedColumns,

frontend/src/lib/monaco/MonacoEditor.tsx

@@ -1,25 +0,0 @@
-import { useCallback } from 'react';
-import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
-
-import { EDITOR_THEME, registerEditorTheme } from './editorTheme';
-
-export type MonacoEditorProps = Omit<EditorProps, 'theme'>;
-
-function MonacoEditor({
-	beforeMount,
-	...props
-}: MonacoEditorProps): JSX.Element {
-	const handleBeforeMount = useCallback(
-		(monaco: Monaco): void => {
-			registerEditorTheme(monaco);
-			beforeMount?.(monaco);
-		},
-		[beforeMount],
-	);
-
-	return (
-		<MEditor {...props} theme={EDITOR_THEME} beforeMount={handleBeforeMount} />
-	);
-}
-
-export default MonacoEditor;

frontend/src/lib/monaco/__tests__/MonacoEditor.test.tsx

@@ -1,58 +0,0 @@
-import type { EditorProps, Monaco } from '@monaco-editor/react';
-import { render } from '@testing-library/react';
-
-import { EDITOR_THEME, registerEditorTheme } from '../editorTheme';
-import MonacoEditor from '../MonacoEditor';
-
-const editorProps = jest.fn();
-
-jest.mock('@monaco-editor/react', () => ({
-	__esModule: true,
-	default: (props: EditorProps): JSX.Element => {
-		editorProps(props);
-		return <div data-testid="monaco" />;
-	},
-}));
-
-jest.mock('../editorTheme', () => ({
-	EDITOR_THEME: 'signoz',
-	registerEditorTheme: jest.fn(),
-}));
-
-function lastProps(): EditorProps {
-	return editorProps.mock.calls[editorProps.mock.calls.length - 1][0];
-}
-
-describe('MonacoEditor', () => {
-	beforeEach(() => {
-		editorProps.mockClear();
-		jest.mocked(registerEditorTheme).mockClear();
-	});
-
-	it('renders with the shared theme and forwards the other props', () => {
-		render(<MonacoEditor language="json" value="{}" height="100%" />);
-
-		expect(lastProps()).toMatchObject({
-			theme: EDITOR_THEME,
-			language: 'json',
-			value: '{}',
-			height: '100%',
-		});
-	});
-
-	it('registers the theme before the caller sets up monaco', () => {
-		const calls: string[] = [];
-		jest
-			.mocked(registerEditorTheme)
-			.mockImplementation(() => calls.push('theme'));
-		const beforeMount = jest.fn(() => calls.push('caller'));
-		const monaco = {} as Monaco;
-
-		render(<MonacoEditor beforeMount={beforeMount} />);
-		lastProps().beforeMount?.(monaco);
-
-		expect(registerEditorTheme).toHaveBeenCalledWith(monaco);
-		expect(beforeMount).toHaveBeenCalledWith(monaco);
-		expect(calls).toStrictEqual(['theme', 'caller']);
-	});
-});

frontend/src/lib/monaco/__tests__/editorTheme.test.ts

@@ -1,138 +0,0 @@
-import type { Monaco } from '@monaco-editor/react';
-
-type EditorThemeModule = typeof import('../editorTheme');
-
-const DARK_TOKENS = {
-	'--l1-background': '#0b0c0e',
-	'--l1-foreground': '#eceef2',
-	'--bg-vanilla-400': '#c0c1c3',
-	'--bg-robin-400': '#7190f9',
-};
-
-const LIGHT_TOKENS = {
-	'--l1-background': '#ffffff',
-	'--l1-foreground': '#121317',
-	'--bg-vanilla-400': '#c0c1c3',
-	'--bg-robin-400': '#7190f9',
-};
-
-function setTokens(tokens: Record<string, string>): void {
-	Object.entries(tokens).forEach(([name, value]) => {
-		document.body.style.setProperty(name, value);
-	});
-}
-
-function createMonaco(): { monaco: Monaco; defineTheme: jest.Mock } {
-	const defineTheme = jest.fn();
-	return {
-		monaco: { editor: { defineTheme } } as unknown as Monaco,
-		defineTheme,
-	};
-}
-
-function loadModule(): EditorThemeModule {
-	let mod: EditorThemeModule | undefined;
-	jest.isolateModules(() => {
-		mod = jest.requireActual<EditorThemeModule>('../editorTheme');
-	});
-	return mod as EditorThemeModule;
-}
-
-async function flushMutations(): Promise<void> {
-	await Promise.resolve();
-}
-
-describe('registerEditorTheme', () => {
-	afterEach(() => {
-		document.body.removeAttribute('style');
-		document.body.className = '';
-	});
-
-	it('defines a dark theme with the JSON token colours on a dark surface', () => {
-		setTokens(DARK_TOKENS);
-		const { registerEditorTheme, EDITOR_THEME } = loadModule();
-		const { monaco, defineTheme } = createMonaco();
-
-		registerEditorTheme(monaco);
-
-		expect(defineTheme).toHaveBeenCalledTimes(1);
-		expect(defineTheme).toHaveBeenCalledWith(EDITOR_THEME, {
-			base: 'vs-dark',
-			inherit: true,
-			rules: [
-				{ token: 'string.key.json', foreground: 'c0c1c3' },
-				{ token: 'string.value.json', foreground: '7190f9' },
-			],
-			colors: {
-				'editor.background': '#0b0c0e',
-				'editor.foreground': '#eceef2',
-			},
-		});
-	});
-
-	it('keeps the vs palette on a light surface', () => {
-		setTokens(LIGHT_TOKENS);
-		const { registerEditorTheme } = loadModule();
-		const { monaco, defineTheme } = createMonaco();
-
-		registerEditorTheme(monaco);
-
-		expect(defineTheme).toHaveBeenCalledWith(
-			expect.any(String),
-			expect.objectContaining({
-				base: 'vs',
-				rules: [],
-				colors: {
-					'editor.background': '#ffffff',
-					'editor.foreground': '#121317',
-				},
-			}),
-		);
-	});
-
-	it('redefines the theme when the body class switches the tokens', async () => {
-		setTokens(DARK_TOKENS);
-		const { registerEditorTheme } = loadModule();
-		const { monaco, defineTheme } = createMonaco();
-		registerEditorTheme(monaco);
-
-		setTokens(LIGHT_TOKENS);
-		document.body.classList.add('lightMode');
-		await flushMutations();
-
-		expect(defineTheme).toHaveBeenCalledTimes(2);
-		expect(defineTheme).toHaveBeenLastCalledWith(
-			expect.any(String),
-			expect.objectContaining({ base: 'vs' }),
-		);
-	});
-
-	it('ignores body class changes that leave the tokens alone', async () => {
-		setTokens(DARK_TOKENS);
-		const { registerEditorTheme } = loadModule();
-		const { monaco, defineTheme } = createMonaco();
-		registerEditorTheme(monaco);
-
-		document.body.classList.add('ant-scrolling-effect');
-		await flushMutations();
-
-		expect(defineTheme).toHaveBeenCalledTimes(1);
-	});
-
-	it('watches the body once however many editors mount', async () => {
-		const observe = jest.spyOn(MutationObserver.prototype, 'observe');
-		setTokens(DARK_TOKENS);
-		const { registerEditorTheme } = loadModule();
-		const { monaco, defineTheme } = createMonaco();
-		registerEditorTheme(monaco);
-		registerEditorTheme(monaco);
-
-		setTokens(LIGHT_TOKENS);
-		document.body.classList.add('lightMode');
-		await flushMutations();
-
-		expect(observe).toHaveBeenCalledTimes(1);
-		expect(defineTheme).toHaveBeenCalledTimes(2);
-		observe.mockRestore();
-	});
-});

frontend/src/lib/monaco/editorTheme.ts

@@ -1,78 +0,0 @@
-import type { Monaco } from '@monaco-editor/react';
-
-export const EDITOR_THEME = 'signoz';
-
-let definedBackground: string | undefined;
-let bodyClassObserver: MutationObserver | undefined;
-
-function token(name: string): string {
-	return getComputedStyle(document.body)
-		.getPropertyValue(name)
-		.trim()
-		.replace('#', '');
-}
-
-function isDark(hex: string): boolean {
-	if (hex.length < 6) {
-		return true;
-	}
-	const r = parseInt(hex.slice(0, 2), 16);
-	const g = parseInt(hex.slice(2, 4), 16);
-	const b = parseInt(hex.slice(4, 6), 16);
-	return 0.299 * r + 0.587 * g + 0.114 * b < 128;
-}
-
-function defineEditorTheme(monaco: Monaco): void {
-	const background = token('--l1-background');
-	if (background === definedBackground) {
-		return;
-	}
-	definedBackground = background;
-
-	const foreground = token('--l1-foreground');
-	const keyColor = token('--bg-vanilla-400');
-	const valueColor = token('--bg-robin-400');
-
-	// Both token colours are picked to read on a dark surface, so on a light one
-	// they wash out, the keys worst of all. Monaco's own `vs` palette is built
-	// for that surface, so let it keep its colours there, as the role viewer does.
-	const rules: { token: string; foreground: string }[] = [];
-	if (isDark(background)) {
-		if (keyColor) {
-			rules.push({ token: 'string.key.json', foreground: keyColor });
-		}
-		if (valueColor) {
-			rules.push({ token: 'string.value.json', foreground: valueColor });
-		}
-	}
-
-	const colors: Record<string, string> = {};
-	if (background) {
-		colors['editor.background'] = `#${background}`;
-	}
-	if (foreground) {
-		colors['editor.foreground'] = `#${foreground}`;
-	}
-
-	monaco.editor.defineTheme(EDITOR_THEME, {
-		base: isDark(background) ? 'vs-dark' : 'vs',
-		inherit: true,
-		rules,
-		colors,
-	});
-}
-
-// Monaco has a single theme for every editor on the page, and the design tokens
-// switch with the body's `dark` class, so the theme follows that class instead
-// of being defined per editor.
-export function registerEditorTheme(monaco: Monaco): void {
-	defineEditorTheme(monaco);
-	if (bodyClassObserver) {
-		return;
-	}
-	bodyClassObserver = new MutationObserver(() => defineEditorTheme(monaco));
-	bodyClassObserver.observe(document.body, {
-		attributes: true,
-		attributeFilter: ['class'],
-	});
-}

frontend/src/lib/monaco/jsonEditorTheme.ts

@@ -0,0 +1,52 @@
+import type { Monaco } from '@monaco-editor/react';
+
+export const JSON_EDITOR_THEME = 'signoz-json';
+
+function token(el: HTMLElement, name: string): string {
+	return getComputedStyle(el).getPropertyValue(name).trim().replace('#', '');
+}
+
+function isDark(hex: string): boolean {
+	if (hex.length < 6) {
+		return true;
+	}
+	const r = parseInt(hex.slice(0, 2), 16);
+	const g = parseInt(hex.slice(2, 4), 16);
+	const b = parseInt(hex.slice(4, 6), 16);
+	return 0.299 * r + 0.587 * g + 0.114 * b < 128;
+}
+
+export function defineJsonEditorTheme(monaco: Monaco, el: HTMLElement): void {
+	const background = token(el, '--l1-background');
+	const foreground = token(el, '--l1-foreground');
+	const keyColor = token(el, '--bg-vanilla-400');
+	const valueColor = token(el, '--bg-robin-400');
+
+	// Both token colours are picked to read on a dark surface, so on a light one
+	// they wash out, the keys worst of all. Monaco's own `vs` palette is built
+	// for that surface, so let it keep its colours there, as the role viewer does.
+	const rules: { token: string; foreground: string }[] = [];
+	if (isDark(background)) {
+		if (keyColor) {
+			rules.push({ token: 'string.key.json', foreground: keyColor });
+		}
+		if (valueColor) {
+			rules.push({ token: 'string.value.json', foreground: valueColor });
+		}
+	}
+
+	const colors: Record<string, string> = {};
+	if (background) {
+		colors['editor.background'] = `#${background}`;
+	}
+	if (foreground) {
+		colors['editor.foreground'] = `#${foreground}`;
+	}
+
+	monaco.editor.defineTheme(JSON_EDITOR_THEME, {
+		base: isDark(background) ? 'vs-dark' : 'vs',
+		inherit: true,
+		rules,
+		colors,
+	});
+}

frontend/src/pages/AlertList/NotificationChannels/components/ChannelJsonDialog/ChannelJsonDialog.tsx

@@ -1,11 +1,15 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import MEditor from '@monaco-editor/react';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { useGetNotificationChannel } from 'api/generated/services/channels';
 import ErrorEmptyState from 'components/Alerts/ErrorEmptyState';
 import Spinner from 'components/Spinner';
-import { READONLY_EDITOR_OPTIONS } from 'lib/monaco/editorOptions';
-import MonacoEditor from 'lib/monaco/MonacoEditor';
+import { READONLY_EDITOR_OPTIONS } from 'container/RolesSettings/monaco.config';
+import {
+	defineJsonEditorTheme,
+	JSON_EDITOR_THEME,
+} from 'lib/monaco/jsonEditorTheme';
 
 import { channelToJson, hasSecrets } from '../../utils/channelJson';
 import styles from './ChannelJsonDialog.module.scss';
@@ -88,11 +92,18 @@ function ChannelJsonDialog({
 					/>
 
 					<div className={styles.editor}>
-						<MonacoEditor
+						<MEditor
 							value={json}
 							language="json"
 							options={READONLY_EDITOR_OPTIONS}
 							height="100%"
+							theme="vs-dark"
+							// the same theme the dashboard JSON drawer uses: it reads the
+							// page's own tokens, so it follows light and dark
+							onMount={(editor, monaco): void => {
+								defineJsonEditorTheme(monaco, editor.getContainerDomNode());
+								monaco.editor.setTheme(JSON_EDITOR_THEME);
+							}}
 						/>
 					</div>
 				</div>

frontend/src/pages/DashboardPage/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorDrawer.tsx

@@ -1,4 +1,5 @@
 import { KeyboardEvent, useCallback } from 'react';
+import MEditor from '@monaco-editor/react';
 import { TriangleAlert } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Tooltip } from '@signozhq/ui/tooltip';
@@ -11,7 +12,10 @@ import { DashboardDetailEvents } from 'pages/DashboardPage/constants/events';
 import { useCopyToClipboard } from 'react-use';
 import { toast } from '@signozhq/ui/sonner';
 
-import MonacoEditor from 'lib/monaco/MonacoEditor';
+import {
+	defineJsonEditorTheme,
+	JSON_EDITOR_THEME,
+} from 'lib/monaco/jsonEditorTheme';
 import styles from './JsonEditorDrawer.module.scss';
 import JsonEditorToolbar from './JsonEditorToolbar';
 import { useJsonEditor } from './useJsonEditor';
@@ -209,7 +213,7 @@ function JsonEditorDrawer({
 					onReset={reset}
 				/>
 				<div className={styles.editor}>
-					<MonacoEditor
+					<MEditor
 						language="json"
 						height="100%"
 						value={draft}
@@ -221,7 +225,10 @@ function JsonEditorDrawer({
 							fontSize: 13,
 							fontFamily: 'Space Mono',
 						}}
-						onMount={(_editor, monaco): void => {
+						theme="vs-dark"
+						onMount={(editor, monaco): void => {
+							defineJsonEditorTheme(monaco, editor.getContainerDomNode());
+							monaco.editor.setTheme(JSON_EDITOR_THEME);
 							void document.fonts.ready.then(() => monaco.editor.remeasureFonts());
 						}}
 					/>

frontend/src/pages/DashboardPage/PanelEditorPage/stories/PanelEditorPage.stories.tsx

@@ -1,13 +1,11 @@
 import type { ComponentType } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Route } from 'react-router-dom';
-import * as monaco from 'monaco-editor';
 import ROUTES from 'constants/routes';
-import { screen, userEvent, waitFor, within } from 'storybook/test';
+import { screen, userEvent, within } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
-import { waitForMonacoText } from '@/storybook/visual/waitForMonacoText';
 
 import { panelEditorMocks, savePanel } from './PanelEditorPage.stories.mocks';
 
@@ -251,43 +249,3 @@ export const TextPanelSavedToast: Story = {
 	args: { panel: 'new', newPanelKind: 'text' },
 	play: PanelSavedToast.play,
 };
-
-const CLICKHOUSE_QUERY =
-	'SELECT toStartOfInterval(timestamp, INTERVAL 1 MINUTE) AS ts, serviceName, count() AS calls FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp > now() - INTERVAL 1 HOUR GROUP BY ts, serviceName ORDER BY ts';
-
-/**
- * The ClickHouse Query tab with a query written in its SQL editor, over the
- * panel the editor opened on.
- */
-export const ClickHouseQuery: Story = {
-	play: async ({ canvasElement }): Promise<void> => {
-		const tab = await within(canvasElement).findByRole(
-			'tab',
-			{ name: /ClickHouse Query/ },
-			{ timeout: 10000 },
-		);
-
-		await userEvent.click(tab);
-
-		// Typing into Monaco's hidden textarea never reaches its model in this runner.
-		const model = await waitFor(
-			() => {
-				const found = monaco.editor
-					.getModels()
-					.find((candidate) => candidate.getLanguageId() === 'sql');
-
-				if (!found) {
-					throw new Error('The SQL editor has not mounted');
-				}
-
-				return found;
-			},
-			{ timeout: 15000 },
-		);
-
-		model.setValue(CLICKHOUSE_QUERY);
-		await waitForMonacoText(canvasElement);
-		await userEvent.unhover(tab);
-		(document.activeElement as HTMLElement | null)?.blur();
-	},
-};

frontend/src/pages/DashboardsListPage/components/NewDashboardModal/JsonEditor.tsx

@@ -1,8 +1,10 @@
 import { useState } from 'react';
+import MEditor, { Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { Maximize2 } from '@signozhq/icons';
-import MonacoEditor from 'lib/monaco/MonacoEditor';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 
 import styles from './NewDashboardModal.module.scss';
 
@@ -13,6 +15,18 @@ interface Props {
 	height?: string;
 }
 
+const defineTheme = (monaco: Monaco): void => {
+	monaco.editor.defineTheme('my-theme', {
+		base: 'vs-dark',
+		inherit: true,
+		rules: [
+			{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
+			{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
+		],
+		colors: { 'editor.background': Color.BG_INK_300 },
+	});
+};
+
 // JSON editor with a one-click "expand" into an extra-wide modal for easier
 // editing/review. The expanded editor shares the same value, so edits persist.
 function JsonEditor({
@@ -21,10 +35,11 @@ function JsonEditor({
 	readOnly = false,
 	height = '38vh',
 }: Props): JSX.Element {
+	const isDarkMode = useIsDarkMode();
 	const [expanded, setExpanded] = useState(false);
 
 	const renderEditor = (editorHeight: string): JSX.Element => (
-		<MonacoEditor
+		<MEditor
 			language="json"
 			height={editorHeight}
 			value={value}
@@ -36,6 +51,8 @@ function JsonEditor({
 				fontSize: 14,
 				fontFamily: 'Space Mono',
 			}}
+			theme={isDarkMode ? 'my-theme' : 'light'}
+			beforeMount={defineTheme}
 		/>
 	);
 

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

@@ -3,7 +3,6 @@ import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
-import { waitForMonacoText } from '@/storybook/visual/waitForMonacoText';
 
 import LLMObservabilityPage from '../../index';
 import {
@@ -102,21 +101,3 @@ export const ChangesSavedToast: Story = {
 		}
 	},
 };
-
-/**
- * The Test tab: the JSON editor pre-filled with the sample span, before any run.
- */
-export const TestTab: Story = {
-	play: async ({ canvasElement }): Promise<void> => {
-		const tab = await within(canvasElement).findByRole(
-			'tab',
-			{ name: 'Test' },
-			{ timeout: 10000 },
-		);
-
-		await userEvent.click(tab);
-		await waitForMonacoText(canvasElement);
-		await userEvent.unhover(tab);
-		(document.activeElement as HTMLElement | null)?.blur();
-	},
-};

frontend/src/pages/TraceDetailsV3/stories/TraceDetailsV3.stories.tsx

@@ -12,7 +12,6 @@ import {
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
-import { waitForMonacoText } from '@/storybook/visual/waitForMonacoText';
 
 import {
 	focusSpanIndex,
@@ -326,19 +325,3 @@ export const TraceExportCancelledToast: Story = {
 		await userEvent.click(await screen.findByTestId('trace-download-cancel'));
 	},
 };
-
-/** The span panel switched from the pretty view to the span's raw JSON. */
-export const SpanJsonView: Story = {
-	play: async ({ canvasElement }): Promise<void> => {
-		const option = await within(canvasElement).findByTestId(
-			'data-viewer-view-mode-button-json',
-			undefined,
-			untilLoaded,
-		);
-
-		await userEvent.click(option);
-		await waitForMonacoText(canvasElement);
-		await userEvent.unhover(option);
-		(document.activeElement as HTMLElement | null)?.blur();
-	},
-};

frontend/src/pages/TracesExplorer/index.tsx

@@ -73,7 +73,7 @@ function TracesExplorer(): JSX.Element {
 
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS,
-		dataSource: DataSource.TRACES,
+		sourcePage: SavedviewtypesSourceDTO.traces,
 		aggregateOperator: 'noop',
 		initialOptions: {
 			selectColumns: defaultSelectedColumns,

frontend/src/periscope/components/JsonView/JsonView.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
-import { EditorProps } from '@monaco-editor/react';
+import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
-import MonacoEditor from 'lib/monaco/MonacoEditor';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 
 import './JsonView.styles.scss';
 
@@ -37,16 +38,36 @@ const editorOptions: EditorProps['options'] = {
 	folding: false,
 };
 
+function setEditorTheme(monaco: Monaco): void {
+	monaco.editor.defineTheme('signoz-dark', {
+		base: 'vs-dark',
+		inherit: true,
+		rules: [
+			{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
+			{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
+		],
+		colors: {
+			'editor.background': '#00000000', // transparent
+		},
+		fontFamily: 'SF Mono, Geist Mono, Fira Code, monospace',
+		fontSize: 12,
+		fontWeight: 'normal',
+		lineHeight: 18,
+		letterSpacing: -0.06,
+	});
+}
+
 function JsonView({
 	data,
 	height = '575px',
 	fontSize = 12,
 }: JsonViewProps): JSX.Element {
 	const [isWrapWord, setIsWrapWord] = useState(true);
+	const isDarkMode = useIsDarkMode();
 
 	return (
 		<div className="json-view">
-			<MonacoEditor
+			<MEditor
 				value={data}
 				language="json"
 				options={{
@@ -56,6 +77,8 @@ function JsonView({
 				}}
 				onChange={(): void => {}}
 				height={height}
+				theme={isDarkMode ? 'signoz-dark' : 'light'}
+				beforeMount={setEditorTheme}
 			/>
 			<div className="json-view__footer">
 				<div className="json-view__wrap-toggle">

frontend/src/providers/preferences/__tests__/PreferencesProvider.integration.test.tsx

@@ -1,15 +1,15 @@
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { LogViewMode } from 'container/OptionsMenu/types';
+import { LogViewMode, FontSize } from 'container/OptionsMenu/types';
 import {
 	defaultLogsSelectedColumns,
 	defaultTraceSelectedColumns,
 } from 'container/OptionsMenu/constants';
-import { FontSize } from 'container/OptionsMenu/types';
 import { render, screen, userEvent } from 'tests/test-utils';
-import { DataSource } from 'types/common/queryBuilder';
 
 import { usePreferenceContext } from '../context/PreferenceContextProvider';
+import { PreferenceSourcePage } from '../types';
 
 const ROUTE_LOGS = '/logs';
 const ROUTE_TRACES = '/traces';
@@ -38,14 +38,13 @@ function getLocalStorageJSON<T>(key: string): T | null {
 }
 
 function Consumer({
-	dataSource,
+	sourcePage,
 	testIdPrefix,
 }: {
-	dataSource: DataSource;
+	sourcePage: PreferenceSourcePage;
 	testIdPrefix: string;
 }): JSX.Element {
-	const ctx = usePreferenceContext();
-	const slice = dataSource === DataSource.TRACES ? ctx.traces : ctx.logs;
+	const slice = usePreferenceContext()[sourcePage];
 
 	return (
 		<div>
@@ -58,7 +57,7 @@ function Consumer({
 				type="button"
 				onClick={(): void => {
 					const newCols: TelemetryFieldKey[] =
-						dataSource === DataSource.TRACES
+						sourcePage === SavedviewtypesSourceDTO.traces
 							? (defaultTraceSelectedColumns.slice(0, 1) as TelemetryFieldKey[])
 							: (defaultLogsSelectedColumns.slice(0, 1) as TelemetryFieldKey[]);
 					slice.updateColumns(newCols);
@@ -78,7 +77,10 @@ describe('PreferencesProvider integration', () => {
 	describe('Logs', () => {
 		it('loads defaults when no localStorage or url provided', () => {
 			render(
-				<Consumer dataSource={DataSource.LOGS} testIdPrefix={TESTID_LOGS} />,
+				<Consumer
+					sourcePage={SavedviewtypesSourceDTO.logs}
+					testIdPrefix={TESTID_LOGS}
+				/>,
 				undefined,
 				{
 					initialRoute: ROUTE_LOGS,
@@ -101,7 +103,10 @@ describe('PreferencesProvider integration', () => {
 			});
 
 			render(
-				<Consumer dataSource={DataSource.LOGS} testIdPrefix={TESTID_LOGS} />,
+				<Consumer
+					sourcePage={SavedviewtypesSourceDTO.logs}
+					testIdPrefix={TESTID_LOGS}
+				/>,
 				undefined,
 				{
 					initialRoute: ROUTE_LOGS,
@@ -116,7 +121,10 @@ describe('PreferencesProvider integration', () => {
 		it('direct mode updateColumns persists to localStorage', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(
-				<Consumer dataSource={DataSource.LOGS} testIdPrefix={TESTID_LOGS} />,
+				<Consumer
+					sourcePage={SavedviewtypesSourceDTO.logs}
+					testIdPrefix={TESTID_LOGS}
+				/>,
 				undefined,
 				{
 					initialRoute: ROUTE_LOGS,
@@ -142,7 +150,7 @@ describe('PreferencesProvider integration', () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 			render(
-				<Consumer dataSource={DataSource.LOGS} testIdPrefix="logs" />,
+				<Consumer sourcePage={SavedviewtypesSourceDTO.logs} testIdPrefix="logs" />,
 				undefined,
 				{
 					initialRoute: initialEntry,
@@ -175,7 +183,10 @@ describe('PreferencesProvider integration', () => {
 			});
 
 			render(
-				<Consumer dataSource={DataSource.LOGS} testIdPrefix={TESTID_LOGS} />,
+				<Consumer
+					sourcePage={SavedviewtypesSourceDTO.logs}
+					testIdPrefix={TESTID_LOGS}
+				/>,
 				undefined,
 				{
 					initialRoute: ROUTE_LOGS,
@@ -197,7 +208,7 @@ describe('PreferencesProvider integration', () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 			function FormattingConsumer(): JSX.Element {
-				const { logs } = usePreferenceContext();
+				const logs = usePreferenceContext()[SavedviewtypesSourceDTO.logs];
 				return (
 					<button
 						data-testid="logs-update-formatting"
@@ -235,7 +246,10 @@ describe('PreferencesProvider integration', () => {
 			const initialEntry = `/logs?viewKey=${encodeURIComponent(viewKey)}`;
 
 			render(
-				<Consumer dataSource={DataSource.LOGS} testIdPrefix={TESTID_LOGS} />,
+				<Consumer
+					sourcePage={SavedviewtypesSourceDTO.logs}
+					testIdPrefix={TESTID_LOGS}
+				/>,
 				undefined,
 				{ initialRoute: initialEntry },
 			);
@@ -254,7 +268,10 @@ describe('PreferencesProvider integration', () => {
 	describe('Traces', () => {
 		it('loads defaults when no localStorage or url provided', () => {
 			render(
-				<Consumer dataSource={DataSource.TRACES} testIdPrefix={TESTID_TRACES} />,
+				<Consumer
+					sourcePage={SavedviewtypesSourceDTO.traces}
+					testIdPrefix={TESTID_TRACES}
+				/>,
 				undefined,
 				{
 					initialRoute: ROUTE_TRACES,
@@ -273,7 +290,10 @@ describe('PreferencesProvider integration', () => {
 			});
 
 			render(
-				<Consumer dataSource={DataSource.TRACES} testIdPrefix={TESTID_TRACES} />,
+				<Consumer
+					sourcePage={SavedviewtypesSourceDTO.traces}
+					testIdPrefix={TESTID_TRACES}
+				/>,
 				undefined,
 				{
 					initialRoute: ROUTE_TRACES,
@@ -286,7 +306,10 @@ describe('PreferencesProvider integration', () => {
 		it('direct mode updateColumns persists to localStorage', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(
-				<Consumer dataSource={DataSource.TRACES} testIdPrefix={TESTID_TRACES} />,
+				<Consumer
+					sourcePage={SavedviewtypesSourceDTO.traces}
+					testIdPrefix={TESTID_TRACES}
+				/>,
 				undefined,
 				{
 					initialRoute: ROUTE_TRACES,
@@ -309,7 +332,10 @@ describe('PreferencesProvider integration', () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 			render(
-				<Consumer dataSource={DataSource.TRACES} testIdPrefix="traces" />,
+				<Consumer
+					sourcePage={SavedviewtypesSourceDTO.traces}
+					testIdPrefix="traces"
+				/>,
 				undefined,
 				{
 					initialRoute: initialEntry,
@@ -338,7 +364,10 @@ describe('PreferencesProvider integration', () => {
 			});
 
 			render(
-				<Consumer dataSource={DataSource.TRACES} testIdPrefix={TESTID_TRACES} />,
+				<Consumer
+					sourcePage={SavedviewtypesSourceDTO.traces}
+					testIdPrefix={TESTID_TRACES}
+				/>,
 				undefined,
 				{ initialRoute: ROUTE_TRACES },
 			);
@@ -355,7 +384,7 @@ describe('PreferencesProvider integration', () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 			function TracesFormattingConsumer(): JSX.Element {
-				const { traces } = usePreferenceContext();
+				const traces = usePreferenceContext()[SavedviewtypesSourceDTO.traces];
 				return (
 					<button
 						data-testid="traces-update-formatting"
@@ -390,7 +419,10 @@ describe('PreferencesProvider integration', () => {
 			const initialEntry = `/traces?viewKey=${encodeURIComponent(viewKey)}`;
 
 			render(
-				<Consumer dataSource={DataSource.TRACES} testIdPrefix={TESTID_TRACES} />,
+				<Consumer
+					sourcePage={SavedviewtypesSourceDTO.traces}
+					testIdPrefix={TESTID_TRACES}
+				/>,
 				undefined,
 				{ initialRoute: initialEntry },
 			);

frontend/src/providers/preferences/__tests__/usePreferenceLoader.test.tsx

@@ -1,6 +1,9 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { Dispatch, SetStateAction } from 'react';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
-import { DataSource } from 'types/common/queryBuilder';
+import { FontSize } from 'container/OptionsMenu/types';
+import { renderHook, waitFor } from 'tests/test-utils';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import logsLoaderConfig from '../configs/logsLoaderConfig';
 import { usePreferenceLoader } from '../loader/usePreferenceLoader';
@@ -42,15 +45,18 @@ jest.mock('../configs/tracesLoaderConfig', () => ({
 }));
 
 describe('usePreferenceLoader', () => {
+	const setReSync = jest.fn() as jest.MockedFunction<
+		Dispatch<SetStateAction<boolean>>
+	>;
+
 	beforeEach(() => {
 		jest.clearAllMocks();
 	});
 
 	it('should load logs preferences based on priority order', async () => {
-		const setReSync = jest.fn();
 		const { result } = renderHook(() =>
 			usePreferenceLoader({
-				dataSource: DataSource.LOGS,
+				sourcePage: SavedviewtypesSourceDTO.logs,
 				reSync: false,
 				setReSync,
 			}),
@@ -71,10 +77,9 @@ describe('usePreferenceLoader', () => {
 	});
 
 	it('should load traces preferences', async () => {
-		const setReSync = jest.fn();
 		const { result } = renderHook(() =>
 			usePreferenceLoader({
-				dataSource: DataSource.TRACES,
+				sourcePage: SavedviewtypesSourceDTO.traces,
 				reSync: false,
 				setReSync,
 			}),
@@ -93,13 +98,11 @@ describe('usePreferenceLoader', () => {
 	});
 
 	it('should call setReSync when reSync is true', async () => {
-		const setReSync = jest.fn();
-
 		// Test that the hook calls setReSync(false) when reSync is true
 		// We'll unmount quickly to avoid the infinite loop
 		const { unmount } = renderHook(() =>
 			usePreferenceLoader({
-				dataSource: DataSource.LOGS,
+				sourcePage: SavedviewtypesSourceDTO.logs,
 				reSync: true,
 				setReSync,
 			}),
@@ -118,19 +121,25 @@ describe('usePreferenceLoader', () => {
 
 	it('should handle errors during loading', async () => {
 		// Make first call succeed (initial state), second call throw in reSync effect
-		const localSpy: jest.SpyInstance = jest.spyOn(logsLoaderConfig, 'local');
+		const localSpy = jest.spyOn(logsLoaderConfig, 'local');
+		// The loader reads stored columns by name, though `local()` types them as
+		// the older key-based shape.
 		localSpy.mockImplementationOnce(() => ({
-			columns: [{ name: 'local-column' }],
-			formatting: { maxLines: 5, format: 'table', fontSize: 'medium', version: 1 },
+			columns: [{ name: 'local-column' }] as unknown as BaseAutocompleteData[],
+			formatting: {
+				maxLines: 5,
+				format: 'table',
+				fontSize: FontSize.MEDIUM,
+				version: 1,
+			},
 		}));
 		localSpy.mockImplementationOnce(() => {
 			throw new Error('Loading failed');
 		});
 
-		const setReSync = jest.fn();
 		const { result } = renderHook(() =>
 			usePreferenceLoader({
-				dataSource: DataSource.LOGS,
+				sourcePage: SavedviewtypesSourceDTO.logs,
 				reSync: true,
 				setReSync,
 			}),

frontend/src/providers/preferences/__tests__/usePreferenceSync.test.tsx

@@ -1,4 +1,3 @@
-import { renderHook } from '@testing-library/react';
 import { useGetSavedView } from 'api/generated/services/saved-view';
 import {
 	SavedviewtypesSavedViewDTO,
@@ -9,32 +8,21 @@ import {
 	defaultTraceSelectedColumns,
 	ensureLogsRequiredColumns,
 } from 'container/OptionsMenu/constants';
-import { DataSource } from 'types/common/queryBuilder';
+import { renderHook } from 'tests/test-utils';
 
+import { usePreferenceLoader } from '../loader/usePreferenceLoader';
 import { usePreferenceSync } from '../sync/usePreferenceSync';
-import { PreferenceMode } from '../types';
+import { PreferenceMode, Preferences } from '../types';
+import { usePreferenceUpdater } from '../updater/usePreferenceUpdater';
 
 jest.mock('api/generated/services/saved-view');
 
-const loaderPreferences = { columns: [{ name: 'from-loader' }] };
-jest.mock('../loader/usePreferenceLoader', () => ({
-	usePreferenceLoader: jest.fn(() => ({
-		preferences: loaderPreferences,
-		loading: false,
-		error: null,
-	})),
-}));
+jest.mock('../loader/usePreferenceLoader');
+jest.mock('../updater/usePreferenceUpdater');
 
-jest.mock('../updater/usePreferenceUpdater', () => ({
-	usePreferenceUpdater: jest.fn(() => ({
-		updateColumns: jest.fn(),
-		updateFormatting: jest.fn(),
-	})),
-}));
+const loaderPreferences: Preferences = { columns: [{ name: 'from-loader' }] };
 
-const mockedUseGetSavedView = useGetSavedView as jest.MockedFunction<
-	typeof useGetSavedView
->;
+const mockedUseGetSavedView = jest.mocked(useGetSavedView);
 
 function makeView(
 	id: string,
@@ -76,6 +64,19 @@ function mockViews(views: SavedviewtypesSavedViewDTO[]): void {
 describe('usePreferenceSync in saved view mode', () => {
 	beforeEach(() => {
 		mockedUseGetSavedView.mockReset();
+		jest.mocked(usePreferenceLoader).mockReturnValue({
+			preferences: loaderPreferences,
+			loading: false,
+			error: null,
+		});
+		jest.mocked(usePreferenceUpdater).mockReturnValue({
+			updateColumns: jest.fn() as jest.MockedFunction<
+				ReturnType<typeof usePreferenceUpdater>['updateColumns']
+			>,
+			updateFormatting: jest.fn() as jest.MockedFunction<
+				ReturnType<typeof usePreferenceUpdater>['updateFormatting']
+			>,
+		});
 	});
 
 	it('fetches the view only in saved view mode with a view id', () => {
@@ -84,7 +85,7 @@ describe('usePreferenceSync in saved view mode', () => {
 		renderHook(() =>
 			usePreferenceSync({
 				mode: PreferenceMode.DIRECT,
-				dataSource: DataSource.LOGS,
+				sourcePage: SavedviewtypesSourceDTO.logs,
 				savedViewId: undefined,
 			}),
 		);
@@ -101,7 +102,7 @@ describe('usePreferenceSync in saved view mode', () => {
 		const { result } = renderHook(() =>
 			usePreferenceSync({
 				mode: PreferenceMode.DIRECT,
-				dataSource: DataSource.LOGS,
+				sourcePage: SavedviewtypesSourceDTO.logs,
 				savedViewId: undefined,
 			}),
 		);
@@ -120,7 +121,7 @@ describe('usePreferenceSync in saved view mode', () => {
 		const { result } = renderHook(() =>
 			usePreferenceSync({
 				mode: PreferenceMode.SAVED_VIEW,
-				dataSource: DataSource.LOGS,
+				sourcePage: SavedviewtypesSourceDTO.logs,
 				savedViewId: 'view-1',
 			}),
 		);
@@ -147,7 +148,7 @@ describe('usePreferenceSync in saved view mode', () => {
 		const { result } = renderHook(() =>
 			usePreferenceSync({
 				mode: PreferenceMode.SAVED_VIEW,
-				dataSource: DataSource.LOGS,
+				sourcePage: SavedviewtypesSourceDTO.logs,
 				savedViewId: 'view-1',
 			}),
 		);
@@ -174,14 +175,14 @@ describe('usePreferenceSync in saved view mode', () => {
 		const withFields = renderHook(() =>
 			usePreferenceSync({
 				mode: PreferenceMode.SAVED_VIEW,
-				dataSource: DataSource.TRACES,
+				sourcePage: SavedviewtypesSourceDTO.traces,
 				savedViewId: 'with-fields',
 			}),
 		);
 		const withoutFields = renderHook(() =>
 			usePreferenceSync({
 				mode: PreferenceMode.SAVED_VIEW,
-				dataSource: DataSource.TRACES,
+				sourcePage: SavedviewtypesSourceDTO.traces,
 				savedViewId: 'without-fields',
 			}),
 		);
@@ -202,7 +203,7 @@ describe('usePreferenceSync in saved view mode', () => {
 		const { result } = renderHook(() =>
 			usePreferenceSync({
 				mode: PreferenceMode.SAVED_VIEW,
-				dataSource: DataSource.LOGS,
+				sourcePage: SavedviewtypesSourceDTO.logs,
 				savedViewId: 'missing',
 			}),
 		);

frontend/src/providers/preferences/__tests__/usePreferenceUpdater.test.tsx

@@ -1,45 +1,39 @@
-import { act } from 'react-dom/test-utils';
-import { renderHook } from '@testing-library/react';
+import { Dispatch, SetStateAction } from 'react';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'api/v5/v5';
-import { LogViewMode } from 'container/OptionsMenu/types';
-import { FontSize } from 'container/OptionsMenu/types';
+import { LogViewMode, FontSize } from 'container/OptionsMenu/types';
+import useUrlQueryData from 'hooks/useUrlQueryData';
 import {
 	FormattingOptions,
 	PreferenceMode,
 	Preferences,
 } from 'providers/preferences/types';
+import { act, renderHook } from 'tests/test-utils';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { DataSource } from 'types/common/queryBuilder';
 
+import getLogsUpdaterConfig from '../configs/logsUpdaterConfig';
+import getTracesUpdaterConfig from '../configs/tracesUpdaterConfig';
 import { usePreferenceUpdater } from '../updater/usePreferenceUpdater';
 
-// Mock the config updaters
-const mockUpdateColumns = jest.fn();
-const mockUpdateFormatting = jest.fn();
+jest.mock('../configs/logsUpdaterConfig');
+jest.mock('../configs/tracesUpdaterConfig');
+jest.mock('hooks/useUrlQueryData');
 
-jest.mock('../configs/logsUpdaterConfig', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => ({
-		updateColumns: mockUpdateColumns,
-		updateFormatting: mockUpdateFormatting,
-	})),
-}));
+type LogsUpdater = ReturnType<typeof getLogsUpdaterConfig>;
+type TracesUpdater = ReturnType<typeof getTracesUpdaterConfig>;
 
-jest.mock('../configs/tracesUpdaterConfig', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => ({
-		updateColumns: mockUpdateColumns,
-		updateFormatting: mockUpdateFormatting,
-	})),
-}));
-
-// Mock the URL query hook
-jest.mock('hooks/useUrlQueryData', () => ({
-	__esModule: true,
-	default: jest.fn().mockReturnValue({
-		redirectWithQuery: jest.fn(),
-	}),
-}));
+const mockLogsUpdateColumns = jest.fn() as jest.MockedFunction<
+	LogsUpdater['updateColumns']
+>;
+const mockLogsUpdateFormatting = jest.fn() as jest.MockedFunction<
+	LogsUpdater['updateFormatting']
+>;
+const mockTracesUpdateColumns = jest.fn() as jest.MockedFunction<
+	TracesUpdater['updateColumns']
+>;
+const mockTracesUpdateFormatting = jest.fn() as jest.MockedFunction<
+	TracesUpdater['updateFormatting']
+>;
 
 describe('usePreferenceUpdater', () => {
 	const mockPreferences: Preferences = {
@@ -51,18 +45,36 @@ describe('usePreferenceUpdater', () => {
 			version: 1,
 		},
 	};
+	const setReSync = jest.fn() as jest.MockedFunction<
+		Dispatch<SetStateAction<boolean>>
+	>;
+	const setSavedViewPreferences = jest.fn() as jest.MockedFunction<
+		Dispatch<SetStateAction<Preferences | null>>
+	>;
 
 	beforeEach(() => {
 		jest.clearAllMocks();
+		jest.mocked(getLogsUpdaterConfig).mockReturnValue({
+			updateColumns: mockLogsUpdateColumns,
+			updateFormatting: mockLogsUpdateFormatting,
+		});
+		jest.mocked(getTracesUpdaterConfig).mockReturnValue({
+			updateColumns: mockTracesUpdateColumns,
+			updateFormatting: mockTracesUpdateFormatting,
+		});
+		jest.mocked(useUrlQueryData).mockReturnValue({
+			query: null,
+			queryData: undefined,
+			redirectWithQuery: jest.fn() as jest.MockedFunction<
+				(newQueryData: unknown) => void
+			>,
+		});
 	});
 
 	it('should return updateColumns and updateFormatting functions', () => {
-		const setReSync = jest.fn();
-		const setSavedViewPreferences = jest.fn();
-
 		const { result } = renderHook(() =>
 			usePreferenceUpdater({
-				dataSource: DataSource.LOGS,
+				sourcePage: SavedviewtypesSourceDTO.logs,
 				mode: PreferenceMode.DIRECT,
 				preferences: mockPreferences,
 				setReSync,
@@ -75,9 +87,7 @@ describe('usePreferenceUpdater', () => {
 		expect(typeof result.current.updateFormatting).toBe('function');
 	});
 
-	it('should call the logs updater for updateColumns with logs dataSource', () => {
-		const setReSync = jest.fn();
-		const setSavedViewPreferences = jest.fn();
+	it('should call the logs updater for updateColumns with the logs list key', () => {
 		const newColumns: TelemetryFieldKey[] = [
 			{
 				name: 'new-column',
@@ -88,7 +98,7 @@ describe('usePreferenceUpdater', () => {
 
 		const { result } = renderHook(() =>
 			usePreferenceUpdater({
-				dataSource: DataSource.LOGS,
+				sourcePage: SavedviewtypesSourceDTO.logs,
 				mode: PreferenceMode.DIRECT,
 				preferences: mockPreferences,
 				setReSync,
@@ -101,16 +111,15 @@ describe('usePreferenceUpdater', () => {
 		});
 
 		// Should call the logs updater
-		expect(mockUpdateColumns).toHaveBeenCalledWith(
+		expect(mockLogsUpdateColumns).toHaveBeenCalledWith(
 			newColumns,
 			PreferenceMode.DIRECT,
 		);
+		expect(mockTracesUpdateColumns).not.toHaveBeenCalled();
 		expect(setReSync).toHaveBeenCalledWith(true);
 	});
 
-	it('should call the logs updater for updateFormatting with logs dataSource', () => {
-		const setReSync = jest.fn();
-		const setSavedViewPreferences = jest.fn();
+	it('should call the logs updater for updateFormatting with the logs list key', () => {
 		const newFormatting: FormattingOptions = {
 			maxLines: 10,
 			format: 'table' as LogViewMode,
@@ -120,7 +129,7 @@ describe('usePreferenceUpdater', () => {
 
 		const { result } = renderHook(() =>
 			usePreferenceUpdater({
-				dataSource: DataSource.LOGS,
+				sourcePage: SavedviewtypesSourceDTO.logs,
 				mode: PreferenceMode.DIRECT,
 				preferences: mockPreferences,
 				setReSync,
@@ -133,16 +142,15 @@ describe('usePreferenceUpdater', () => {
 		});
 
 		// Should call the logs updater
-		expect(mockUpdateFormatting).toHaveBeenCalledWith(
+		expect(mockLogsUpdateFormatting).toHaveBeenCalledWith(
 			newFormatting,
 			PreferenceMode.DIRECT,
 		);
+		expect(mockTracesUpdateFormatting).not.toHaveBeenCalled();
 		expect(setReSync).toHaveBeenCalledWith(true);
 	});
 
-	it('should call the traces updater for updateColumns with traces dataSource', () => {
-		const setReSync = jest.fn();
-		const setSavedViewPreferences = jest.fn();
+	it('should call the traces updater for updateColumns with the traces list key', () => {
 		const newColumns: TelemetryFieldKey[] = [
 			{
 				name: 'new-trace-column',
@@ -153,7 +161,7 @@ describe('usePreferenceUpdater', () => {
 
 		const { result } = renderHook(() =>
 			usePreferenceUpdater({
-				dataSource: DataSource.TRACES,
+				sourcePage: SavedviewtypesSourceDTO.traces,
 				mode: PreferenceMode.DIRECT,
 				preferences: mockPreferences,
 				setReSync,
@@ -166,16 +174,15 @@ describe('usePreferenceUpdater', () => {
 		});
 
 		// Should call the traces updater
-		expect(mockUpdateColumns).toHaveBeenCalledWith(
+		expect(mockTracesUpdateColumns).toHaveBeenCalledWith(
 			newColumns,
 			PreferenceMode.DIRECT,
 		);
+		expect(mockLogsUpdateColumns).not.toHaveBeenCalled();
 		expect(setReSync).toHaveBeenCalledWith(true);
 	});
 
-	it('should call the traces updater for updateFormatting with traces dataSource', () => {
-		const setReSync = jest.fn();
-		const setSavedViewPreferences = jest.fn();
+	it('should call the traces updater for updateFormatting with the traces list key', () => {
 		const newFormatting: FormattingOptions = {
 			maxLines: 10,
 			format: 'table' as LogViewMode,
@@ -185,7 +192,7 @@ describe('usePreferenceUpdater', () => {
 
 		const { result } = renderHook(() =>
 			usePreferenceUpdater({
-				dataSource: DataSource.TRACES,
+				sourcePage: SavedviewtypesSourceDTO.traces,
 				mode: PreferenceMode.DIRECT,
 				preferences: mockPreferences,
 				setReSync,
@@ -198,20 +205,18 @@ describe('usePreferenceUpdater', () => {
 		});
 
 		// Should call the traces updater
-		expect(mockUpdateFormatting).toHaveBeenCalledWith(
+		expect(mockTracesUpdateFormatting).toHaveBeenCalledWith(
 			newFormatting,
 			PreferenceMode.DIRECT,
 		);
+		expect(mockLogsUpdateFormatting).not.toHaveBeenCalled();
 		expect(setReSync).toHaveBeenCalledWith(true);
 	});
 
 	it('should increment reSync counter when updates are called', () => {
-		const setReSync = jest.fn();
-		const setSavedViewPreferences = jest.fn();
-
 		const { result } = renderHook(() =>
 			usePreferenceUpdater({
-				dataSource: DataSource.LOGS,
+				sourcePage: SavedviewtypesSourceDTO.logs,
 				mode: PreferenceMode.DIRECT,
 				preferences: mockPreferences,
 				setReSync,

frontend/src/providers/preferences/__tests__/utils.test.ts

@@ -0,0 +1,20 @@
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { isPreferenceSourcePage } from '../utils';
+
+describe('isPreferenceSourcePage', () => {
+	it.each([SavedviewtypesSourceDTO.logs, SavedviewtypesSourceDTO.traces])(
+		'is true for %s',
+		(source) => {
+			expect(isPreferenceSourcePage(source)).toBe(true);
+		},
+	);
+
+	it.each([
+		SavedviewtypesSourceDTO.metrics,
+		SavedviewtypesSourceDTO.meter,
+		SavedviewtypesSourceDTO.ai_observability,
+	])('is false for %s', (source) => {
+		expect(isPreferenceSourcePage(source)).toBe(false);
+	});
+});

frontend/src/providers/preferences/constants.ts

@@ -0,0 +1,7 @@
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+
+// Only the logs and traces explorers keep column and formatting preferences.
+export const PREFERENCE_SOURCE_PAGES = [
+	SavedviewtypesSourceDTO.logs,
+	SavedviewtypesSourceDTO.traces,
+] as const;

frontend/src/providers/preferences/context/PreferenceContextProvider.tsx

@@ -5,12 +5,12 @@ import React, {
 	useContext,
 	useMemo,
 } from 'react';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import useUrlQuery from 'hooks/useUrlQuery';
 import {
 	PreferenceContextValue,
 	PreferenceMode,
 } from 'providers/preferences/types';
-import { DataSource } from 'types/common/queryBuilder';
 
 import { usePreferenceSync } from '../sync/usePreferenceSync';
 
@@ -38,19 +38,19 @@ export function PreferenceContextProvider({
 	const logsSlice = usePreferenceSync({
 		mode: savedViewId ? PreferenceMode.SAVED_VIEW : PreferenceMode.DIRECT,
 		savedViewId: savedViewId || undefined,
-		dataSource: DataSource.LOGS,
+		sourcePage: SavedviewtypesSourceDTO.logs,
 	});
 
 	const tracesSlice = usePreferenceSync({
 		mode: savedViewId ? PreferenceMode.SAVED_VIEW : PreferenceMode.DIRECT,
 		savedViewId: savedViewId || undefined,
-		dataSource: DataSource.TRACES,
+		sourcePage: SavedviewtypesSourceDTO.traces,
 	});
 
 	const value = useMemo<PreferenceContextValue>(
 		() => ({
-			logs: logsSlice,
-			traces: tracesSlice,
+			[SavedviewtypesSourceDTO.logs]: logsSlice,
+			[SavedviewtypesSourceDTO.traces]: tracesSlice,
 		}),
 		[logsSlice, tracesSlice],
 	);

frontend/src/providers/preferences/context/usePreferenceSlice.ts

@@ -0,0 +1,12 @@
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { PreferenceSlice } from '../types';
+import { isPreferenceSourcePage } from '../utils';
+import { usePreferenceContext } from './PreferenceContextProvider';
+
+export function usePreferenceSlice(
+	sourcePage: SavedviewtypesSourceDTO,
+): PreferenceSlice | undefined {
+	const context = usePreferenceContext();
+	return isPreferenceSourcePage(sourcePage) ? context[sourcePage] : undefined;
+}

frontend/src/providers/preferences/loader/usePreferenceLoader.ts

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { ensureLogsRequiredColumns } from 'container/OptionsMenu/constants';
 import { has } from 'lodash-es';
-import { DataSource } from 'types/common/queryBuilder';
 
 import logsLoaderConfig from '../configs/logsLoaderConfig';
 import tracesLoaderConfig from '../configs/tracesLoaderConfig';
-import { FormattingOptions, Preferences } from '../types';
+import { FormattingOptions, Preferences, PreferenceSourcePage } from '../types';
 
 const migrateColumns = (columns: any): any =>
 	columns.map((column: any) => {
@@ -62,15 +62,21 @@ function logsPreferencesLoader(): {
 function tracesPreferencesLoader(): {
 	columns: TelemetryFieldKey[];
 } {
-	return preferencesLoader(tracesLoaderConfig);
+	const { columns } = preferencesLoader<Preferences>(tracesLoaderConfig);
+	return { columns };
 }
 
+const PREFERENCE_LOADERS: Record<PreferenceSourcePage, () => Preferences> = {
+	[SavedviewtypesSourceDTO.logs]: logsPreferencesLoader,
+	[SavedviewtypesSourceDTO.traces]: tracesPreferencesLoader,
+};
+
 export function usePreferenceLoader({
-	dataSource,
+	sourcePage,
 	reSync,
 	setReSync,
 }: {
-	dataSource: DataSource;
+	sourcePage: PreferenceSourcePage;
 	reSync: boolean;
 	setReSync: (value: boolean) => void;
 }): {
@@ -78,17 +84,10 @@ export function usePreferenceLoader({
 	loading: boolean;
 	error: Error | null;
 } {
-	const [preferences, setPreferences] = useState<Preferences | null>(() => {
-		if (dataSource === DataSource.LOGS) {
-			const { columns, formatting } = logsPreferencesLoader();
-			return { columns, formatting };
-		}
-		if (dataSource === DataSource.TRACES) {
-			const { columns } = tracesPreferencesLoader();
-			return { columns };
-		}
-		return null;
-	});
+	const loadSlicePreferences = PREFERENCE_LOADERS[sourcePage];
+	const [preferences, setPreferences] = useState<Preferences | null>(
+		loadSlicePreferences,
+	);
 	const [error, setError] = useState<Error | null>(null);
 
 	useEffect((): void => {
@@ -96,15 +95,7 @@ export function usePreferenceLoader({
 			setError(null);
 
 			try {
-				if (dataSource === DataSource.LOGS) {
-					const { columns, formatting } = logsPreferencesLoader();
-					setPreferences({ columns, formatting });
-				}
-
-				if (dataSource === DataSource.TRACES) {
-					const { columns } = tracesPreferencesLoader();
-					setPreferences({ columns });
-				}
+				setPreferences(loadSlicePreferences());
 			} catch (e) {
 				setError(e as Error);
 			} finally {
@@ -119,7 +110,7 @@ export function usePreferenceLoader({
 		if (reSync) {
 			loadPreferences();
 		}
-	}, [dataSource, reSync, setReSync]);
+	}, [loadSlicePreferences, reSync, setReSync]);
 
 	return { preferences, loading: false, error };
 }

frontend/src/providers/preferences/sync/usePreferenceSync.ts

@@ -3,19 +3,23 @@ import { useEffect, useRef, useState } from 'react';
 import { useGetSavedView } from 'api/generated/services/saved-view';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { getViewColumnsAndFormatting } from 'container/SavedViews/utils/getViewColumnsAndFormatting';
-import { DataSource } from 'types/common/queryBuilder';
 
 import { usePreferenceLoader } from '../loader/usePreferenceLoader';
-import { FormattingOptions, PreferenceMode, Preferences } from '../types';
+import {
+	FormattingOptions,
+	PreferenceMode,
+	Preferences,
+	PreferenceSourcePage,
+} from '../types';
 import { usePreferenceUpdater } from '../updater/usePreferenceUpdater';
 
 export function usePreferenceSync({
 	mode,
-	dataSource,
+	sourcePage,
 	savedViewId,
 }: {
 	mode: PreferenceMode;
-	dataSource: DataSource;
+	sourcePage: PreferenceSourcePage;
 	savedViewId: string | undefined;
 }): {
 	preferences: Preferences | null;
@@ -41,25 +45,25 @@ export function usePreferenceSync({
 		if (view && view.id === savedViewId) {
 			if (seededViewId.current !== savedViewId) {
 				seededViewId.current = savedViewId;
-				setSavedViewPreferences(getViewColumnsAndFormatting(view.spec, dataSource));
+				setSavedViewPreferences(getViewColumnsAndFormatting(view.spec, sourcePage));
 			}
 			return;
 		}
 		seededViewId.current = undefined;
-		setSavedViewPreferences(getViewColumnsAndFormatting(undefined, dataSource));
-	}, [viewData, dataSource, savedViewId]);
+		setSavedViewPreferences(getViewColumnsAndFormatting(undefined, sourcePage));
+	}, [viewData, sourcePage, savedViewId]);
 
 	// We are using a reSync state because we have URL updates as well as local storage updates
 	// and we want to make sure we are always using the latest preferences
 	const [reSync, setReSync] = useState(false);
 	const { preferences, loading, error } = usePreferenceLoader({
-		dataSource,
+		sourcePage,
 		reSync,
 		setReSync,
 	});
 
 	const { updateColumns, updateFormatting } = usePreferenceUpdater({
-		dataSource,
+		sourcePage,
 		mode,
 		preferences,
 		setReSync,

frontend/src/providers/preferences/types/index.ts

@@ -1,12 +1,15 @@
 import { TelemetryFieldKey } from 'api/v5/v5';
-import { LogViewMode } from 'container/OptionsMenu/types';
-import { FontSize } from 'container/OptionsMenu/types';
+import { LogViewMode, FontSize } from 'container/OptionsMenu/types';
+
+import { PREFERENCE_SOURCE_PAGES } from '../constants';
 
 export enum PreferenceMode {
 	SAVED_VIEW = 'savedView',
 	DIRECT = 'direct',
 }
 
+export type PreferenceSourcePage = (typeof PREFERENCE_SOURCE_PAGES)[number];
+
 export interface PreferenceSlice {
 	preferences: Preferences | null;
 	loading: boolean;
@@ -15,10 +18,10 @@ export interface PreferenceSlice {
 	updateFormatting: (newFormatting: FormattingOptions) => void;
 }
 
-export interface PreferenceContextValue {
-	logs: PreferenceSlice;
-	traces: PreferenceSlice;
-}
+export type PreferenceContextValue = Record<
+	PreferenceSourcePage,
+	PreferenceSlice
+>;
 
 export interface FormattingOptions {
 	maxLines?: number;

frontend/src/providers/preferences/updater/usePreferenceUpdater.ts

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import {
 	defaultOptionsQuery,
@@ -6,48 +7,41 @@ import {
 } from 'container/OptionsMenu/constants';
 import { OptionsQuery } from 'container/OptionsMenu/types';
 import useUrlQueryData from 'hooks/useUrlQueryData';
-import { DataSource } from 'types/common/queryBuilder';
 
 import getLogsUpdaterConfig from '../configs/logsUpdaterConfig';
 import getTracesUpdaterConfig from '../configs/tracesUpdaterConfig';
-import { FormattingOptions, Preferences } from '../types';
-
-const metricsUpdater = {
-	updateColumns: (): void => {}, // no-op for metrics
-	updateFormatting: (): void => {}, // no-op for metrics
-};
+import { FormattingOptions, Preferences, PreferenceSourcePage } from '../types';
 
 const getUpdaterConfig = (
 	preferences: Preferences | null,
 	redirectWithOptionsData: (options: OptionsQuery) => void,
 	setSavedViewPreferences: Dispatch<SetStateAction<Preferences | null>>,
 ): Record<
-	DataSource,
+	PreferenceSourcePage,
 	{
 		updateColumns: (newColumns: TelemetryFieldKey[], mode: string) => void;
 		updateFormatting: (newFormatting: FormattingOptions, mode: string) => void;
 	}
 > => ({
-	[DataSource.LOGS]: getLogsUpdaterConfig(
+	[SavedviewtypesSourceDTO.logs]: getLogsUpdaterConfig(
 		preferences,
 		redirectWithOptionsData,
 		setSavedViewPreferences,
 	),
-	[DataSource.TRACES]: getTracesUpdaterConfig(
+	[SavedviewtypesSourceDTO.traces]: getTracesUpdaterConfig(
 		redirectWithOptionsData,
 		setSavedViewPreferences,
 	),
-	[DataSource.METRICS]: metricsUpdater,
 });
 
 export function usePreferenceUpdater({
-	dataSource,
+	sourcePage,
 	mode,
 	preferences,
 	setReSync,
 	setSavedViewPreferences,
 }: {
-	dataSource: DataSource;
+	sourcePage: PreferenceSourcePage;
 	mode: string;
 	preferences: Preferences | null;
 	setReSync: Dispatch<SetStateAction<boolean>>;
@@ -62,7 +56,7 @@ export function usePreferenceUpdater({
 		preferences,
 		redirectWithOptionsData,
 		setSavedViewPreferences,
-	)[dataSource];
+	)[sourcePage];
 
 	return {
 		updateColumns: (newColumns: TelemetryFieldKey[]): void => {

frontend/src/providers/preferences/utils.ts

@@ -0,0 +1,12 @@
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { PREFERENCE_SOURCE_PAGES } from './constants';
+import { PreferenceSourcePage } from './types';
+
+export function isPreferenceSourcePage(
+	sourcePage: SavedviewtypesSourceDTO,
+): sourcePage is PreferenceSourcePage {
+	return (
+		PREFERENCE_SOURCE_PAGES as readonly SavedviewtypesSourceDTO[]
+	).includes(sourcePage);
+}

frontend/src/storybook/visual/waitForMonacoText.ts

@@ -1,26 +0,0 @@
-import { waitFor } from 'storybook/test';
-
-/**
- * Monaco mounts its container before its language loads, so the editor is on
- * screen while still blank or uncoloured. Waits for text with at least two
- * token colours, which only exists once the tokenizer has run.
- */
-export const waitForMonacoText = async (
-	canvasElement: HTMLElement,
-): Promise<void> => {
-	await waitFor(
-		() => {
-			const lines = canvasElement.querySelector('.monaco-editor .view-lines');
-			const tokens = new Set(
-				Array.from(lines?.querySelectorAll('span[class^="mtk"]') ?? []).map(
-					(token) => token.className,
-				),
-			);
-
-			if (!lines?.textContent?.trim() || tokens.size < 2) {
-				throw new Error('Monaco has not rendered its text');
-			}
-		},
-		{ timeout: 15_000 },
-	);
-};