Vega visualization renderer

src/plugins/vis_type_vega/public/_vega_vis.scss → src/plugins/vis_type_vega/public/components/vega_vis.scss

@@ -1,3 +1,11 @@
+.vgaVis__wrapper {
+  @include euiScrollBar;
+
+  display: flex;
+  flex: 1 1 0;
+  overflow: auto;
+}
+
 .vgaVis {
   display: flex;
   flex: 1 1 100%;

src/plugins/vis_type_vega/public/components/vega_vis_component.tsx

@@ -0,0 +1,85 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useEffect, useMemo, useRef } from 'react';
+import { EuiResizeObserver } from '@elastic/eui';
+import { throttle } from 'lodash';
+
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { createVegaVisualization } from '../vega_visualization';
+import { VegaVisualizationDependencies } from '../plugin';
+import { VegaParser } from '../data_model/vega_parser';
+
+import './vega_vis.scss';
+
+interface VegaVisComponentProps {
+  deps: VegaVisualizationDependencies;
+  fireEvent: IInterpreterRenderHandlers['event'];
+  renderComplete: () => void;
+  visData: VegaParser;
+}
+
+type VegaVisController = InstanceType<ReturnType<typeof createVegaVisualization>>;
+
+const VegaVisComponent = ({ visData, fireEvent, renderComplete, deps }: VegaVisComponentProps) => {
+  const chartDiv = useRef<HTMLDivElement>(null);
+  const visController = useRef<VegaVisController | null>(null);
+
+  useEffect(() => {
+    if (chartDiv.current) {
+      const VegaVis = createVegaVisualization(deps);
+      visController.current = new VegaVis(chartDiv.current, fireEvent);
+    }
+
+    return () => {
+      visController.current?.destroy();
+      visController.current = null;
+    };
+  }, [deps, fireEvent]);
+
+  useEffect(() => {
+    if (visController.current) {
+      visController.current.render(visData).then(renderComplete);
+    }
+  }, [visData, renderComplete]);
+
+  const updateChartSize = useMemo(
+    () =>
+      throttle(() => {
+        if (visController.current) {
+          visController.current.render(visData).then(renderComplete);
+        }
+      }, 300),
+    [renderComplete, visData]
+  );
+
+  return (
+    <EuiResizeObserver onResize={updateChartSize}>
+      {(resizeRef) => (
+        <div className="vgaVis__wrapper" ref={resizeRef}>
+          <div ref={chartDiv} />
+        </div>
+      )}
+    </EuiResizeObserver>
+  );
+};
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { VegaVisComponent as default };

src/plugins/vis_type_vega/public/components/vega_vis_editor.tsx

@@ -30,6 +30,8 @@ import { VisParams } from '../vega_fn';
 import { VegaHelpMenu } from './vega_help_menu';
 import { VegaActionsMenu } from './vega_actions_menu';
 
+import './vega_editor.scss';
+
 const aceOptions = {
   maxLines: Infinity,
   highlightActiveLine: false,
@@ -102,4 +104,6 @@ function VegaVisEditor({ stateParams, setValue }: VisOptionsProps<VisParams>) {
   );
 }
 
-export { VegaVisEditor };
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { VegaVisEditor as default };

src/plugins/vis_type_vega/public/components/vega_vis_editor_lazy.tsx

@@ -0,0 +1,29 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { lazy } from 'react';
+
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisParams } from '../vega_fn';
+
+const VegaVisEditor = lazy(() => import('./vega_vis_editor'));
+
+export const VegaVisEditorComponent = (props: VisOptionsProps<VisParams>) => (
+  <VegaVisEditor {...props} />
+);

src/plugins/vis_type_vega/public/plugin.ts

@@ -35,10 +35,10 @@ import {
 import { createVegaFn } from './vega_fn';
 import { createVegaTypeDefinition } from './vega_type';
 import { IServiceSettings } from '../../maps_legacy/public';
-import './index.scss';
 import { ConfigSchema } from '../config';
 
 import { getVegaInspectorView } from './vega_inspector';
+import { getVegaVisRenderer } from './vega_vis_renderer';
 
 /** @internal */
 export interface VegaVisualizationDependencies {
@@ -93,6 +93,7 @@ export class VegaPlugin implements Plugin<Promise<void>, void> {
     inspector.registerView(getVegaInspectorView({ uiSettings: core.uiSettings }));
 
     expressions.registerFunction(() => createVegaFn(visualizationDependencies));
+    expressions.registerRenderer(getVegaVisRenderer(visualizationDependencies));
 
     visualizations.createBaseVisualization(createVegaTypeDefinition(visualizationDependencies));
   }

src/plugins/vis_type_vega/public/to_ast.ts

@@ -0,0 +1,32 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { buildExpression, buildExpressionFunction } from '../../expressions/public';
+import { Vis } from '../../visualizations/public';
+import { VegaExpressionFunctionDefinition, VisParams } from './vega_fn';
+
+export const toExpressionAst = (vis: Vis<VisParams>) => {
+  const vega = buildExpressionFunction<VegaExpressionFunctionDefinition>('vega', {
+    spec: vis.params.spec,
+  });
+
+  const ast = buildExpression([vega]);
+
+  return ast.toAst();
+};

src/plugins/vis_type_vega/public/vega_fn.ts

@@ -40,21 +40,23 @@ interface Arguments {
 
 export type VisParams = Required<Arguments>;
 
-interface RenderValue {
+export interface RenderValue {
   visData: VegaParser;
   visType: 'vega';
   visConfig: VisParams;
 }
 
-export const createVegaFn = (
-  dependencies: VegaVisualizationDependencies
-): ExpressionFunctionDefinition<
+export type VegaExpressionFunctionDefinition = ExpressionFunctionDefinition<
   'vega',
   Input,
   Arguments,
   Output,
   ExecutionContext<VegaInspectorAdapters>
-> => ({
+>;
+
+export const createVegaFn = (
+  dependencies: VegaVisualizationDependencies
+): VegaExpressionFunctionDefinition => ({
   name: 'vega',
   type: 'render',
   inputTypes: ['kibana_context', 'null'],
@@ -80,7 +82,7 @@ export const createVegaFn = (
 
     return {
       type: 'render',
-      as: 'visualization',
+      as: 'vega_vis',
       value: {
         visData: response,
         visType: 'vega',

src/plugins/vis_type_vega/public/vega_inspector/vega_data_inspector.tsx

@@ -41,7 +41,7 @@ const specLabel = i18n.translate('visTypeVega.inspector.specLabel', {
   defaultMessage: 'Spec',
 });
 
-export const VegaDataInspector = ({ adapters }: VegaDataInspectorProps) => {
+const VegaDataInspector = ({ adapters }: VegaDataInspectorProps) => {
   const tabs = [
     {
       id: 'data-viewer--id',
@@ -75,3 +75,7 @@ export const VegaDataInspector = ({ adapters }: VegaDataInspectorProps) => {
     />
   );
 };
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { VegaDataInspector as default };

src/plugins/vis_type_vega/public/vega_inspector/vega_inspector.tsx

@@ -16,14 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
+import { EuiLoadingSpinner } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 import { IUiSettingsClient } from 'kibana/public';
-import { VegaAdapter } from './vega_adapter';
-import { VegaDataInspector, VegaDataInspectorProps } from './vega_data_inspector';
 import { KibanaContextProvider } from '../../../kibana_react/public';
 import { Adapters, RequestAdapter, InspectorViewDescription } from '../../../inspector/public';
+import { VegaAdapter } from './vega_adapter';
+import type { VegaDataInspectorProps } from './vega_data_inspector';
+
+const VegaDataInspector = lazy(() => import('./vega_data_inspector'));
 
 export interface VegaInspectorAdapters extends Adapters {
   requests: RequestAdapter;
@@ -46,7 +49,9 @@ export const getVegaInspectorView = (dependencies: VegaInspectorViewDependencies
     },
     component: (props) => (
       <KibanaContextProvider services={dependencies}>
-        <VegaDataInspector {...(props as VegaDataInspectorProps)}> </VegaDataInspector>
+        <Suspense fallback={<EuiLoadingSpinner />}>
+          <VegaDataInspector {...(props as VegaDataInspectorProps)} />
+        </Suspense>
       </KibanaContextProvider>
     ),
   } as InspectorViewDescription);

src/plugins/vis_type_vega/public/vega_type.ts

@@ -21,22 +21,20 @@ import { i18n } from '@kbn/i18n';
 import { BaseVisTypeOptions } from 'src/plugins/visualizations/public';
 import { DefaultEditorSize } from '../../vis_default_editor/public';
 import { VegaVisualizationDependencies } from './plugin';
-import { VegaVisEditor } from './components';
 
 import { createVegaRequestHandler } from './vega_request_handler';
-// @ts-expect-error
-import { createVegaVisualization } from './vega_visualization';
 import { getDefaultSpec } from './default_spec';
 import { createInspectorAdapters } from './vega_inspector';
 import { VIS_EVENT_TO_TRIGGER } from '../../visualizations/public';
-
+import { toExpressionAst } from './to_ast';
+import { VisParams } from './vega_fn';
 import { getInfoMessage } from './components/experimental_map_vis_info';
+import { VegaVisEditorComponent } from './components/vega_vis_editor_lazy';
 
 export const createVegaTypeDefinition = (
   dependencies: VegaVisualizationDependencies
-): BaseVisTypeOptions => {
+): BaseVisTypeOptions<VisParams> => {
   const requestHandler = createVegaRequestHandler(dependencies);
-  const visualization = createVegaVisualization(dependencies);
 
   return {
     name: 'vega',
@@ -49,13 +47,12 @@ export const createVegaTypeDefinition = (
     icon: 'visVega',
     visConfig: { defaults: { spec: getDefaultSpec() } },
     editorConfig: {
-      optionsTemplate: VegaVisEditor,
+      optionsTemplate: VegaVisEditorComponent,
       enableAutoApply: true,
       defaultSize: DefaultEditorSize.MEDIUM,
     },
-    visualization,
     requestHandler,
-    responseHandler: 'none',
+    toExpressionAst,
     options: {
       showIndexSelection: false,
       showQueryBar: true,

src/plugins/vis_type_vega/public/vega_view/vega_base_view.d.ts

@@ -0,0 +1,40 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { DataPublicPluginStart } from 'src/plugins/data/public';
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { IServiceSettings } from 'src/plugins/maps_legacy/public';
+import { VegaParser } from '../data_model/vega_parser';
+
+interface VegaViewParams {
+  parentEl: HTMLDivElement;
+  fireEvent: IInterpreterRenderHandlers['event'];
+  vegaParser: VegaParser;
+  serviceSettings: IServiceSettings;
+  filterManager: DataPublicPluginStart['query']['filterManager'];
+  timefilter: DataPublicPluginStart['query']['timefilter']['timefilter'];
+  // findIndex: (index: string) => Promise<...>;
+}
+
+export class VegaBaseView {
+  constructor(params: VegaViewParams);
+  init(): Promise<void>;
+  onError(error: any): void;
+  destroy(): Promise<void>;
+}