Vega visualization renderer (#81606)

* Create vega to_ast function

* Create a custom vega renderer

* Fix sass error

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Author: sulemanof

src/plugins/vis_type_vega/public/_vega_editor.scss renamed to src/plugins/vis_type_vega/public/components/vega_editor.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/_vega_vis.scss renamed to src/plugins/vis_type_vega/public/components/vega_vis.scss

@@ -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_component.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.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/components/vega_vis_editor_lazy.tsx

@@ -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/index.scss

@@ -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/plugin.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/to_ast.ts

@@ -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 };