Improve vis editor typings

src/plugins/vis_default_editor/public/default_editor_controller.tsx

@@ -22,12 +22,12 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import { EventEmitter } from 'events';
 import { EuiErrorBoundary, EuiLoadingChart } from '@elastic/eui';
 
-import { EditorRenderProps } from 'src/plugins/visualize/public';
+import { EditorRenderProps, IEditorController } from 'src/plugins/visualize/public';
 import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public';
 
 const DefaultEditor = lazy(() => import('./default_editor'));
 
-class DefaultEditorController {
+class DefaultEditorController implements IEditorController {
   constructor(
     private el: HTMLElement,
     private vis: Vis,

src/plugins/visualizations/public/index.ts

@@ -36,7 +36,7 @@ export { getSchemas as getVisSchemas } from './legacy/build_pipeline';
 
 /** @public types */
 export { VisualizationsSetup, VisualizationsStart };
-export { VisTypeAlias, VisType, BaseVisTypeOptions, ReactVisTypeOptions } from './vis_types';
+export type { VisTypeAlias, VisType, BaseVisTypeOptions, ReactVisTypeOptions } from './vis_types';
 export { VisParams, SerializedVis, SerializedVisData, VisData } from './vis';
 export type VisualizeEmbeddableFactoryContract = PublicContract<VisualizeEmbeddableFactory>;
 export type VisualizeEmbeddableContract = PublicContract<VisualizeEmbeddable>;

src/plugins/visualizations/public/vis_types/index.ts

@@ -18,6 +18,6 @@
  */
 
 export * from './types_service';
-export { VisType } from './types';
+export type { VisType } from './types';
 export type { BaseVisTypeOptions } from './base_vis_type';
 export type { ReactVisTypeOptions } from './react_vis_type';

src/plugins/visualizations/public/vis_types/types.ts

@@ -18,11 +18,14 @@
  */
 
 import { IconType } from '@elastic/eui';
+import { EventEmitter } from 'events';
 import React from 'react';
 import { Adapters } from 'src/plugins/inspector';
+import { IEditorController } from 'src/plugins/visualize/public';
 import { ISchemas } from 'src/plugins/vis_default_editor/public';
 import { TriggerContextMapping } from '../../../ui_actions/public';
 import { Vis, VisToExpressionAst, VisualizationControllerConstructor } from '../types';
+import { VisualizeEmbeddableContract } from '..';
 
 export interface VisTypeOptions {
   showTimePicker: boolean;
@@ -32,6 +35,13 @@ export interface VisTypeOptions {
   hierarchicalData: boolean;
 }
 
+export type VisEditorConstructor = new (
+  element: HTMLElement,
+  vis: Vis,
+  eventEmitter: EventEmitter,
+  embeddableHandler: VisualizeEmbeddableContract
+) => IEditorController;
+
 /**
  * A visualization type representing one specific type of "classical"
  * visualizations (i.e. not Lens visualizations).
@@ -69,12 +79,14 @@ export interface VisType<TVisParams = unknown> {
 
   readonly options: VisTypeOptions;
 
-  // TODO: The following types still need to be refined properly.
-
   /**
    * The editor that should be used to edit visualizations of this type.
+   * If this is not specified the default visualize editor will be used (and should be configured via schemas)
+   * and editorConfig.
    */
-  readonly editor?: any;
+  readonly editor?: VisEditorConstructor;
+
+  // TODO: The following types still need to be refined properly.
   readonly editorConfig: Record<string, any>;
   readonly visConfig: Record<string, any>;
 }

src/plugins/visualize/public/application/types.ts

@@ -132,6 +132,6 @@ export interface ByValueVisInstance {
 export type VisualizeEditorVisInstance = SavedVisInstance | ByValueVisInstance;
 
 export interface IEditorController {
-  render(props: EditorRenderProps): void;
+  render(props: EditorRenderProps): Promise<void> | void;
   destroy(): void;
 }

src/plugins/visualize/public/application/utils/use/use_saved_vis_instance.ts

@@ -102,16 +102,18 @@ export const useSavedVisInstance = (
 
         let visEditorController;
         // do not create editor in embeded mode
-        if (isChromeVisible) {
-          const Editor = vis.type.editor || DefaultEditorController;
-          visEditorController = new Editor(
-            visEditorRef.current,
-            vis,
-            eventEmitter,
-            embeddableHandler
-          );
-        } else if (visEditorRef.current) {
-          embeddableHandler.render(visEditorRef.current);
+        if (visEditorRef.current) {
+          if (isChromeVisible) {
+            const Editor = vis.type.editor || DefaultEditorController;
+            visEditorController = new Editor(
+              visEditorRef.current,
+              vis,
+              eventEmitter,
+              embeddableHandler
+            );
+          } else {
+            embeddableHandler.render(visEditorRef.current);
+          }
         }
 
         setState({

src/plugins/visualize/public/application/utils/use/use_vis_byvalue.ts

@@ -41,7 +41,7 @@ export const useVisByValue = (
   useEffect(() => {
     const { chrome } = services;
     const getVisInstance = async () => {
-      if (!valueInput || loaded.current) {
+      if (!valueInput || loaded.current || !visEditorRef.current) {
         return;
       }
       const byValueVisInstance = await getVisualizationInstanceFromInput(services, valueInput);

src/plugins/visualize/public/index.ts

@@ -20,7 +20,7 @@
 import { PluginInitializerContext } from 'kibana/public';
 import { VisualizePlugin } from './plugin';
 
-export { EditorRenderProps } from './application/types';
+export { EditorRenderProps, IEditorController } from './application/types';
 export { VisualizeConstants } from './application/visualize_constants';
 
 export const plugin = (context: PluginInitializerContext) => {