explicitly passing filters and query to visualize

src/core_plugins/kibana/public/visualize/editor/editor.html

@@ -69,10 +69,11 @@
   <visualize
     saved-obj="savedVis"
     ui-state="uiState"
-    app-state="state"
+    filters="state.filters"
+    query="state.query"
+    time-range="timeRange"
     editor-mode="chrome.getVisible()"
     show-spy-panel="chrome.getVisible()"
-    time-range="timeRange"
     >
 
   </visualize>

src/core_plugins/kibana/public/visualize/editor/editor.js

@@ -220,6 +220,7 @@ function VisEditor($scope, $route, timefilter, AppState, $window, kbnUrl, courie
 
     const updateTimeRange = () => {
       $scope.timeRange = timefilter.time;
+      $scope.vis.forceReload();
     };
 
     timefilter.enableAutoRefreshSelector();

src/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.js

@@ -82,6 +82,18 @@ export class VisualizeEmbeddable extends Embeddable  {
       this.timeRange = containerState.timeRange;
     }
 
+    // Check if filters has changed
+    if (containerState.filters !== this.filters) {
+      updatedParams.filters = containerState.filters;
+      this.filters = containerState.filters;
+    }
+
+    // Check if query has changed
+    if (containerState.query !== this.query) {
+      updatedParams.query = containerState.query;
+      this.query = containerState.query;
+    }
+
     const derivedPanelTitle = this.getPanelTitle(containerState);
     if (this.panelTitle !== derivedPanelTitle) {
       updatedParams.dataAttrs = {
@@ -103,6 +115,8 @@ export class VisualizeEmbeddable extends Embeddable  {
   render(domNode, containerState) {
     this.panelTitle = this.getPanelTitle(containerState);
     this.timeRange = containerState.timeRange;
+    this.query = containerState.query;
+    this.filters = containerState.filters;
 
     this.transferCustomizationsToUiState(containerState);
 
@@ -111,6 +125,8 @@ export class VisualizeEmbeddable extends Embeddable  {
       // Append visualization to container instead of replacing its content
       append: true,
       timeRange: containerState.timeRange,
+      query: containerState.query,
+      filters: containerState.filters,
       cssClass: `panel-content panel-content--fullWidth`,
       // The chrome is permanently hidden in "embed mode" in which case we don't want to show the spy pane, since
       // we deem that situation to be more public facing and want to hide more detailed information.

src/ui/public/vis/request_handlers/courier.js

@@ -6,40 +6,13 @@ import { calculateObjectHash } from '../lib/calculate_object_hash';
 const CourierRequestHandlerProvider = function (Private, courier, timefilter) {
   const SearchSource = Private(SearchSourceProvider);
 
-  /**
-   * TODO: This code can be removed as soon as we got rid of inheritance in the
-   * searchsource and pass down every filter explicitly.
-   * we're only adding one range filter against the timeFieldName to ensure
-   * that our filter is the only one applied and override the global filters.
-   * this does rely on the "implementation detail" that filters are added first
-   * on the leaf SearchSource and subsequently on the parents.
-   */
-  function removeSearchSourceParentTimefilter(searchSource) {
-    searchSource.addFilterPredicate((filter, state) => {
-      if (!filter.range) {
-        return true;
-      }
-
-      const index = searchSource.index() || searchSource.getParent().index();
-      const timeFieldName = index && index.timeFieldName;
-      if (!index || !timeFieldName) {
-        return true;
-      }
-
-      // Only check if we need to filter out this filter if it's actual a range filter
-      // on our time field and not any other field.
-      if (!filter.range[timeFieldName]) {
-        return true;
-      }
-
-      return !(state.filters || []).find(f => f.range && f.range[timeFieldName]);
-    });
-
-  }
-
   return {
     name: 'courier',
-    handler: function (vis, { appState, queryFilter, searchSource, timeRange }) {
+    handler: function (vis, { searchSource, savedSearch, timeRange, query, filters }) {
+
+      // prevent inheriting from root search source
+      if (savedSearch) searchSource.getParent().inherits(false);
+      else searchSource.inherits(false);
 
       // Create a new search source that inherits the original search source
       // but has the propriate timeRange applied via a filter.
@@ -74,12 +47,8 @@ const CourierRequestHandlerProvider = function (Private, courier, timefilter) {
         return timefilter.get(searchSource.index(), timeRange);
       });
 
-      removeSearchSourceParentTimefilter(requestSearchSource);
-
-      if (queryFilter && vis.editorMode) {
-        searchSource.set('filter', queryFilter.getFilters());
-        searchSource.set('query', appState.query);
-      }
+      searchSource.set('filter', filters);
+      searchSource.set('query', query);
 
       const shouldQuery = () => {
         if (!searchSource.lastQuery || vis.reload) return true;

src/ui/public/visualize/loader/embedded_visualize_handler.js

@@ -36,6 +36,12 @@ export class EmbeddedVisualizeHandler {
       if (params.hasOwnProperty('timeRange')) {
         this._scope.timeRange = params.timeRange;
       }
+      if (params.hasOwnProperty('filters')) {
+        this._scope.filters = params.filters;
+      }
+      if (params.hasOwnProperty('query')) {
+        this._scope.query = params.query;
+      }
 
       // Apply data- attributes to the element if specified
       if (params.dataAttrs) {

src/ui/public/visualize/loader/loader.js

@@ -43,6 +43,8 @@ const VisualizeLoaderProvider = ($compile, $rootScope, savedVisualizations) => {
     scope.appState = params.appState;
     scope.uiState = params.uiState;
     scope.timeRange = params.timeRange;
+    scope.filters = params.filters;
+    scope.query = params.query;
     scope.showSpyPanel = params.showSpyPanel;
 
     const container = angular.element(el);

src/ui/public/visualize/visualize.js

@@ -1,6 +1,5 @@
 import _ from 'lodash';
 import { uiModules } from '../modules';
-import { stateMonitorFactory } from '../state_management/state_monitor_factory';
 import visualizeTemplate from './visualize.html';
 import { VisRequestHandlersRegistryProvider } from '../registry/vis_request_handlers';
 import { VisResponseHandlersRegistryProvider } from '../registry/vis_response_handlers';
@@ -36,6 +35,8 @@ uiModules
         appState: '=?',
         uiState: '=?',
         timeRange: '=?',
+        filters: '=?',
+        query: '=?',
       },
       template: visualizeTemplate,
       link: async function ($scope, $el) {
@@ -77,16 +78,18 @@ uiModules
           // to make this working and correctly rerender, so for now we will either
           // use the one passed in to us or look into the timefilter ourselfs (which
           // will be removed in the future).
-          const timeRange = $scope.timeRange || timefilter.time;
 
-          $scope.vis.filters = { timeRange };
+          $scope.vis.filters = { timeRange: $scope.timeRange };
 
           const handlerParams = {
             appState: $scope.appState,
             uiState: $scope.uiState,
             queryFilter: queryFilter,
             searchSource: $scope.savedObj.searchSource,
-            timeRange: timeRange,
+            savedSearch: $scope.savedObj.savedSearch,
+            timeRange: $scope.timeRange,
+            filters: $scope.filters,
+            query: $scope.query
           };
           // searchSource is only there for courier request handler
           requestHandler($scope.vis, handlerParams)
@@ -127,9 +130,8 @@ uiModules
           if ($scope.editorMode) {
             $scope.appState.vis = $scope.vis.getState();
             $scope.appState.save();
-          } else {
-            $scope.fetch();
           }
+          $scope.fetch();
         };
         $scope.vis.on('update', handleVisUpdate);
 
@@ -144,46 +146,19 @@ uiModules
         // dashboard will fire fetch event when it wants to refresh
         $scope.$on('fetch', reload);
 
-
-
-        const handleQueryUpdate = ()=> {
-          $scope.fetch();
-        };
-        queryFilter.on('update', handleQueryUpdate);
-
-        if ($scope.appState) {
-          const stateMonitor = stateMonitorFactory.create($scope.appState);
-          stateMonitor.onChange((status, type, keys) => {
-            if (keys[0] === 'vis') {
-              if ($scope.appState.vis) $scope.vis.setState($scope.appState.vis);
-              $scope.fetch();
-            }
-            if ($scope.vis.type.requiresSearch && ['query', 'filters'].includes(keys[0])) {
-              $scope.fetch();
-            }
-          });
-
-          $scope.$on('$destroy', () => {
-            stateMonitor.destroy();
-          });
-        }
-
         // Listen on uiState changes to start fetching new data again.
         // Some visualizations might need different data depending on their uiState,
         // thus we need to retrigger. The request handler should take care about
         // checking if anything changed, that actually require a new fetch or return
         // cached data otherwise.
         $scope.uiState.on('change', $scope.fetch);
-        resizeChecker.on('resize', $scope.fetch);
 
-        // visualize needs to know about timeFilter
-        $scope.$listen(timefilter, 'fetch', $scope.fetch);
+        resizeChecker.on('resize', $scope.fetch);
 
         $scope.$on('$destroy', () => {
           destroyed = true;
           $scope.vis.removeListener('reload', reload);
           $scope.vis.removeListener('update', handleVisUpdate);
-          queryFilter.off('update', handleQueryUpdate);
           $scope.uiState.off('change', $scope.fetch);
           resizeChecker.destroy();
         });