Visualize: Reload on ui state change and fix ui state for tsvb

src/plugins/vis_type_timeseries/public/application/components/vis_editor.js

@@ -74,6 +74,8 @@ export class VisEditor extends Component {
 
   handleUiState = (field, value) => {
     this.props.vis.uiState.set(field, value);
+    // reload visualization because data might need to be re-fetched
+    this.props.vis.uiState.emit('reload');
   };
 
   updateVisState = debounce(() => {

src/plugins/visualizations/public/embeddable/visualize_embeddable.ts

@@ -60,6 +60,7 @@ export interface VisualizeInput extends EmbeddableInput {
   vis?: {
     colors?: { [key: string]: string };
   };
+  table?: unknown;
 }
 
 export interface VisualizeOutput extends EmbeddableOutput {
@@ -77,7 +78,7 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
   private query?: Query;
   private title?: string;
   private filters?: Filter[];
-  private visCustomizations: VisualizeInput['vis'];
+  private visCustomizations?: Pick<VisualizeInput, 'vis' | 'table'>;
   private subscriptions: Subscription[] = [];
   private expression: string = '';
   private vis: Vis;
@@ -108,6 +109,7 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
     this.timefilter = timefilter;
     this.vis = vis;
     this.vis.uiState.on('change', this.uiStateChangeHandler);
+    this.vis.uiState.on('reload', this.reload);
 
     this.autoRefreshFetchSubscription = timefilter
       .getAutoRefreshFetch$()
@@ -149,17 +151,22 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
     // Check for changes that need to be forwarded to the uiState
     // Since the vis has an own listener on the uiState we don't need to
     // pass anything from here to the handler.update method
-    const visCustomizations = this.input.vis;
-    if (visCustomizations) {
+    const visCustomizations = { vis: this.input.vis, table: this.input.table };
+    if (visCustomizations.vis || visCustomizations.table) {
       if (!_.isEqual(visCustomizations, this.visCustomizations)) {
         this.visCustomizations = visCustomizations;
         // Turn this off or the uiStateChangeHandler will fire for every modification.
         this.vis.uiState.off('change', this.uiStateChangeHandler);
         this.vis.uiState.clearAllKeys();
-        this.vis.uiState.set('vis', visCustomizations);
-        getKeys(visCustomizations).forEach(key => {
-          this.vis.uiState.set(key, visCustomizations[key]);
-        });
+        if (visCustomizations.vis) {
+          this.vis.uiState.set('vis', visCustomizations.vis);
+          getKeys(visCustomizations).forEach(key => {
+            this.vis.uiState.set(key, visCustomizations[key]);
+          });
+        }
+        if (visCustomizations.table) {
+          this.vis.uiState.set('table', visCustomizations.table);
+        }
         this.vis.uiState.on('change', this.uiStateChangeHandler);
       }
     } else if (this.parent) {
@@ -307,6 +314,7 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
     super.destroy();
     this.subscriptions.forEach(s => s.unsubscribe());
     this.vis.uiState.off('change', this.uiStateChangeHandler);
+    this.vis.uiState.off('reload', this.reload);
 
     if (this.handler) {
       this.handler.destroy();

src/plugins/visualize/public/application/editor/editor.js

@@ -387,6 +387,7 @@ function VisualizeAppController($scope, $route, $injector, $timeout, kbnUrlState
       stateContainer
     );
     vis.uiState = persistedState;
+    vis.uiState.on('reload', embeddableHandler.reload);
     $scope.uiState = persistedState;
     $scope.savedVis = savedVis;
     $scope.query = initialState.query;
@@ -534,6 +535,7 @@ function VisualizeAppController($scope, $route, $injector, $timeout, kbnUrlState
       $scope.eventEmitter.off('apply', _applyVis);
 
       unsubscribePersisted();
+      vis.uiState.off('reload', embeddableHandler.reload);
       unsubscribeStateUpdates();
 
       stopAllSyncing();