Fixed Vega map refresh, added vegamap test (#19245)

src/core_plugins/vega/public/__tests__/vega_map_test.hjson

@@ -0,0 +1,20 @@
+# This graph creates a single rectangle for the whole graph on top of a map
+# Note that the actual map tiles are not loaded
+{
+  $schema: https://vega.github.io/schema/vega/v3.0.json
+  config: {
+    kibana: {type: "map", mapStyle: false}
+  }
+  marks: [
+    {
+      type: rect
+      encode: {
+        enter: {
+          fill: {value: "#0f0"}
+          width: {signal: "width"}
+          height: {signal: "height"}
+        }
+      }
+    }
+  ]
+}

src/core_plugins/vega/public/__tests__/vega_tooltip_test.hjson

@@ -2,7 +2,6 @@
 # backed by a datum with two fields - fld1 & fld2
 # On mouse over, with 0 delay, it should show tooltip
 {
-  v: 1
   config: {
     kibana: {
       tooltips: {

src/core_plugins/vega/public/__tests__/vega_visualization.js

@@ -16,6 +16,9 @@ import vegaImage512 from './vega_image_512.png';
 
 import vegaTooltipGraph from '!!raw-loader!./vega_tooltip_test.hjson';
 
+import vegaMapGraph from '!!raw-loader!./vega_map_test.hjson';
+import vegaMapImage256 from './vega_map_image_256.png';
+
 import { VegaParser } from '../data_model/vega_parser';
 import { SearchCache } from '../data_model/search_cache';
 
@@ -144,6 +147,28 @@ describe('VegaVisualizations', () => {
 
     });
 
+    it('should show vega blank rectangle on top of a map (vegamap)', async () => {
+
+      let vegaVis;
+      try {
+
+        vegaVis = new VegaVisualization(domNode, vis);
+        const vegaParser = new VegaParser(vegaMapGraph, new SearchCache());
+        await vegaParser.parseAsync();
+
+        domNode.style.width = '256px';
+        domNode.style.height = '256px';
+
+        await vegaVis.render(vegaParser, { data: true });
+        const mismatchedPixels = await compareImage(vegaMapImage256);
+        expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF);
+
+      } finally {
+        vegaVis.destroy();
+      }
+
+    });
+
   });
 
 

src/core_plugins/vega/public/vega_view/vega_base_view.js

@@ -66,6 +66,10 @@ export class VegaBaseView {
           this._$messages.remove();
           this._$messages = null;
         }
+        if (this._view) {
+          this._view.finalize();
+        }
+        this._view = null;
       });
 
       this._vegaViewConfig = this.createViewConfig();
@@ -143,16 +147,25 @@ export class VegaBaseView {
   }
 
   setView(view) {
+    if (this._view === view) return;
+
+    if (this._view) {
+      this._view.finalize();
+    }
+
     this._view = view;
 
-    if (view && this._parser.tooltips) {
-      // position and padding can be specified with
-      // {config:{kibana:{tooltips: {position: 'top', padding: 15 } }}}
-      const tthandler = new TooltipHandler(this._$container[0], view, this._parser.tooltips);
+    if (view) {
+      if (this._parser.tooltips) {
+        // position and padding can be specified with
+        // {config:{kibana:{tooltips: {position: 'top', padding: 15 } }}}
+        const tthandler = new TooltipHandler(this._$container[0], view, this._parser.tooltips);
 
-      // Vega bug workaround - need to destroy tooltip by hand
-      this._addDestroyHandler(() => tthandler.hideTooltip());
+        // Vega bug workaround - need to destroy tooltip by hand
+        this._addDestroyHandler(() => tthandler.hideTooltip());
+      }
 
+      return view.runAsync(); // Allows callers to await rendering
     }
   }
 

src/core_plugins/vega/public/vega_view/vega_map_view.js

@@ -79,9 +79,6 @@ export class VegaMapView extends VegaBaseView {
 
     this._kibanaMap.addLayer(vegaMapLayer);
 
-    this.setDebugValues(vegaMapLayer.getVegaView(), vegaMapLayer.getVegaSpec());
-    this.setView(vegaMapLayer.getVegaView());
-
     this._addDestroyHandler(() => {
       this._kibanaMap.removeLayer(vegaMapLayer);
       if (baseMapOpts) {
@@ -89,6 +86,10 @@ export class VegaMapView extends VegaBaseView {
       }
       this._kibanaMap.destroy();
     });
+
+    const vegaView = vegaMapLayer.getVegaView();
+    this.setDebugValues(vegaView, vegaMapLayer.getVegaSpec());
+    await this.setView(vegaView);
   }
 
 }

src/core_plugins/vega/public/vega_view/vega_view.js

@@ -16,13 +16,6 @@ export class VegaView extends VegaBaseView {
 
     if (this._parser.useHover) view.hover();
 
-    this._addDestroyHandler(() => {
-      this.setView(null);
-      view.finalize();
-    });
-
-    this.setView(view);
-
-    await view.runAsync();
+    await this.setView(view);
   }
 }