No reload on changes to disabled filters in dashboard

src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable.ts

@@ -29,6 +29,8 @@ import { getTime } from 'ui/timefilter/get_time';
 import { Subscription } from 'rxjs';
 import * as Rx from 'rxjs';
 import { Filter, FilterStateStore } from '@kbn/es-query';
+import { Query } from 'src/legacy/core_plugins/data/public';
+import { TimeRange } from 'ui/timefilter/time_history';
 import {
   APPLY_FILTER_TRIGGER,
   Embeddable,
@@ -79,6 +81,10 @@ interface SearchEmbeddableConfig {
 
 export const SEARCH_EMBEDDABLE_TYPE = 'search';
 
+function getEnabledFilters(filters?: Filter[]) {
+  return filters ? filters.filter(filter => !filter.meta.disabled) : undefined;
+}
+
 export class SearchEmbeddable extends Embeddable<SearchInput, SearchOutput>
   implements ISearchEmbeddable {
   private readonly savedSearch: SavedSearch;
@@ -94,6 +100,10 @@ export class SearchEmbeddable extends Embeddable<SearchInput, SearchOutput>
   public readonly type = SEARCH_EMBEDDABLE_TYPE;
   private filterGen: FilterManager;
 
+  private prevTimeRange?: TimeRange;
+  private prevFilters?: Filter[];
+  private prevQuery?: Query;
+
   constructor(
     {
       $rootScope,
@@ -259,10 +269,21 @@ export class SearchEmbeddable extends Embeddable<SearchInput, SearchOutput>
     searchScope.sort = this.input.sort || this.savedSearch.sort;
     searchScope.sharedItemTitle = this.panelTitle;
 
-    this.filtersSearchSource.setField('filter', this.input.filters);
-    this.filtersSearchSource.setField('query', this.input.query);
-
-    // Sadly this is neccessary to tell the angular component to refetch the data.
-    this.courier.fetch();
+    const enabledFilters = getEnabledFilters(this.input.filters);
+    if (
+      !_.isEqual(this.prevFilters, enabledFilters) ||
+      !_.isEqual(this.prevQuery, this.input.query) ||
+      !_.isEqual(this.prevTimeRange, this.input.timeRange)
+    ) {
+      this.filtersSearchSource.setField('filter', enabledFilters);
+      this.filtersSearchSource.setField('query', this.input.query);
+
+      // Sadly this is neccessary to tell the angular component to refetch the data.
+      this.courier.fetch();
+
+      this.prevFilters = enabledFilters;
+      this.prevQuery = this.input.query;
+      this.prevTimeRange = this.input.timeRange;
+    }
   }
 }

src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts

@@ -67,6 +67,10 @@ export interface VisualizeOutput extends EmbeddableOutput {
   savedObjectId: string;
 }
 
+function getEnabledFilters(filters?: Filter[]) {
+  return filters ? filters.filter(filter => !filter.meta.disabled) : undefined;
+}
+
 export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOutput> {
   private savedVisualization: VisSavedObject;
   private loader: VisualizeLoader;
@@ -76,6 +80,7 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
   private query?: Query;
   private title?: string;
   private filters?: Filter[];
+  private visCustomizations: VisualizeInput['vis'];
   private subscription: Subscription;
   public readonly type = VISUALIZE_EMBEDDABLE_TYPE;
 
@@ -112,7 +117,6 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
     this.uiState.on('change', this.uiStateChangeHandler);
 
     this.subscription = Rx.merge(this.getOutput$(), this.getInput$()).subscribe(() => {
-      this.reload();
       this.handleChanges();
     });
   }
@@ -138,14 +142,17 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
     // pass anything from here to the handler.update method
     const visCustomizations = this.input.vis;
     if (visCustomizations) {
-      // Turn this off or the uiStateChangeHandler will fire for every modification.
-      this.uiState.off('change', this.uiStateChangeHandler);
-      this.uiState.clearAllKeys();
-      this.uiState.set('vis', visCustomizations);
-      getKeys(visCustomizations).forEach(key => {
-        this.uiState.set(key, visCustomizations[key]);
-      });
-      this.uiState.on('change', this.uiStateChangeHandler);
+      if (!_.isEqual(visCustomizations, this.visCustomizations)) {
+        this.visCustomizations = visCustomizations;
+        // Turn this off or the uiStateChangeHandler will fire for every modification.
+        this.uiState.off('change', this.uiStateChangeHandler);
+        this.uiState.clearAllKeys();
+        this.uiState.set('vis', visCustomizations);
+        getKeys(visCustomizations).forEach(key => {
+          this.uiState.set(key, visCustomizations[key]);
+        });
+        this.uiState.on('change', this.uiStateChangeHandler);
+      }
     } else {
       this.uiState.clearAllKeys();
     }
@@ -157,19 +164,20 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
     const updatedParams: VisualizeUpdateParams = {};
 
     // Check if timerange has changed
-    if (this.input.timeRange !== this.timeRange) {
+    if (!_.isEqual(this.input.timeRange, this.timeRange)) {
       this.timeRange = _.cloneDeep(this.input.timeRange);
       updatedParams.timeRange = this.timeRange;
     }
 
     // Check if filters has changed
-    if (this.input.filters !== this.filters) {
-      updatedParams.filters = this.input.filters;
-      this.filters = this.input.filters;
+    const enabledFilters = getEnabledFilters(this.input.filters);
+    if (!_.isEqual(enabledFilters, this.filters)) {
+      updatedParams.filters = enabledFilters;
+      this.filters = enabledFilters;
     }
 
     // Check if query has changed
-    if (this.input.query !== this.query) {
+    if (!_.isEqual(this.input.query, this.query)) {
       updatedParams.query = this.input.query;
       this.query = this.input.query;
     }
@@ -183,6 +191,7 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
 
     if (this.handler && !_.isEmpty(updatedParams)) {
       this.handler.update(updatedParams);
+      this.handler.reload();
     }
   }
 
@@ -194,7 +203,7 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
   public render(domNode: HTMLElement) {
     this.timeRange = _.cloneDeep(this.input.timeRange);
     this.query = this.input.query;
-    this.filters = this.input.filters;
+    this.filters = getEnabledFilters(this.input.filters);
 
     this.transferCustomizationsToUiState();
 
@@ -211,8 +220,8 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
       // Append visualization to container instead of replacing its content
       append: true,
       timeRange: _.cloneDeep(this.input.timeRange),
-      query: this.input.query,
-      filters: this.input.filters,
+      query: this.query,
+      filters: this.filters,
       cssClass: `panel-content panel-content--fullWidth`,
       dataAttrs,
     };

x-pack/legacy/plugins/maps/public/embeddable/map_embeddable.js

@@ -62,7 +62,7 @@ export class MapEmbeddable extends Embeddable {
   onContainerStateChanged(containerState) {
     if (!_.isEqual(containerState.timeRange, this._prevTimeRange) ||
         !_.isEqual(containerState.query, this._prevQuery) ||
-        !_.isEqual(containerState.filters, this._prevFilters)) {
+        !_.isEqual(containerState.filters.filter(filter => !filter.meta.disabled), this._prevFilters)) {
       this._dispatchSetQuery(containerState);
     }
 
@@ -74,9 +74,9 @@ export class MapEmbeddable extends Embeddable {
   _dispatchSetQuery({ query, timeRange, filters }) {
     this._prevTimeRange = timeRange;
     this._prevQuery = query;
-    this._prevFilters = filters;
+    this._prevFilters = filters.filter(filter => !filter.meta.disabled);
     this._store.dispatch(setQuery({
-      filters: filters.filter(filter => !filter.meta.disabled),
+      filters: this._prevFilters,
       query,
       timeFilters: timeRange,
     }));