[lens] Editor frame initializes datasources and visualizations

x-pack/plugins/lens/public/app_plugin/plugin.tsx

@@ -7,6 +7,7 @@
 import React from 'react';
 import { editorFrameSetup, editorFrameStop } from '../editor_frame_plugin';
 import { indexPatternDatasourceSetup, indexPatternDatasourceStop } from '../indexpattern_plugin';
+import { xyVisualizationSetup, xyVisualizationStop } from '../xy_visualization_plugin';
 import { App } from './app';
 
 export class AppPlugin {
@@ -16,15 +17,18 @@ export class AppPlugin {
     // TODO: These plugins should not be called from the top level, but since this is the
     // entry point to the app we have no choice until the new platform is ready
     const indexPattern = indexPatternDatasourceSetup();
+    const xyVisualization = xyVisualizationSetup();
     const editorFrame = editorFrameSetup();
 
     editorFrame.registerDatasource('indexpattern', indexPattern);
+    editorFrame.registerVisualization('xy', xyVisualization);
 
     return <App editorFrame={editorFrame} />;
   }
 
   stop() {
     indexPatternDatasourceStop();
+    xyVisualizationStop();
     editorFrameStop();
   }
 }

x-pack/plugins/lens/public/editor_frame_plugin/editor_frame.tsx

@@ -4,34 +4,139 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { Datasource, Visualization } from '../types';
+import React, { useState, useEffect } from 'react';
+import { Datasource, Visualization, DatasourcePublicAPI } from '../types';
 
 interface EditorFrameProps {
   datasources: { [key: string]: Datasource };
   visualizations: { [key: string]: Visualization };
+
+  activeDatasource: string | null;
+}
+
+interface DatasourceState {
+  [key: string]: {
+    state: any;
+    setState: (state: any) => void;
+    api: DatasourcePublicAPI;
+    datasource: Datasource;
+  };
+}
+
+interface VisualizationState {
+  [key: string]: {
+    state: any;
+    setState: (state: any) => void;
+    visualization: Visualization;
+  };
 }
 
 export function EditorFrame(props: EditorFrameProps) {
-  const keys = Object.keys(props.datasources);
+  const dsKeys = Object.keys(props.datasources);
+  const vKeys = Object.keys(props.visualizations);
+
+  const [datasourceState, setDatasourceState] = useState({} as DatasourceState);
+  const [visualizationState, setVisualizationState] = useState({} as VisualizationState);
+
+  // Initialize all datasources and load their public APIs
+  useEffect(
+    () => {
+      Promise.all(
+        dsKeys.map(key => {
+          return props.datasources[key].initialize();
+        })
+      ).then(allStates => {
+        const newState: { [key: string]: any } = {};
+        allStates.forEach((state, index) => {
+          const key = dsKeys[index];
+          const datasource = props.datasources[key];
+
+          const setState = (s: any) => {
+            setDatasourceState({
+              ...datasourceState,
+              [key]: s,
+            });
+          };
+          newState[key] = {
+            datasource,
+            api: datasource.getPublicAPI(state, setState),
+            state,
+            setState,
+          };
+        });
+        setDatasourceState(newState);
+      });
+    },
+    [dsKeys.length]
+  );
+
+  // Initialize all visualizations
+  useEffect(
+    () => {
+      Promise.all(
+        vKeys.map(key => {
+          return props.visualizations[key].initialize();
+        })
+      ).then(allStates => {
+        const newState: { [key: string]: any } = {};
+        allStates.forEach((state, index) => {
+          const key = vKeys[index];
+          const visualization = props.visualizations[key];
+
+          const setState = (s: any) => {
+            setVisualizationState({
+              ...visualizationState,
+              [key]: s,
+            });
+          };
+          newState[key] = {
+            visualization,
+            state,
+            setState,
+          };
+        });
+        setVisualizationState(newState);
+      });
+    },
+    [vKeys.length]
+  );
 
   return (
     <div>
       <h2>Editor Frame</h2>
 
-      {keys.map(key => (
-        <div
-          key={key}
-          ref={domElement => {
-            if (domElement) {
-              props.datasources[key].renderDataPanel(domElement, {
-                state: {},
-                setState: () => {},
-              });
-            }
-          }}
-        />
-      ))}
+      {Object.keys(datasourceState).length &&
+        dsKeys.map(key => (
+          <div
+            key={key}
+            ref={domElement => {
+              if (domElement) {
+                datasourceState[key].datasource.renderDataPanel(domElement, {
+                  state: datasourceState[key].state,
+                  setState: datasourceState[key].setState,
+                });
+              }
+            }}
+          />
+        ))}
+
+      {Object.keys(datasourceState).length &&
+        Object.keys(visualizationState).length &&
+        props.activeDatasource &&
+        vKeys.map(key => (
+          <div
+            key={key}
+            ref={domElement => {
+              if (domElement) {
+                props.visualizations[key].renderConfigPanel(domElement, {
+                  datasource: datasourceState[props.activeDatasource!].api,
+                  state: visualizationState[key].state,
+                  setState: visualizationState[key].setState,
+                });
+              }
+            }}
+          />
+        ))}
     </div>
   );
 }

x-pack/plugins/lens/public/editor_frame_plugin/plugin.tsx

@@ -6,15 +6,21 @@
 
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { Datasource, Visualization, EditorFrameSetup } from '../types';
+import { Datasource, Visualization, EditorFrameSetup, DatasourcePublicAPI } from '../types';
 
 import { EditorFrame } from './editor_frame';
 
 class EditorFramePlugin {
   constructor() {}
 
-  private datasources: { [key: string]: Datasource } = {};
-  private visualizations: { [key: string]: Visualization } = {};
+  private datasources: {
+    [key: string]: Datasource;
+  } = {};
+  private visualizations: {
+    [key: string]: Visualization;
+  } = {};
+
+  private activeDatasource: string | null = null;
 
   private element: Element | null = null;
 
@@ -23,19 +29,30 @@ class EditorFramePlugin {
       render: domElement => {
         this.element = domElement;
         render(
-          <EditorFrame datasources={this.datasources} visualizations={this.visualizations} />,
+          <EditorFrame
+            datasources={this.datasources}
+            visualizations={this.visualizations}
+            activeDatasource={this.activeDatasource}
+          />,
           domElement
         );
       },
-      registerDatasource: (name, datasource) => {
+      registerDatasource: async (name, datasource) => {
         // casting it to an unknown datasource. This doesn't introduce runtime errors
         // because each type T is always also an unknown, but typescript won't do it
         // on it's own because we are loosing type information here.
         // So it's basically explicitly saying "I'm dropping the information about type T here
         // because this information isn't useful to me." but without using any which can leak
+        // const state = await datasource.initialize();
+
         this.datasources[name] = datasource as Datasource<unknown>;
+
+        if (!this.activeDatasource) {
+          this.activeDatasource = name;
+        }
       },
       registerVisualization: (name, visualization) => {
+        // this.visualizations[name] = visualization as Visualization<unknown>;
         this.visualizations[name] = visualization as Visualization<unknown>;
       },
     };

x-pack/plugins/lens/public/types.ts

@@ -134,7 +134,10 @@ export interface VisualizationSuggestion<T = unknown> {
 }
 
 export interface Visualization<T = unknown> {
-  renderConfigPanel: (props: VisualizationProps<T>) => void;
+  // For initializing from saved object
+  initialize: (state?: T) => Promise<T>;
+
+  renderConfigPanel: (domElement: Element, props: VisualizationProps<T>) => void;
 
   toExpression: (state: T, datasource: DatasourcePublicAPI) => string;
 

x-pack/plugins/lens/public/xy_visualization_plugin/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './plugin';

x-pack/plugins/lens/public/xy_visualization_plugin/plugin.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { xyVisualization } from './xy_visualization';
+
+class XyVisualizationPlugin {
+  constructor() {}
+
+  setup() {
+    return xyVisualization;
+  }
+
+  stop() {}
+}
+
+const plugin = new XyVisualizationPlugin();
+
+export const xyVisualizationSetup = () => plugin.setup();
+export const xyVisualizationStop = () => plugin.stop();

x-pack/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { render } from 'react-dom';
+import { Visualization, DimensionRole } from '../types';
+
+export interface XyVisualizationState {
+  roles: DimensionRole[];
+}
+
+export const xyVisualization: Visualization<XyVisualizationState> = {
+  async initialize() {
+    return {
+      roles: [],
+    };
+  },
+
+  renderConfigPanel: (domElement, props) => {
+    render(<div>XY Visualization</div>, domElement);
+  },
+
+  getSuggestions: options => [],
+
+  getMappingOfTableToRoles: (state, datasource) => [],
+
+  toExpression: state => '',
+};