[VEGA] src/plugins/vis_type_vega/public/lib/vega.js should be removed (…

…#89861) (#90615)

* [VEGA] src/plugins/vis_type_vega/public/lib/vega.js should be removed

* remove leaflet dependency

* fix CI

* cleanup vega-scenagraph

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

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

package.json

@@ -712,7 +712,6 @@
     "leaflet": "1.5.1",
     "leaflet-draw": "0.4.14",
     "leaflet-responsive-popup": "0.6.4",
-    "leaflet-vega": "^0.8.6",
     "leaflet.heat": "0.2.0",
     "less": "npm:@elastic/[email protected]",
     "license-checker": "^16.0.0",
@@ -831,6 +830,7 @@
     "val-loader": "^1.1.1",
     "vega": "^5.19.1",
     "vega-lite": "^4.17.0",
+    "vega-spec-injector": "^0.0.2",
     "vega-schema-url-parser": "^2.1.0",
     "vega-tooltip": "^0.25.0",
     "venn.js": "0.2.20",

src/plugins/maps_legacy/public/leaflet.js

@@ -12,7 +12,6 @@ if (!window.hasOwnProperty('L')) {
   window.L.Browser.touch = false;
   window.L.Browser.pointer = false;
 
-  require('leaflet-vega');
   require('leaflet.heat/dist/leaflet-heat.js');
   require('leaflet-draw/dist/leaflet.draw.css');
   require('leaflet-draw/dist/leaflet.draw.js');

src/plugins/vis_type_vega/public/data_model/types.ts

@@ -10,6 +10,8 @@ import { SearchResponse, SearchParams } from 'elasticsearch';
 
 import { Filter } from 'src/plugins/data/public';
 import { DslQuery } from 'src/plugins/data/common';
+import { Assign } from '@kbn/utility-types';
+import { Spec } from 'vega';
 import { EsQueryParser } from './es_query_parser';
 import { EmsFileParser } from './ems_file_parser';
 import { UrlParser } from './url_parser';
@@ -93,21 +95,24 @@ export interface KibanaConfig {
   renderer: Renderer;
 }
 
-export interface VegaSpec {
-  [index: string]: any;
-  $schema: string;
-  data?: Data;
-  encoding?: Encoding;
-  mark?: string;
-  title?: string;
-  autosize?: AutoSize;
-  projections?: Projection[];
-  width?: number | 'container';
-  height?: number | 'container';
-  padding?: number | Padding;
-  _hostConfig?: KibanaConfig;
-  config: VegaSpecConfig;
-}
+export type VegaSpec = Assign<
+  Spec,
+  {
+    [index: string]: any;
+    $schema: string;
+    data?: Data;
+    encoding?: Encoding;
+    mark?: string;
+    title?: string;
+    autosize?: AutoSize;
+    projections?: Projection[];
+    width?: number | 'container';
+    height?: number | 'container';
+    padding?: number | Padding;
+    _hostConfig?: KibanaConfig;
+    config: VegaSpecConfig;
+  }
+>;
 
 export enum CONSTANTS {
   TIMEFILTER = '%timefilter%',

src/plugins/vis_type_vega/public/data_model/vega_parser.test.js

@@ -13,11 +13,6 @@ import { bypassExternalUrlCheck } from '../vega_view/vega_base_view';
 
 jest.mock('../services');
 
-jest.mock('../lib/vega', () => ({
-  vega: jest.requireActual('vega'),
-  vegaLite: jest.requireActual('vega-lite'),
-}));
-
 describe(`VegaParser.parseAsync`, () => {
   test(`should throw an error in case of $spec is not defined`, async () => {
     const vp = new VegaParser('{}');

src/plugins/vis_type_vega/public/data_model/vega_parser.ts

@@ -13,8 +13,9 @@ import hjson from 'hjson';
 import { euiPaletteColorBlind } from '@elastic/eui';
 import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
 import { i18n } from '@kbn/i18n';
-// @ts-ignore
-import { vega, vegaLite } from '../lib/vega';
+
+import { logger, Warn, version as vegaVersion } from 'vega';
+import { compile, TopLevelSpec, version as vegaLiteVersion } from 'vega-lite';
 import { EsQueryParser } from './es_query_parser';
 import { Utils } from './utils';
 import { EmsFileParser } from './ems_file_parser';
@@ -235,9 +236,9 @@ The URL is an identifier only. Kibana and your browser will never access this UR
    */
   private _compileVegaLite() {
     this.vlspec = this.spec;
-    const logger = vega.logger(vega.Warn); // note: eslint has a false positive here
-    logger.warn = this._onWarning.bind(this);
-    this.spec = vegaLite.compile(this.vlspec, logger).spec;
+    const vegaLogger = logger(Warn); // note: eslint has a false positive here
+    vegaLogger.warn = this._onWarning.bind(this);
+    this.spec = compile(this.vlspec as TopLevelSpec, { logger: vegaLogger }).spec;
 
     // When using VL with the type=map and user did not provid their own projection settings,
     // remove the default projection that was generated by VegaLite compiler.
@@ -534,7 +535,7 @@ The URL is an identifier only. Kibana and your browser will never access this UR
   private parseSchema(spec: VegaSpec) {
     const schema = schemaParser(spec.$schema);
     const isVegaLite = schema.library === 'vega-lite';
-    const libVersion = isVegaLite ? vegaLite.version : vega.version;
+    const libVersion = isVegaLite ? vegaLiteVersion : vegaVersion;
 
     if (versionCompare(schema.version, libVersion) > 0) {
       this._onWarning(

src/plugins/vis_type_vega/public/vega_fn.ts

@@ -16,7 +16,7 @@ import { VegaInspectorAdapters } from './vega_inspector/index';
 import { KibanaContext, TimeRange, Query } from '../../data/public';
 import { VegaParser } from './data_model/vega_parser';
 
-type Input = KibanaContext | null;
+type Input = KibanaContext | { type: 'null' };
 type Output = Promise<Render<RenderValue>>;
 
 interface Arguments {

src/plugins/vis_type_vega/public/vega_type.ts

@@ -19,7 +19,6 @@ import { toExpressionAst } from './to_ast';
 import { getInfoMessage } from './components/experimental_map_vis_info';
 import { VegaVisEditorComponent } from './components/vega_vis_editor_lazy';
 
-import type { VegaSpec } from './data_model/types';
 import type { VisParams } from './vega_fn';
 
 export const createVegaTypeDefinition = (): VisTypeDefinition<VisParams> => {
@@ -58,7 +57,7 @@ export const createVegaTypeDefinition = (): VisTypeDefinition<VisParams> => {
       try {
         const spec = parse(visParams.spec, { legacyRoot: false, keepWsc: true });
 
-        return extractIndexPatternsFromSpec(spec as VegaSpec);
+        return extractIndexPatternsFromSpec(spec);
       } catch (e) {
         // spec is invalid
       }

src/plugins/vis_type_vega/public/vega_view/vega_base_view.js

@@ -9,7 +9,8 @@
 import $ from 'jquery';
 import moment from 'moment';
 import dateMath from '@elastic/datemath';
-import { vega, vegaLite } from '../lib/vega';
+import { scheme, loader, logger, Warn, version as vegaVersion, expressionFunction } from 'vega';
+import { version as vegaLiteVersion } from 'vega-lite';
 import { Utils } from '../data_model/utils';
 import { euiPaletteColorBlind } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -19,7 +20,7 @@ import { esFilters } from '../../../data/public';
 import { getEnableExternalUrls, getData } from '../services';
 import { extractIndexPatternsFromSpec } from '../lib/extract_index_pattern';
 
-vega.scheme('elastic', euiPaletteColorBlind());
+scheme('elastic', euiPaletteColorBlind());
 
 // Vega's extension functions are global. When called,
 // we forward execution to the instance-specific handler
@@ -32,8 +33,8 @@ const vegaFunctions = {
 };
 
 for (const funcName of Object.keys(vegaFunctions)) {
-  if (!vega.expressionFunction(funcName)) {
-    vega.expressionFunction(funcName, function handlerFwd(...args) {
+  if (!expressionFunction(funcName)) {
+    expressionFunction(funcName, function handlerFwd(...args) {
       const view = this.context.dataflow;
       view.runAfter(() => view._kibanaView.vegaFunctionsHandler(funcName, ...args));
     });
@@ -164,9 +165,9 @@ export class VegaBaseView {
     };
 
     // Override URL sanitizer to prevent external data loading (if disabled)
-    const loader = vega.loader();
-    const originalSanitize = loader.sanitize.bind(loader);
-    loader.sanitize = (uri, options) => {
+    const vegaLoader = loader();
+    const originalSanitize = vegaLoader.sanitize.bind(vegaLoader);
+    vegaLoader.sanitize = (uri, options) => {
       if (uri.bypassToken === bypassToken) {
         // If uri has a bypass token, the uri was encoded by bypassExternalUrlCheck() above.
         // because user can only supply pure JSON data structure.
@@ -185,14 +186,14 @@ export class VegaBaseView {
       }
       return originalSanitize(uri, options);
     };
-    config.loader = loader;
+    config.loader = vegaLoader;
 
-    const logger = vega.logger(vega.Warn);
+    const vegaLogger = logger(Warn);
 
-    logger.warn = this.onWarn.bind(this);
-    logger.error = this.onError.bind(this);
+    vegaLogger.warn = this.onWarn.bind(this);
+    vegaLogger.error = this.onError.bind(this);
 
-    config.logger = logger;
+    config.logger = vegaLogger;
 
     return config;
   }
@@ -430,8 +431,8 @@ export class VegaBaseView {
       }
       const debugObj = {};
       window.VEGA_DEBUG = debugObj;
-      window.VEGA_DEBUG.VEGA_VERSION = vega.version;
-      window.VEGA_DEBUG.VEGA_LITE_VERSION = vegaLite.version;
+      window.VEGA_DEBUG.VEGA_VERSION = vegaVersion;
+      window.VEGA_DEBUG.VEGA_LITE_VERSION = vegaLiteVersion;
       window.VEGA_DEBUG.view = view;
       window.VEGA_DEBUG.vega_spec = spec;
       window.VEGA_DEBUG.vegalite_spec = vlspec;

src/plugins/vis_type_vega/public/vega_view/vega_map_view/constants.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import type { Style } from 'mapbox-gl';
 import { TMS_IN_YML_ID } from '../../../../maps_legacy/public';
 
 export const vegaLayerId = 'vega';
@@ -16,7 +17,7 @@ export const defaultMapConfig = {
   tileSize: 256,
 };
 
-export const defaultMabBoxStyle = {
+export const defaultMabBoxStyle: Style = {
   /**
    * according to the MapBox documentation that value should be '8'
    * @see (https://docs.mapbox.com/mapbox-gl-js/style-spec/root/#version)

src/plugins/vis_type_vega/public/vega_view/vega_map_view/layers/vega_layer.test.ts

@@ -7,6 +7,7 @@
  */
 
 import { initVegaLayer } from './vega_layer';
+import type { View } from 'vega';
 
 type InitVegaLayerParams = Parameters<typeof initVegaLayer>[0];
 
@@ -32,9 +33,9 @@ describe('vega_map_view/tms_raster_layer', () => {
       addLayer: jest.fn(),
     } as unknown) as MapType;
     context = {
-      vegaView: {
+      vegaView: ({
         initialize: jest.fn(),
-      },
+      } as unknown) as View,
       updateVegaView: jest.fn(),
     };
   });

src/plugins/vis_type_vega/public/vega_view/vega_map_view/layers/vega_layer.ts

@@ -7,14 +7,12 @@
  */
 
 import type { Map, CustomLayerInterface } from 'mapbox-gl';
+import type { View } from 'vega';
 import type { LayerParameters } from './types';
 
-// @ts-ignore
-import { vega } from '../../lib/vega';
-
 export interface VegaLayerContext {
-  vegaView: vega.View;
-  updateVegaView: (map: Map, view: vega.View) => void;
+  vegaView: View;
+  updateVegaView: (map: Map, view: View) => void;
 }
 
 export function initVegaLayer({

src/plugins/vis_type_vega/public/vega_view/vega_map_view/utils/vsi_helper.ts

@@ -7,13 +7,12 @@
  */
 
 // @ts-expect-error
-// eslint-disable-next-line import/no-extraneous-dependencies
 import Vsi from 'vega-spec-injector';
 
-import { VegaSpec } from '../../../data_model/types';
+import { Spec } from 'vega';
 import { defaultProjection } from '../constants';
 
-export const injectMapPropsIntoSpec = (spec: VegaSpec) => {
+export const injectMapPropsIntoSpec = (spec: Spec) => {
   const vsi = new Vsi();
 
   vsi.overrideField(spec, 'autosize', 'none');

src/plugins/vis_type_vega/public/vega_view/vega_map_view/view.test.ts

@@ -28,11 +28,8 @@ import {
   setMapServiceSettings,
   setUISettings,
 } from '../../services';
-
-jest.mock('../../lib/vega', () => ({
-  vega: jest.requireActual('vega'),
-  vegaLite: jest.requireActual('vega-lite'),
-}));
+import { initVegaLayer, initTmsRasterLayer } from './layers';
+import { Map, NavigationControl, Style } from 'mapbox-gl';
 
 jest.mock('mapbox-gl', () => ({
   Map: jest.fn().mockImplementation(() => ({
@@ -55,9 +52,6 @@ jest.mock('./layers', () => ({
   initTmsRasterLayer: jest.fn(),
 }));
 
-import { initVegaLayer, initTmsRasterLayer } from './layers';
-import { Map, NavigationControl } from 'mapbox-gl';
-
 describe('vega_map_view/view', () => {
   describe('VegaMapView', () => {
     const coreStart = coreMock.createStart();
@@ -76,7 +70,7 @@ describe('vega_map_view/view', () => {
     setUISettings(coreStart.uiSettings);
 
     const getTmsService = jest.fn().mockReturnValue(({
-      getVectorStyleSheet: () => ({
+      getVectorStyleSheet: (): Style => ({
         version: 8,
         sources: {},
         layers: [],

src/plugins/vis_type_vega/public/vega_view/vega_map_view/view.ts

@@ -9,6 +9,7 @@
 import { i18n } from '@kbn/i18n';
 import { Map, Style, NavigationControl, MapboxOptions } from 'mapbox-gl';
 
+import { View, parse } from 'vega';
 import { initTmsRasterLayer, initVegaLayer } from './layers';
 import { VegaBaseView } from '../vega_base_view';
 import { getMapServiceSettings } from '../../services';
@@ -24,12 +25,9 @@ import {
 
 import { validateZoomSettings, injectMapPropsIntoSpec } from './utils';
 
-// @ts-expect-error
-import { vega } from '../../lib/vega';
-
 import './vega_map_view.scss';
 
-async function updateVegaView(mapBoxInstance: Map, vegaView: vega.View) {
+async function updateVegaView(mapBoxInstance: Map, vegaView: View) {
   const mapCanvas = mapBoxInstance.getCanvas();
   const { lat, lng } = mapBoxInstance.getCenter();
   let shouldRender = false;
@@ -77,7 +75,7 @@ export class VegaMapView extends VegaBaseView {
     };
   }
 
-  private async initMapContainer(vegaView: vega.View) {
+  private async initMapContainer(vegaView: View) {
     let style: Style = defaultMabBoxStyle;
     let customAttribution: MapboxOptions['customAttribution'] = [];
     const zoomSettings = {
@@ -139,7 +137,7 @@ export class VegaMapView extends VegaBaseView {
     }
   }
 
-  private initLayers(mapBoxInstance: Map, vegaView: vega.View) {
+  private initLayers(mapBoxInstance: Map, vegaView: View) {
     const shouldShowUserConfiguredLayer = this.mapStyle === userConfiguredLayerId;
 
     if (shouldShowUserConfiguredLayer) {
@@ -168,8 +166,8 @@ export class VegaMapView extends VegaBaseView {
   }
 
   protected async _initViewCustomizations() {
-    const vegaView = new vega.View(
-      vega.parse(injectMapPropsIntoSpec(this._parser.spec)),
+    const vegaView = new View(
+      parse(injectMapPropsIntoSpec(this._parser.spec)),
       this._vegaViewConfig
     );