visualize state

elastic · Jul 23, 2020 · 71d0541 · 71d0541
1 parent 9256ae7
commit 71d0541
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 29 deletions.
diff --git a/src/plugins/visualize/public/application/components/visualize_top_nav.tsx b/src/plugins/visualize/public/application/components/visualize_top_nav.tsx
@@ -18,10 +18,8 @@
  */
 
 import React, { memo, useCallback, useMemo, useState, useEffect } from 'react';
-import { isEqual } from 'lodash';
 
 import { OverlayRef } from 'kibana/public';
-import { Query } from 'src/plugins/data/public';
 import { useKibana } from '../../../../kibana_react/public';
 import {
   VisualizeServices,
@@ -68,15 +66,13 @@ const TopNav = ({
     setInspectorSession(session);
   }, [embeddableHandler]);
 
-  const updateQuery = useCallback(
-    ({ query }: { query?: Query }) => {
-      if (!isEqual(currentAppState.query, query)) {
-        stateContainer.transitions.set('query', query || currentAppState.query);
-      } else {
+  const handleRefresh = useCallback(
+    (_payload: any, isUpdate?: boolean) => {
+      if (isUpdate === false) {
         savedVisInstance.embeddableHandler.reload();
       }
     },
-    [currentAppState.query, savedVisInstance.embeddableHandler, stateContainer.transitions]
+    [savedVisInstance.embeddableHandler]
   );
 
   const config = useMemo(() => {
@@ -149,8 +145,7 @@ const TopNav = ({
     <TopNavMenu
       appName={APP_NAME}
       config={config}
-      query={currentAppState.query}
-      onQuerySubmit={updateQuery}
+      onQuerySubmit={handleRefresh}
       savedQueryId={currentAppState.savedQuery}
       onSavedQueryIdChange={stateContainer.transitions.updateSavedQuery}
       indexPatterns={indexPattern ? [indexPattern] : undefined}

diff --git a/src/plugins/visualize/public/application/utils/use/use_editor_updates.ts b/src/plugins/visualize/public/application/utils/use/use_editor_updates.ts
@@ -20,7 +20,6 @@
 import { useEffect, useState } from 'react';
 import { isEqual } from 'lodash';
 import { EventEmitter } from 'events';
-import { merge } from 'rxjs';
 
 import { migrateLegacyQuery } from '../../../../../kibana_legacy/public';
 import {
@@ -47,6 +46,8 @@ export const useEditorUpdates = (
       const {
         timefilter: { timefilter },
         filterManager,
+        queryString,
+        state$,
       } = services.data.query;
       const { embeddableHandler, savedVis, savedSearch, vis } = savedVisInstance;
       const initialState = appState.getState();
@@ -60,25 +61,20 @@ export const useEditorUpdates = (
             uiState: vis.uiState,
             timeRange: timefilter.getTime(),
             filters: filterManager.getFilters(),
-            query: appState.getState().query,
+            query: queryString.getQuery(),
             linked: !!vis.data.savedSearchId,
             savedSearch,
           });
         } else {
           embeddableHandler.updateInput({
             timeRange: timefilter.getTime(),
             filters: filterManager.getFilters(),
-            query: appState.getState().query,
+            query: queryString.getQuery(),
           });
         }
       };
 
-      const subscriptions = merge(
-        timefilter.getTimeUpdate$(),
-        timefilter.getAutoRefreshFetch$(),
-        timefilter.getFetch$(),
-        filterManager.getFetches$()
-      ).subscribe({
+      const subscriptions = state$.subscribe({
         next: reloadVisualization,
         error: services.fatalErrors.add,
       });
@@ -116,10 +112,6 @@ export const useEditorUpdates = (
           // and initializing different visualizations
           return;
         }
-        const newQuery = migrateLegacyQuery(state.query);
-        if (!isEqual(state.query, newQuery)) {
-          appState.transitions.set('query', newQuery);
-        }
 
         if (!isEqual(state.uiState, vis.uiState.getChanges())) {
           vis.uiState.set(state.uiState);

diff --git a/src/plugins/visualize/public/application/utils/use/use_visualize_app_state.tsx b/src/plugins/visualize/public/application/utils/use/use_visualize_app_state.tsx
@@ -24,6 +24,7 @@ import { EventEmitter } from 'events';
 import { i18n } from '@kbn/i18n';
 
 import { MarkdownSimple, toMountPoint } from '../../../../../kibana_react/public';
+import { migrateLegacyQuery } from '../../../../../kibana_legacy/public';
 import { esFilters, connectToQueryState } from '../../../../../data/public';
 import { VisualizeServices, VisualizeAppStateContainer, SavedVisInstance } from '../../types';
 import { visStateToEditorState } from '../utils';
@@ -61,19 +62,35 @@ export const useVisualizeAppState = (
 
       eventEmitter.on('dirtyStateChange', onDirtyStateChange);
 
-      const { filterManager } = services.data.query;
-      // sync initial app filters from state to filterManager
+      const { filterManager, queryString } = services.data.query;
+      // sync initial app state from state to managers
       filterManager.setAppFilters(cloneDeep(stateContainer.getState().filters));
-      // setup syncing of app filters between appState and filterManager
+      queryString.setQuery(migrateLegacyQuery(stateContainer.getState().query));
+
+      // setup syncing of app filters between appState and query services
       const stopSyncingAppFilters = connectToQueryState(
         services.data.query,
         {
-          set: ({ filters }) => stateContainer.transitions.set('filters', filters),
-          get: () => ({ filters: stateContainer.getState().filters }),
-          state$: stateContainer.state$.pipe(map((state) => ({ filters: state.filters }))),
+          set: ({ filters, query }) => {
+            stateContainer.transitions.set('filters', filters);
+            stateContainer.transitions.set('query', query);
+          },
+          get: () => {
+            return {
+              filters: stateContainer.getState().filters,
+              query: stateContainer.getState().query,
+            };
+          },
+          state$: stateContainer.state$.pipe(
+            map((state) => ({
+              filters: state.filters,
+              query: state.query,
+            }))
+          ),
         },
         {
           filters: esFilters.FilterStateStore.APP_STATE,
+          query: true,
         }
       );