feat: fixed bugs in saved views for traces

frontend/src/pages/TracesModulePage/constants.tsx

@@ -4,9 +4,14 @@ import { Compass, Cone, TowerControl } from 'lucide-react';
 import SaveView from 'pages/SaveView';
 import TracesExplorer from 'pages/TracesExplorer';
 import TracesFunnels from 'pages/TracesFunnels';
+import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 
 export const tracesExplorer: TabRoutes = {
-	Component: TracesExplorer,
+	Component: (): JSX.Element => (
+		<PreferenceContextProvider>
+			<TracesExplorer />
+		</PreferenceContextProvider>
+	),
 	name: (
 		<div className="tab-item">
 			<Compass size={16} /> Explorer

frontend/src/providers/preferences/configs/logsUpdaterConfig.ts

@@ -29,10 +29,11 @@ const getLogsUpdaterConfig = (
 		}
 
 		if (mode === 'direct') {
-			// redirectWithOptionsData({
+			// just need to update the columns see for remove props
-			// 	...defaultOptionsQuery,
+			redirectWithOptionsData({
-			// 	selectColumns: newColumns,
+				...defaultOptionsQuery,
-			// });
+				selectColumns: newColumns,
+			});
 
 			// Also update local storage
 			const local = JSON.parse(

frontend/src/providers/preferences/configs/tracesUpdaterConfig.ts

@@ -1,17 +1,41 @@
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { defaultOptionsQuery } from 'container/OptionsMenu/constants';
+import { FontSize, OptionsQuery } from 'container/OptionsMenu/types';
+import { Dispatch, SetStateAction } from 'react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
+import { Preferences } from '../types';
+
 // --- TRACES preferences updater config ---
-const tracesUpdater = {
+const getTracesUpdaterConfig = (
+	redirectWithOptionsData: (options: OptionsQuery) => void,
+	setSavedViewPreferences: Dispatch<SetStateAction<Preferences | null>>,
+): {
+	updateColumns: (newColumns: BaseAutocompleteData[], mode: string) => void;
+	updateFormatting: () => void;
+} => ({
 	updateColumns: (newColumns: BaseAutocompleteData[], mode: string): void => {
-		const url = new URL(window.location.href);
+		// remove the formatting props
-		const options = JSON.parse(url.searchParams.get('options') || '{}');
+		if (mode === 'savedView') {
-		options.selectColumns = newColumns;
+			setSavedViewPreferences({
-		url.searchParams.set('options', JSON.stringify(options));
+				columns: newColumns,
-		window.history.replaceState({}, '', url.toString());
+				formatting: {
+					maxLines: 2,
+					format: 'table',
+					fontSize: 'small' as FontSize,
+					version: 1,
+				},
+			});
+		}
 
 		if (mode === 'direct') {
+			// just need to update the columns see for remove props
+			redirectWithOptionsData({
+				...defaultOptionsQuery,
+				selectColumns: newColumns,
+			});
+
 			const local = JSON.parse(
 				localStorage.getItem(LOCALSTORAGE.TRACES_LIST_OPTIONS) || '{}',
 			);
@@ -20,6 +44,6 @@ const tracesUpdater = {
 		}
 	},
 	updateFormatting: (): void => {}, // no-op for traces
-};
+});
 
-export default tracesUpdater;
+export default getTracesUpdaterConfig;

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

@@ -1,17 +1,12 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable no-empty */
-// import {
-// 	defaultLogsSelectedColumns,
-// 	defaultTraceSelectedColumns,
-// } from 'container/OptionsMenu/constants';
-import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
 import { useEffect, useState } from 'react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 
 import logsLoaderConfig from '../configs/logsLoaderConfig';
 import tracesLoaderConfig from '../configs/tracesLoaderConfig';
-import { FormattingOptions, PreferenceMode, Preferences } from '../types';
+import { FormattingOptions, Preferences } from '../types';
 
 // Generic preferences loader that works with any config
 async function preferencesLoader<T>(config: {
@@ -53,13 +48,9 @@ async function tracesPreferencesLoader(): Promise<{
 }
 
 export function usePreferenceLoader({
-	mode,
-	savedViewId,
 	dataSource,
 	reSync,
 }: {
-	mode: PreferenceMode;
-	savedViewId: string;
 	dataSource: DataSource;
 	reSync: number;
 }): {
@@ -71,46 +62,20 @@ export function usePreferenceLoader({
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<Error | null>(null);
 
-	const { data: viewsData } = useGetAllViews(dataSource);
-
 	useEffect((): void => {
 		async function loadPreferences(): Promise<void> {
 			setLoading(true);
 			setError(null);
 
 			try {
-				if (mode === 'savedView' && savedViewId) {
+				if (dataSource === DataSource.LOGS) {
-					// we can also switch to the URL options params
+					const { columns, formatting } = await logsPreferencesLoader();
-					// as we are essentially setting the options in the URL
+					setPreferences({ columns, formatting });
-					// in ExplorerOptions.tsx#430 (updateOrRestoreSelectColumns)
+				}
-					// const extraData = viewsData?.data?.data?.find(
-					// 	(view) => view.id === savedViewId,
-					// )?.extraData;
-					// const parsedExtraData = JSON.parse(extraData || '{}');
-					// let columns: BaseAutocompleteData[] = [];
-					// let formatting: FormattingOptions | undefined;
-					// if (dataSource === DataSource.LOGS) {
-					// 	columns = parsedExtraData?.selectColumns || defaultLogsSelectedColumns;
-					// 	formatting = {
-					// 		maxLines: parsedExtraData?.maxLines ?? 2,
-					// 		format: parsedExtraData?.format ?? 'table',
-					// 		fontSize: parsedExtraData?.fontSize ?? 'small',
-					// 		version: parsedExtraData?.version ?? 1,
-					// 	};
-					// } else if (dataSource === DataSource.TRACES) {
-					// 	columns = parsedExtraData?.selectColumns || defaultTraceSelectedColumns;
-					// }
-					// setPreferences(savedViewPreferences);
-				} else {
-					if (dataSource === DataSource.LOGS) {
-						const { columns, formatting } = await logsPreferencesLoader();
-						setPreferences({ columns, formatting });
-					}
 
-					if (dataSource === DataSource.TRACES) {
+				if (dataSource === DataSource.TRACES) {
-						const { columns } = await tracesPreferencesLoader();
+					const { columns } = await tracesPreferencesLoader();
-						setPreferences({ columns });
+					setPreferences({ columns });
-					}
 				}
 			} catch (e) {
 				setError(e as Error);
@@ -119,7 +84,7 @@ export function usePreferenceLoader({
 			}
 		}
 		loadPreferences();
-	}, [mode, savedViewId, dataSource, reSync, viewsData]);
+	}, [dataSource, reSync]);
 
 	return { preferences, loading, error };
 }

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

@@ -1,4 +1,5 @@
 import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
+import { defaultSelectedColumns as defaultTracesSelectedColumns } from 'container/TracesExplorer/ListView/configs';
 import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
 import { useEffect, useState } from 'react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -24,6 +25,7 @@ export function usePreferenceSync({
 	updateFormatting: (newFormatting: FormattingOptions) => void;
 } {
 	const { data: viewsData } = useGetAllViews(dataSource);
+
 	const [
 		savedViewPreferences,
 		setSavedViewPreferences,
@@ -35,6 +37,10 @@ export function usePreferenceSync({
 		)?.extraData;
 
 		const parsedExtraData = JSON.parse(extraData || '{}');
+		console.log('uncaught extraData', {
+			extraData,
+			parsedExtraData,
+		});
 		let columns: BaseAutocompleteData[] = [];
 		let formatting: FormattingOptions | undefined;
 		if (dataSource === DataSource.LOGS) {
@@ -46,6 +52,9 @@ export function usePreferenceSync({
 				version: parsedExtraData?.version ?? 1,
 			};
 		}
+		if (dataSource === DataSource.TRACES) {
+			columns = parsedExtraData?.selectColumns || defaultTracesSelectedColumns;
+		}
 		setSavedViewPreferences({ columns, formatting });
 	}, [viewsData, dataSource, savedViewId, mode]);
 
@@ -53,8 +62,6 @@ export function usePreferenceSync({
 	// and we want to make sure we are always using the latest preferences
 	const [reSync, setReSync] = useState(0);
 	const { preferences, loading, error } = usePreferenceLoader({
-		mode,
-		savedViewId: savedViewId || '',
 		dataSource,
 		reSync,
 	});

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

@@ -9,7 +9,7 @@ import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteRe
 import { DataSource } from 'types/common/queryBuilder';
 
 import getLogsUpdaterConfig from '../configs/logsUpdaterConfig';
-import tracesUpdater from '../configs/tracesUpdaterConfig';
+import getTracesUpdaterConfig from '../configs/tracesUpdaterConfig';
 import { FormattingOptions, Preferences } from '../types';
 
 const metricsUpdater = {
@@ -31,7 +31,10 @@ const getUpdaterConfig = (
 		redirectWithOptionsData,
 		setSavedViewPreferences,
 	),
-	[DataSource.TRACES]: tracesUpdater,
+	[DataSource.TRACES]: getTracesUpdaterConfig(
+		redirectWithOptionsData,
+		setSavedViewPreferences,
+	),
 	[DataSource.METRICS]: metricsUpdater,
 });
 

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+