[Vega] Add ability to open links in Vega in new window

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

@@ -233,6 +233,11 @@ export class VegaBaseView {
 
       return result;
     };
+
+    const vegaSpec = this._parser.isVegaLite ? this._parser.vlspec : this._parser.spec;
+    const usermetaLoaderOptions = vegaSpec.usermeta?.embedOptions?.loader;
+    vegaLoader.options = usermetaLoaderOptions ?? {};
+
     config.loader = vegaLoader;
 
     const vegaLogger = logger(Warn);

src/platform/test/functional/apps/visualize/group6/_vega_chart.ts

@@ -27,6 +27,49 @@ signals: [ {
   }]
 }]}`;
 
+const getLinkTestSpec = (url: string, usermeta?: string) => `
+{
+  $schema: https://vega.github.io/schema/vega-lite/v5.json
+  data: {
+    url: {
+      %context%: true
+      %timefield%: @timestamp
+      index: logstash-*
+      body: {
+        aggs: {
+          country_buckets: {
+            terms: {
+              field: geo.dest
+              size: 1
+            }
+          }
+        }
+        size: 0
+      }
+    }
+    format: {property: "aggregations.country_buckets.buckets"}
+  }
+  transform: [
+    {
+      "calculate": "'${url}'", "as": "url"
+    }
+  ]
+  mark: bar
+  encoding: {
+    x: {
+      field: key 
+      type: nominal 
+      axis: {labelAngle: 0}
+    }
+    y: {
+      field: doc_count
+      type: quantitative
+    }
+    "href": {"field": "url", "type": "nominal"}
+  }
+  usermeta: ${usermeta}
+}`;
+
 export default function ({ getPageObjects, getService }: FtrProviderContext) {
   const { timePicker, visualize, visChart, visEditor, vegaChart } = getPageObjects([
     'timePicker',
@@ -292,5 +335,52 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         expect(await filterBar.getFilterCount()).to.be(0);
       });
     });
+
+    describe('clickable marks with links', () => {
+      beforeEach(async () => {
+        await timePicker.setDefaultAbsoluteRange();
+      });
+
+      const fillSpecAndGo = async (newSpec: string) => {
+        await vegaChart.fillSpec(newSpec);
+        await visEditor.clickGo();
+
+        const viewContainer = await vegaChart.getViewContainer();
+        const canvasElement = await viewContainer.findByTagName('canvas');
+        const { width, height } = await canvasElement.getSize();
+
+        await canvasElement.moveMouseTo({
+          xOffset: Math.round(width / 2),
+          yOffset: Math.round(height / 2),
+        });
+        await canvasElement.click();
+      };
+
+      const getKibanaBaseUrl = async () => {
+        const currentUrl = await browser.getCurrentUrl();
+        return currentUrl.substring(0, currentUrl.indexOf('#'));
+      };
+
+      it('should open in a new tab when passing the appropriate usermeta to spec', async () => {
+        const usermeta = JSON.stringify({ embedOptions: { loader: { target: '_blank' } } });
+        const spec = getLinkTestSpec(await getKibanaBaseUrl(), usermeta);
+        await fillSpecAndGo(spec);
+
+        const windowHandlers = await browser.getAllWindowHandles();
+        expect(windowHandlers.length).to.equal(2);
+
+        await browser.switchTab(1);
+        await browser.closeCurrentWindow();
+        await browser.switchTab(0);
+      });
+
+      it('should open in the same tab without passing the appropriate usermeta to spec', async () => {
+        const spec = getLinkTestSpec(await getKibanaBaseUrl());
+        await fillSpecAndGo(spec);
+
+        const windowHandlers = await browser.getAllWindowHandles();
+        expect(windowHandlers.length).to.equal(1);
+      });
+    });
   });
 }