[BUG] Allow Save in Top Nav Menu to capture filter and query

Before this PR, can't save when filter or query change.
After this PR, if the canvas is not empty, can save filter and query updates.

Issue Resolve
#5645

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

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

@@ -3,7 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
+import { isEqual } from 'lodash';
 import { useParams } from 'react-router-dom';
 import { useUnmount } from 'react-use';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
@@ -19,11 +20,21 @@ import { saveStateToSavedObject } from '../../saved_visualizations/transforms';
 import { TopNavMenuData } from '../../../../navigation/public';
 import { opensearchFilters, connectStorageToQueryState } from '../../../../data/public';
 
+function useDeepEffect(callback, dependencies) {
+  const currentDepsRef = useRef(dependencies);
+
+  if (!isEqual(currentDepsRef.current, dependencies)) {
+    callback();
+    currentDepsRef.current = dependencies;
+  }
+}
+
 export const TopNav = () => {
   // id will only be set for the edit route
   const { id: visualizationIdFromUrl } = useParams<{ id: string }>();
   const { services } = useOpenSearchDashboards<VisBuilderServices>();
   const {
+    data,
     setHeaderActionMenu,
     navigation: {
       ui: { TopNavMenu },
@@ -33,6 +44,10 @@ export const TopNav = () => {
   const rootState = useTypedSelector((state) => state);
   const dispatch = useTypedDispatch();
 
+  useDeepEffect(() => {
+    dispatch(setEditorState({ state: 'dirty' }));
+  }, [data.query.queryString.getQuery(), data.query.filterManager.getFilters()]);
+
   const saveDisabledReason = useCanSave();
   const savedVisBuilderVis = useSavedVisBuilderVis(visualizationIdFromUrl);
   connectStorageToQueryState(services.data.query, services.osdUrlStateStorage, {