[Reporting] Missing vega vis is when generating report from sample da…

…ta (elastic#124886)

* [Reporting] Missing vega vis is when generating report from sample data

Closes: elastic#124886

* Update vega_vis.scss

Co-authored-by: Kibana Machine <[email protected]>

src/plugins/vis_types/vega/public/components/vega_vis_component.tsx

@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useCallback, useRef } from 'react';
-import { EuiResizeObserver } from '@elastic/eui';
+import React, { useEffect, useRef, useMemo, useCallback } from 'react';
+import { EuiResizeObserver, EuiResizeObserverProps } from '@elastic/eui';
 import { throttle } from 'lodash';
 
 import type { IInterpreterRenderHandlers, RenderMode } from 'src/plugins/expressions';
@@ -27,6 +27,8 @@ interface VegaVisComponentProps {
 
 type VegaVisController = InstanceType<ReturnType<typeof createVegaVisualization>>;
 
+const THROTTLE_INTERVAL = 300;
+
 export const VegaVisComponent = ({
   visData,
   fireEvent,
@@ -35,38 +37,55 @@ export const VegaVisComponent = ({
   renderMode,
 }: VegaVisComponentProps) => {
   const chartDiv = useRef<HTMLDivElement>(null);
+  const renderCompleted = useRef(false);
   const visController = useRef<VegaVisController | null>(null);
 
   useEffect(() => {
     if (chartDiv.current) {
       const VegaVis = createVegaVisualization(deps, renderMode);
       visController.current = new VegaVis(chartDiv.current, fireEvent);
     }
-
     return () => {
       visController.current?.destroy();
       visController.current = null;
     };
   }, [deps, fireEvent, renderMode]);
 
   useEffect(() => {
+    const asyncRender = async (visCtrl: VegaVisController) => {
+      await visCtrl.render(visData);
+      renderCompleted.current = true;
+      renderComplete();
+    };
+
     if (visController.current) {
-      visController.current.render(visData).then(renderComplete);
+      asyncRender(visController.current);
     }
-  }, [visData, renderComplete]);
+  }, [renderComplete, visData]);
+
+  const resizeChart = useMemo(
+    () =>
+      throttle(
+        (dimensions) => {
+          visController.current?.resize(dimensions);
+        },
+        THROTTLE_INTERVAL,
+        { leading: false, trailing: true }
+      ),
+    []
+  );
 
-  /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  const updateChartSize = useCallback(
-    throttle(() => {
-      if (visController.current) {
-        visController.current.render(visData).then(renderComplete);
+  const onContainerResize: EuiResizeObserverProps['onResize'] = useCallback(
+    (dimensions) => {
+      if (renderCompleted.current) {
+        resizeChart(dimensions);
       }
-    }, 300),
-    [renderComplete, visData]
+    },
+    [resizeChart]
   );
 
   return (
-    <EuiResizeObserver onResize={updateChartSize}>
+    <EuiResizeObserver onResize={onContainerResize}>
       {(resizeRef) => (
         <div className="vgaVis__wrapper" ref={resizeRef}>
           <div ref={chartDiv} />

src/plugins/vis_types/vega/public/vega_view/vega_base_view.d.ts

@@ -34,6 +34,7 @@ export class VegaBaseView {
   _addDestroyHandler(handler: Function): void;
 
   destroy(): Promise<void>;
+  resize(dimensions?: { height: number; width: number }): Promise<void>;
 
   _$container: any;
   _$controls: any;

src/plugins/vis_types/vega/public/vega_view/vega_base_view.js

@@ -262,16 +262,19 @@ export class VegaBaseView {
     }
   }
 
-  resize() {
+  async resize(dimensions) {
     if (this._parser.useResize && this._view) {
-      this.updateVegaSize(this._view);
-      return this._view.runAsync();
+      this.updateVegaSize(this._view, dimensions);
+      await this._view.runAsync();
+
+      // The derived class should create this method
+      this.onViewContainerResize?.();
     }
   }
 
-  updateVegaSize(view) {
-    const width = Math.floor(Math.max(0, this._$container.width()));
-    const height = Math.floor(Math.max(0, this._$container.height()));
+  updateVegaSize(view, dimensions) {
+    const width = Math.floor(Math.max(0, dimensions?.width ?? this._$container.width()));
+    const height = Math.floor(Math.max(0, dimensions?.height ?? this._$container.height()));
 
     if (view.width() !== width || view.height() !== height) {
       view.width(width).height(height);

src/plugins/vis_types/vega/public/vega_view/vega_map_view/view.ts

@@ -46,6 +46,8 @@ async function updateVegaView(mapBoxInstance: Map, vegaView: View) {
 }
 
 export class VegaMapView extends VegaBaseView {
+  private mapBoxInstance?: Map;
+
   private get shouldShowZoomControl() {
     return Boolean(this._parser.mapConfig.zoomControl);
   }
@@ -139,6 +141,7 @@ export class VegaMapView extends VegaBaseView {
       };
 
       mapBoxInstance.once('load', initMapComponents);
+      this.mapBoxInstance = mapBoxInstance;
     });
   }
 
@@ -193,4 +196,8 @@ export class VegaMapView extends VegaBaseView {
 
     await this.initMapContainer(vegaView);
   }
+
+  protected async onViewContainerResize() {
+    this.mapBoxInstance?.resize();
+  }
 }

src/plugins/vis_types/vega/public/vega_vis_renderer.tsx

@@ -27,7 +27,6 @@ export const getVegaVisRenderer: (
     handlers.onDestroy(() => {
       unmountComponentAtNode(domNode);
     });
-
     render(
       <KibanaThemeProvider theme$={deps.core.theme.theme$}>
         <VisualizationContainer handlers={handlers}>

src/plugins/vis_types/vega/public/vega_visualization.ts

@@ -16,6 +16,7 @@ import { createVegaStateRestorer } from './lib/vega_state_restorer';
 
 type VegaVisType = new (el: HTMLDivElement, fireEvent: IInterpreterRenderHandlers['event']) => {
   render(visData: VegaParser): Promise<void>;
+  resize(dimensions?: { height: number; width: number }): Promise<void>;
   destroy(): void;
 };
 
@@ -97,6 +98,10 @@ export const createVegaVisualization = (
       }
     }
 
+    async resize(dimensions?: { height: number; width: number }) {
+      return this.vegaView?.resize(dimensions);
+    }
+
     destroy() {
       this.vegaStateRestorer.clear();
       this.vegaView?.destroy();