feat: preserve last used saved view in explorer pages

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -18,6 +18,7 @@ import {
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -29,6 +30,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import { DataSource } from 'types/common/queryBuilder';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { ExploreHeaderToolTip, SaveButtonText } from './constants';
@@ -78,10 +80,18 @@ function ExplorerCard({
 	const handleOpenChange = (newOpen = false): void => {
 		setIsOpen(newOpen);
 	};
+	const PRESERVED_VIEW_LOCAL_STORAGE_KEY =
+		sourcepage === DataSource.LOGS
+			? LOCALSTORAGE.LAST_USED_SAVED_LOGS_VIEW
+			: LOCALSTORAGE.LAST_USED_SAVED_TRACES_VIEW;
+	const value = localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
+	const lastUsedView = JSON.parse(value ?? '{}');
 
-	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
+	const viewName =
+		useGetSearchQueryParam(QueryParams.viewName) ?? lastUsedView?.value ?? '';
 
-	const viewKey = useGetSearchQueryParam(QueryParams.viewKey) || '';
+	const viewKey =
+		useGetSearchQueryParam(QueryParams.viewKey) ?? lastUsedView?.key ?? '';
 
 	const isQueryUpdated = isStagedQueryUpdated(viewsData?.data?.data, viewKey);
 

frontend/src/constants/localStorage.ts

@@ -19,4 +19,6 @@ export enum LOCALSTORAGE {
 	SHOW_EXPLORER_TOOLBAR = 'SHOW_EXPLORER_TOOLBAR',
 	PINNED_ATTRIBUTES = 'PINNED_ATTRIBUTES',
 	THEME_ANALYTICS_V1 = 'THEME_ANALYTICS_V1',
+	LAST_USED_SAVED_LOGS_VIEW = 'LAST_USED_SAVED_LOGS_VIEW',
+	LAST_USED_SAVED_TRACES_VIEW = 'LAST_USED_SAVED_TRACES_VIEW',
 }

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -18,6 +18,7 @@ import axios from 'axios';
 import cx from 'classnames';
 import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -46,6 +47,7 @@ import {
 	Dispatch,
 	SetStateAction,
 	useCallback,
+	useEffect,
 	useMemo,
 	useRef,
 	useState,
@@ -88,6 +90,10 @@ function ExplorerOptions({
 	const history = useHistory();
 	const ref = useRef<RefSelectProps>(null);
 	const isDarkMode = useIsDarkMode();
+	const isLogsExplorer = sourcepage === DataSource.LOGS;
+	const PRESERVED_VIEW_LOCAL_STORAGE_KEY = isLogsExplorer
+		? LOCALSTORAGE.LAST_USED_SAVED_LOGS_VIEW
+		: LOCALSTORAGE.LAST_USED_SAVED_TRACES_VIEW;
 
 	const onModalToggle = useCallback((value: boolean) => {
 		setIsExport(value);
@@ -224,12 +230,25 @@ function ExplorerOptions({
 		onMenuItemSelectHandler({
 			key: option.key,
 		});
+
+		localStorage.setItem(
+			PRESERVED_VIEW_LOCAL_STORAGE_KEY,
+			JSON.stringify({
+				key: option.key,
+				value: option.value,
+			}),
+		);
+
 		if (ref.current) {
 			ref.current.blur();
 		}
 	};
 
 	const handleClearSelect = (): void => {
+		if (localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY)) {
+			localStorage.removeItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
+		}
+
 		history.replace(DATASOURCE_VS_ROUTES[sourcepage]);
 	};
 
@@ -286,6 +305,29 @@ function ExplorerOptions({
 		}
 	};
 
+	const [
+		isRecentlyUsedSavedViewSelected,
+		setIsRecentlyUsedSavedViewSelected,
+	] = useState(false);
+
+	useEffect(() => {
+		const value = localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
+		const lastPreservedView = JSON.parse(value || '{}');
+
+		if (!!lastPreservedView?.key && viewsData?.data?.data) {
+			if (!isRecentlyUsedSavedViewSelected) {
+				onMenuItemSelectHandler({
+					key: lastPreservedView.key,
+				});
+			}
+			setIsRecentlyUsedSavedViewSelected(true);
+		}
+
+		return (): void => setIsRecentlyUsedSavedViewSelected(true);
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [viewsData?.data?.data]);
+
 	const isEditDeleteSupported = allowedRoles.includes(role as string);
 
 	return (
@@ -406,12 +448,12 @@ function ExplorerOptions({
 						<Tooltip
 							title={
 								<div>
-									{sourcepage === DataSource.LOGS
+									{isLogsExplorer
 										? 'Learn more about Logs explorer '
 										: 'Learn more about Traces explorer '}
 									<Typography.Link
 										href={
-											sourcepage === DataSource.LOGS
+											isLogsExplorer
 												? 'https://signoz.io/docs/product-features/logs-explorer/?utm_source=product&utm_medium=logs-explorer-toolbar'
 												: 'https://signoz.io/docs/product-features/trace-explorer/?utm_source=product&utm_medium=trace-explorer-toolbar'
 										}