document and comments

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

docs/plugins/data_persistence.md

@@ -196,7 +196,7 @@ There are two types for data persistence:
 
 4. In `useEditorUpdates()`, we use the saved appState to load the visualize editor
 
-5. Since we implement state management in Vis Builder with redux store, the app state persistence implementation for vis builder is also different than other plugins. While the global state persistence is the same, we implement app state persistence without using any state containers or state syncing utils. For the actual visual data, we directly hook up redux store with `OsdUrlStateStorage` to sync the values by using `saveReduxState()` and `loadReduxState()`. For app filter and query, since they are part of the app states but not part of the redux store, we directly hook up their state managers from data plugin with `OsdUrlStateStorage` and `connectStorageToQueryState()`.
+5. We can also choose to do state sync without using state container by directing hooking up the state managers with the URL data storage. For example, we implemented state management in Vis Builder with redux store, while the global state persistence implementation is the same, we implemented app state persistence without using any state containers or state syncing utils. For the actual visual data, we directly hook up redux store with `OsdUrlStateStorage` to sync the values by using `saveReduxState()` and `loadReduxState()`. For app filter and query, since they are part of the app states but not part of the redux store, we directly hook up their state managers from data plugin with `OsdUrlStateStorage` and `connectStorageToQueryState()`.
 
 # Refresh
 When we refresh the page, both app state and global state should persist:

src/plugins/vis_builder/public/application/components/top_nav.tsx

@@ -18,8 +18,7 @@ import { setEditorState } from '../utils/state_management/metadata_slice';
 import { useCanSave } from '../utils/use/use_can_save';
 import { saveStateToSavedObject } from '../../saved_visualizations/transforms';
 import { TopNavMenuData } from '../../../../navigation/public';
-import { opensearchFilters } from '../../../../data/public';
-import { connectStorageToQueryState } from '../../../../data/public';
+import { opensearchFilters, connectStorageToQueryState } from '../../../../data/public';
 
 export const TopNav = () => {
   // id will only be set for the edit route