[Chore] Add vega-lite v5 dependency and bundle from source (#3076)

* [Chore] Add vega-lite v5 dep and bundle from source

- Add vega-lite@^5.6.0 dependency
- Update webpack config to build `vega-lite` from typescript source to target es5
- Add babel plugin for logical assignment operators
- Selectively import only the vega-lite modules used
- Update vega_parser tests

Co-authored-by: Miki <amoo_miki@yahoo.com>
Signed-off-by: Josh Romero <rmerqg@amazon.com>

* [Chore] Update vega-lite defaults and tests to v5

- Add test case for older vega-light spec parsing
- Update default schema version in default spec, test specs, mocked saved objects
- Fix indentation of comments in default spec
- Update jest mock imports to use `vega-lite`

Signed-off-by: Josh Romero <rmerqg@amazon.com>

Signed-off-by: Josh Romero <rmerqg@amazon.com>
Co-authored-by: Miki <amoo_miki@yahoo.com>

CHANGELOG.md

@@ -113,6 +113,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Adding @zhongnansu as maintainer. ([#2590](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2590))
 - Removes `minimatch` manual resolution ([#3019](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3019))
 - Remove `github-checks-reporter`, an unused dependency ([#3126](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3126))
+- Upgrade `vega-lite` dependency to ^5.6.0 ([#3076](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3076))
 
 ### 🪛 Refactoring
 

package.json

@@ -456,7 +456,7 @@
     "ui-select": "0.19.8",
     "vega": "^5.17.3",
     "vega-interpreter": "npm:@amoo-miki/vega-forced-csp-compliant-interpreter@1.0.6",
-    "vega-lite": "^4.16.8",
+    "vega-lite": "^5.6.0",
     "vega-schema-url-parser": "^2.1.0",
     "vega-tooltip": "^0.24.2",
     "vinyl-fs": "^3.0.3",

packages/osd-babel-preset/common_preset.js

@@ -32,27 +32,27 @@ const plugins = [
   require.resolve('babel-plugin-add-module-exports'),
 
   // The class properties proposal was merged with the private fields proposal
-  // into the "class fields" proposal. Babel doesn't support this combined
-  // proposal yet, which includes private field, so this transform is
-  // TECHNICALLY stage 2, but for all intents and purposes it's stage 3
-  //
+  // into the "class fields" proposal which is stage 3.
   // See https://github.com/babel/proposals/issues/12 for progress
   require.resolve('@babel/plugin-proposal-class-properties'),
 
-  // Optional Chaining proposal is stage 3 (https://github.com/tc39/proposal-optional-chaining)
+  // Optional Chaining proposal is stage 4 (https://github.com/tc39/proposal-optional-chaining)
   // Need this since we are using TypeScript 3.7+
   require.resolve('@babel/plugin-proposal-optional-chaining'),
-  // Nullish coalescing proposal is stage 3 (https://github.com/tc39/proposal-nullish-coalescing)
+  // Nullish coalescing proposal is stage 4 (https://github.com/tc39/proposal-nullish-coalescing)
   // Need this since we are using TypeScript 3.7+
   require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
 
-  // Proposal is on stage 4 (https://github.com/tc39/proposal-export-ns-from)
+  // Proposal is merged into ECMA-262 (https://github.com/tc39/proposal-export-ns-from)
   // Need this since we are using TypeScript 3.8+
   require.resolve('@babel/plugin-proposal-export-namespace-from'),
 
-  // Proposal is on stage 4 (https://github.com/tc39/proposal-export-ns-from)
+  // Proposal is merged into ECMA-262 (https://github.com/tc39/proposal-export-ns-from)
   // Need this since we are using TypeScript 3.9+
   require.resolve('@babel/plugin-proposal-private-methods'),
+
+  // Proposal is on stage 4 (https://github.com/tc39/proposal-logical-assignment)
+  require.resolve('@babel/plugin-proposal-logical-assignment-operators'),
 ];
 
 module.exports = {

packages/osd-babel-preset/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.16.5",
     "@babel/plugin-proposal-export-namespace-from": "^7.16.5",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.5",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
     "@babel/plugin-proposal-optional-chaining": "^7.16.5",
     "@babel/plugin-proposal-private-methods": "^7.16.5",

packages/osd-optimizer/src/worker/webpack.config.ts

@@ -205,7 +205,9 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
         },
         {
           test: /\.(js|tsx?)$/,
-          exclude: /node_modules/,
+          // vega-lite and some of its dependencies don't have es5 builds
+          // so we need to build from source and transpiled for webpack v4
+          exclude: /[\/\\]node_modules[\/\\](?!vega-(lite|label|functions)[\/\\])/,
           use: {
             loader: 'babel-loader',
             options: {

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

@@ -37,7 +37,7 @@ jest.mock('../services');
 
 jest.mock('../lib/vega', () => ({
   vega: jest.requireActual('vega'),
-  vegaLite: jest.requireActual('vega-lite'),
+  vegaLite: jest.requireActual('vega-lite/src'),
 }));
 
 describe(`VegaParser.parseAsync`, () => {
@@ -245,11 +245,15 @@ describe('VegaParser.parseSchema', () => {
 
   test(
     'should not warn on current vega-lite version',
+    check('https://vega.github.io/schema/vega-lite/v5.json', true, 0)
+  );
+  test(
+    'should not warn on older vega-lite version',
     check('https://vega.github.io/schema/vega-lite/v4.json', true, 0)
   );
   test(
     'should warn on vega-lite version too new to be supported',
-    check('https://vega.github.io/schema/vega-lite/v5.json', true, 1)
+    check('https://vega.github.io/schema/vega-lite/v6.json', true, 1)
   );
 });
 

src/plugins/vis_type_vega/public/default.spec.hjson

@@ -1,31 +1,31 @@
 {
-/*
+  /*
 
-Welcome to Vega visualizations.  Here you can design your own dataviz from scratch using a declarative language called Vega, or its simpler form Vega-Lite.  In Vega, you have the full control of what data is loaded, even from multiple sources, how that data is transformed, and what visual elements are used to show it.  Use help icon to view Vega examples, tutorials, and other docs.  Use the wrench icon to reformat this text, or to remove comments.
+  Welcome to Vega visualizations.  Here you can design your own dataviz from scratch using a declarative language called Vega, or its simpler form Vega-Lite.  In Vega, you have the full control of what data is loaded, even from multiple sources, how that data is transformed, and what visual elements are used to show it.  Use help icon to view Vega examples, tutorials, and other docs.  Use the wrench icon to reformat this text, or to remove comments.
 
-This example graph shows the document count in all indexes in the current time range.  You might need to adjust the time filter in the upper right corner.
-*/
+  This example graph shows the document count in all indexes in the current time range.  You might need to adjust the time filter in the upper right corner.
+  */
 
-  $schema: https://vega.github.io/schema/vega-lite/v4.json
+  $schema: https://vega.github.io/schema/vega-lite/v5.json
   title: Event counts from all indexes
 
   // Define the data source
   data: {
     url: {
-/*
-An object instead of a string for the "url" param is treated as an OpenSearch query. Anything inside this object is not part of the Vega language, but only understood by OpenSearch Dashboards and OpenSearch server. This query counts the number of documents per time interval, assuming you have a @timestamp field in your data.
+      /*
+      An object instead of a string for the "url" param is treated as an OpenSearch query. Anything inside this object is not part of the Vega language, but only understood by OpenSearch Dashboards and OpenSearch server. This query counts the number of documents per time interval, assuming you have a @timestamp field in your data.
 
-OpenSearch Dashboards has a special handling for the fields surrounded by "%".  They are processed before the the query is sent to OpenSearch. This way the query becomes context aware, and can use the time range and the dashboard filters.
-*/
+      OpenSearch Dashboards has a special handling for the fields surrounded by "%".  They are processed before the the query is sent to OpenSearch. This way the query becomes context aware, and can use the time range and the dashboard filters.
+      */
 
       // Apply dashboard context filters when set
       %context%: true
       // Filter the time picker (upper right corner) with this field
       %timefield%: @timestamp
 
-/*
-See .search() documentation for :  https://opensearch.org/docs/latest/clients/javascript/
-*/
+      /*
+      See .search() documentation for :  https://opensearch.org/docs/latest/clients/javascript/
+      */
 
       // Which index to search
       index: _all
@@ -53,29 +53,29 @@ See .search() documentation for :  https://opensearch.org/docs/latest/clients/ja
         size: 0
       }
     }
-/*
-OpenSearch will return results in this format:
+    /*
+    OpenSearch will return results in this format:
 
-aggregations: {
-  time_buckets: {
-    buckets: [
-      {
-        key_as_string: 2015-11-30T22:00:00.000Z
-        key: 1448920800000
-        doc_count: 0
-      },
-      {
-        key_as_string: 2015-11-30T23:00:00.000Z
-        key: 1448924400000
-        doc_count: 0
+    aggregations: {
+      time_buckets: {
+        buckets: [
+          {
+            key_as_string: 2015-11-30T22:00:00.000Z
+            key: 1448920800000
+            doc_count: 0
+          },
+          {
+            key_as_string: 2015-11-30T23:00:00.000Z
+            key: 1448924400000
+            doc_count: 0
+          }
+          ...
+        ]
       }
-      ...
-    ]
-  }
-}
+    }
 
-For our graph, we only need the list of bucket values.  Use the format.property to discard everything else.
-*/
+    For our graph, we only need the list of bucket values.  Use the format.property to discard everything else.
+    */
     format: {property: "aggregations.time_buckets.buckets"}
   }
 

src/plugins/vis_type_vega/public/lib/vega.js

@@ -28,8 +28,11 @@
  * under the License.
  */
 
-import * as vegaLite from 'vega-lite/build-es5/vega-lite';
+// Build vega-lite from source for es5 compatibility
+import { compile, version } from 'vega-lite/src';
 import * as vega from 'vega/build-es5/vega';
 import { expressionInterpreter as vegaExpressionInterpreter } from 'vega-interpreter/build/vega-interpreter.module';
 
+const vegaLite = { compile, version };
+
 export { vega, vegaLite, vegaExpressionInterpreter };

src/plugins/vis_type_vega/public/test_utils/default.spec.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "title": "Event counts from all indexes",
   "data": {
     "url": {

src/plugins/vis_type_vega/public/test_utils/vegalite_graph.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "data": {
     "format": {"property": "aggregations.time_buckets.buckets"},
     "values": {

src/plugins/vis_type_vega/public/vega_visualization.test.js

@@ -53,7 +53,7 @@ jest.mock('./default_spec', () => ({
 
 jest.mock('./lib/vega', () => ({
   vega: jest.requireActual('vega'),
-  vegaLite: jest.requireActual('vega-lite'),
+  vegaLite: jest.requireActual('vega-lite/src'),
 }));
 
 // FLAKY: https://github.com/elastic/kibana/issues/71713

src/plugins/vis_type_vega/server/usage_collector/get_usage_collector.test.ts

@@ -44,7 +44,7 @@ const mockedSavedObjects = [
         visState: JSON.stringify({
           type: 'vega',
           params: {
-            spec: '{"$schema": "https://vega.github.io/schema/vega-lite/v4.json" }',
+            spec: '{"$schema": "https://vega.github.io/schema/vega-lite/v5.json" }',
           },
         }),
       },