updating based on luke's review

src/legacy/core_plugins/kibana/public/visualize/np_ready/legacy_app.js

@@ -42,6 +42,49 @@ import {
 } from './breadcrumbs';
 import { createSavedSearchesLoader } from '../../../../../../plugins/discover/public';
 
+const getResolvedResults = deps => {
+  const { core, data, visualizations } = deps;
+
+  const results = {};
+
+  return savedVis => {
+    results.savedVis = savedVis;
+    return visualizations
+      .convertToSerializedVis(savedVis)
+      .then(serializedVis => visualizations.createVis(serializedVis.type, serializedVis))
+      .then(vis => {
+        if (vis.type.setup) {
+          return vis.type.setup(vis).catch(() => vis);
+        }
+        return vis;
+      })
+      .then(vis => {
+        results.vis = vis;
+        return deps.embeddable.getEmbeddableFactory('visualization').createFromObject(results.vis, {
+          timeRange: data.query.timefilter.timefilter.getTime(),
+          filters: data.query.filterManager.getFilters(),
+        });
+      })
+      .then(embeddableHandler => {
+        results.embeddableHandler = embeddableHandler;
+        if (results.vis.data.savedSearchId) {
+          return createSavedSearchesLoader({
+            savedObjectsClient: core.savedObjects.client,
+            indexPatterns: data.indexPatterns,
+            chrome: core.chrome,
+            overlays: core.overlays,
+          }).get(results.vis.data.savedSearchId);
+        }
+      })
+      .then(savedSearch => {
+        if (savedSearch) {
+          results.savedSearch = savedSearch;
+        }
+        return results;
+      });
+  };
+};
+
 export function initVisualizeApp(app, deps) {
   initVisualizeAppDirective(app, deps);
 
@@ -120,47 +163,9 @@ export function initVisualizeApp(app, deps) {
               );
             }
 
-            const results = {};
-
             return ensureDefaultIndexPattern(core, data, history)
               .then(() => savedVisualizations.get($route.current.params))
-              .then(savedObj => {
-                results.savedVis = savedObj;
-                return visualizations.convertToSerializedVis(savedObj);
-              })
-              .then(serializedVis => visualizations.createVis(serializedVis.type, serializedVis))
-              .then(vis => {
-                if (vis.type.setup) {
-                  return vis.type.setup(vis).catch(() => vis);
-                }
-                return vis;
-              })
-              .then(vis => {
-                results.vis = vis;
-                return deps.embeddable
-                  .getEmbeddableFactory('visualization')
-                  .createFromObject(results.vis, {
-                    timeRange: data.query.timefilter.timefilter.getTime(),
-                    filters: data.query.filterManager.getFilters(),
-                  });
-              })
-              .then(embeddableHandler => {
-                results.embeddableHandler = embeddableHandler;
-                if (results.vis.data.savedSearchId) {
-                  return createSavedSearchesLoader({
-                    savedObjectsClient: core.savedObjects.client,
-                    indexPatterns: data.indexPatterns,
-                    chrome: core.chrome,
-                    overlays: core.overlays,
-                  }).get(results.vis.data.savedSearchId);
-                }
-              })
-              .then(savedSearch => {
-                if (savedSearch) {
-                  results.savedSearch = savedSearch;
-                }
-                return results;
-              })
+              .then(getResolvedResults(deps))
               .catch(
                 redirectWhenMissing({
                   history,
@@ -177,57 +182,15 @@ export function initVisualizeApp(app, deps) {
         k7Breadcrumbs: getEditBreadcrumbs,
         resolve: {
           resolved: function($route, history) {
-            const {
-              chrome,
-              core,
-              data,
-              savedVisualizations,
-              visualizations,
-              toastNotifications,
-            } = deps;
-
-            const results = {};
+            const { chrome, core, data, savedVisualizations, toastNotifications } = deps;
 
             return ensureDefaultIndexPattern(core, data, history)
               .then(() => savedVisualizations.get($route.current.params.id))
               .then(savedVis => {
                 chrome.recentlyAccessed.add(savedVis.getFullPath(), savedVis.title, savedVis.id);
-                results.savedVis = savedVis;
-                return visualizations.convertToSerializedVis(savedVis);
-              })
-              .then(serializedVis => visualizations.createVis(serializedVis.type, serializedVis))
-              .then(vis => {
-                if (vis.type.setup) {
-                  return vis.type.setup(vis).catch(() => vis);
-                }
-                return vis;
-              })
-              .then(vis => {
-                results.vis = vis;
-                return deps.embeddable
-                  .getEmbeddableFactory('visualization')
-                  .createFromObject(results.vis, {
-                    timeRange: data.query.timefilter.timefilter.getTime(),
-                    filters: data.query.filterManager.getFilters(),
-                  });
-              })
-              .then(embeddableHandler => {
-                results.embeddableHandler = embeddableHandler;
-                if (results.vis.data.savedSearchId) {
-                  return createSavedSearchesLoader({
-                    savedObjectsClient: core.savedObjects.client,
-                    indexPatterns: data.indexPatterns,
-                    chrome: core.chrome,
-                    overlays: core.overlays,
-                  }).get(results.vis.data.savedSearchId);
-                }
-              })
-              .then(savedSearch => {
-                if (savedSearch) {
-                  results.savedSearch = savedSearch;
-                }
-                return results;
+                return savedVis;
               })
+              .then(getResolvedResults(deps))
               .catch(
                 redirectWhenMissing({
                   history,

src/legacy/core_plugins/vis_default_editor/public/default_editor.tsx

@@ -54,7 +54,7 @@ function DefaultEditor({
 
     embeddableHandler.render(visRef.current);
     setTimeout(() => {
-      eventEmitter.emit('dirtyStateChange', false);
+      eventEmitter.emit('apply');
     });
 
     return () => embeddableHandler.destroy();

src/legacy/core_plugins/vis_type_table/public/vis_controller.ts

@@ -19,7 +19,6 @@
 
 import angular, { IModule, auto, IRootScopeService, IScope, ICompileService } from 'angular';
 import $ from 'jquery';
-import { isEqual } from 'lodash';
 
 import { VisParams } from '../../visualizations/public';
 import { npStart } from './legacy_imports';

src/legacy/core_plugins/vis_type_timeseries/public/components/vis_editor.js

@@ -78,7 +78,10 @@ export class VisEditor extends Component {
 
   updateVisState = debounce(() => {
     this.props.vis.params = this.state.model;
-    this.props.reloadVisualization();
+    this.props.eventEmitter.emit('updateVis');
+    this.props.eventEmitter.emit('dirtyStateChange', {
+      isDirty: false,
+    });
   }, VIS_STATE_DEBOUNCE_DELAY);
 
   isValidKueryQuery = filterQuery => {

src/legacy/core_plugins/vis_type_timeseries/public/editor_controller.js

@@ -23,11 +23,11 @@ import { fetchIndexPatternFields } from './lib/fetch_fields';
 import { getSavedObjectsClient, getUISettings, getI18n } from './services';
 
 export class EditorController {
-  constructor(el, vis, embeddableHandler, reloadVisualization) {
+  constructor(el, vis, eventEmitter, embeddableHandler) {
     this.el = el;
 
     this.embeddableHandler = embeddableHandler;
-    this.reloadVisualization = reloadVisualization;
+    this.eventEmitter = eventEmitter;
 
     this.state = {
       fields: [],
@@ -77,7 +77,7 @@ export class EditorController {
           isEditorMode={true}
           appState={params.appState}
           embeddableHandler={this.embeddableHandler}
-          reloadVisualization={this.reloadVisualization}
+          eventEmitter={this.eventEmitter}
         />
       </I18nContext>,
       this.el

src/legacy/core_plugins/visualizations/public/np_ready/public/components/visualization_chart.tsx

@@ -43,7 +43,6 @@ class VisualizationChart extends React.Component<VisualizationChartProps> {
     vis: ExprVis;
     visParams: any;
     visData: any;
-    container: HTMLElement;
   }>;
   private renderSubscription: Rx.Subscription;
 
@@ -54,7 +53,7 @@ class VisualizationChart extends React.Component<VisualizationChartProps> {
     const render$ = this.renderSubject.asObservable().pipe(share());
 
     const success$ = render$.pipe(
-      filter(({ vis, visData }) => vis && (!vis.type!.requiresSearch || visData)),
+      filter(({ vis, visData }) => vis && (!vis.type.requiresSearch || visData)),
       debounceTime(100),
       switchMap(async ({ vis, visData, visParams }) => {
         if (!this.visualization) {
@@ -79,10 +78,10 @@ class VisualizationChart extends React.Component<VisualizationChartProps> {
     return (
       <div className="visChart__container kbn-resetFocusState" tabIndex={0} ref={this.containerDiv}>
         <p className="euiScreenReaderOnly">
-          {this.props.vis.type!.title} visualization, not yet accessible
+          {this.props.vis.type.title} visualization, not yet accessible
         </p>
         <div
-          aria-hidden={!this.props.vis.type!.isAccessible}
+          aria-hidden={!this.props.vis.type.isAccessible}
           className="visChart"
           ref={this.chartDiv}
         />
@@ -96,7 +95,7 @@ class VisualizationChart extends React.Component<VisualizationChartProps> {
     }
 
     const { vis } = this.props;
-    const Visualization = vis.type!.visualization;
+    const Visualization = vis.type.visualization;
 
     this.visualization = new Visualization(this.chartDiv.current, vis);
 
@@ -139,7 +138,6 @@ class VisualizationChart extends React.Component<VisualizationChartProps> {
         vis: this.props.vis,
         visData: this.props.visData,
         visParams: this.props.visParams,
-        container: this.containerDiv.current,
       });
     }
   }

src/legacy/core_plugins/visualizations/public/np_ready/public/expressions/vis.ts

@@ -52,7 +52,7 @@ export interface ExprVisAPI {
 
 export class ExprVis extends EventEmitter {
   public title: string = '';
-  public type?: VisType;
+  public type: VisType;
   public params: VisParams = {};
   public sessionState: Record<string, any> = {};
   public API: ExprVisAPI;
@@ -62,6 +62,7 @@ export class ExprVis extends EventEmitter {
   constructor(visState: ExprVisState = { type: 'histogram' }) {
     super();
 
+    this.type = this.getType(visState.type);
     this.uiState = new PersistedState();
     this.setState(visState);
 
@@ -79,29 +80,33 @@ export class ExprVis extends EventEmitter {
     };
   }
 
-  setState(state: ExprVisState) {
-    this.title = state.title || '';
-    const type = state.type || this.type;
+  private getType(type: string | VisType) {
     if (_.isString(type)) {
-      this.type = getTypes().get(type);
+      return getTypes().get(type);
       if (!this.type) {
         throw new Error(`Invalid type "${type}"`);
       }
     } else {
-      this.type = type;
+      return type;
     }
+  }
 
+  setState(state: ExprVisState) {
+    this.title = state.title || '';
+    if (state.type) {
+      this.type = this.getType(state.type);
+    }
     this.params = _.defaultsDeep(
       {},
       _.cloneDeep(state.params || {}),
-      _.cloneDeep(this.type!.visConfig.defaults || {})
+      _.cloneDeep(this.type.visConfig.defaults || {})
     );
   }
 
   getState() {
     return {
       title: this.title,
-      type: this.type!.name,
+      type: this.type.name,
       params: _.cloneDeep(this.params),
     };
   }
@@ -115,10 +120,10 @@ export class ExprVis extends EventEmitter {
   }
 
   isHierarchical() {
-    if (_.isFunction(this.type!.hierarchicalData)) {
-      return !!this.type!.hierarchicalData(this);
+    if (_.isFunction(this.type.hierarchicalData)) {
+      return !!this.type.hierarchicalData(this);
     } else {
-      return !!this.type!.hierarchicalData;
+      return !!this.type.hierarchicalData;
     }
   }
 

src/legacy/core_plugins/visualizations/public/np_ready/public/vis.ts

@@ -84,30 +84,42 @@ export class Vis {
   public readonly uiState: PersistedState;
 
   constructor(visType: string, visState: SerializedVis = {} as any) {
-    this.type = getTypes().get(visType);
-    if (!this.type) {
-      throw new Error(`Invalid type "${visType}"`);
-    }
-
+    this.type = this.getType(visType);
+    this.params = this.getParams(visState.params);
     this.uiState = new PersistedState(visState.uiState);
     this.id = visState.id;
 
     this.setState(visState || {});
   }
 
+  private getType(visType: string) {
+    const type = getTypes().get(visType);
+    if (!type) {
+      throw new Error(`Invalid type "${visType}"`);
+    }
+    return type;
+  }
+
+  private getParams(params: VisParams) {
+    return defaults({}, cloneDeep(params || {}), cloneDeep(this.type.visConfig.defaults || {}));
+  }
+
   setState(state: SerializedVis) {
+    let typeChanged = false;
+    if (state.type && this.type.name !== state.type) {
+      // @ts-ignore
+      this.type = this.getType(state.type);
+      typeChanged = true;
+    }
     if (state.title !== undefined) {
       this.title = state.title;
     }
     if (state.description !== undefined) {
       this.description = state.description;
     }
-
-    this.params = defaults(
-      {},
-      cloneDeep(state.params || {}),
-      cloneDeep(this.type.visConfig.defaults || {})
-    );
+    if (state.params || typeChanged) {
+      this.params = this.getParams(state.params);
+    }
 
     // move to migration script
     updateVisualizationConfig(state.params, this.params);