[WIP] support automatic vega tooltips

package.json

@@ -208,6 +208,7 @@
     "vega-lib": "^3.2.1",
     "vega-lite": "^2.3.1",
     "vega-schema-url-parser": "1.0.0",
+    "vega-tooltip": "^0.7.0",
     "vision": "4.1.0",
     "webpack": "3.6.0",
     "webpack-merge": "4.1.0",

src/core_plugins/vega/public/data_model/vega_parser.js

@@ -67,6 +67,7 @@ export class VegaParser {
     this.hideWarnings = !!this._config.hideWarnings;
     this.useMap = this._config.type === 'map';
     this.renderer = this._config.renderer === 'svg' ? 'svg' : 'canvas';
+    this.tooltips = this._config.tooltips;
 
     this._setDefaultColors();
     this._parseControlPlacement(this._config);

src/core_plugins/vega/public/vega-tooltip.css

@@ -0,0 +1,47 @@
+.vg-tooltip {
+  visibility: hidden;
+  padding: 6px;
+  border-radius: 3px;
+  position: fixed;
+  z-index: 2000;
+  font-family: sans-serif;
+  font-size: 11px;
+
+  /* The default look of the tooltip is the same as .light-theme
+  but it can be overwritten by .dark-theme */
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid #d9d9d9;
+  color: black;
+}
+.vg-tooltip td.key, .vg-tooltip td.value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.vg-tooltip td.key {
+  color: #808080;
+  max-width: 150px;
+  text-align: right;
+  padding-right: 1px;
+}
+.vg-tooltip td.value {
+  max-width: 200px;
+  text-align: left;
+}
+
+/* Dark and light color themes */
+.vg-tooltip.dark-theme {
+  background-color: rgba(64, 64, 64, 0.9);
+  border: none;
+  color: white;
+}
+.vg-tooltip.dark-theme td.key {
+  color: #bfbfbf;
+}
+.vg-tooltip.light-theme {
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid #d9d9d9;
+  color: black;
+}
+.vg-tooltip.light-theme td.key {
+  color: #808080;
+}

src/core_plugins/vega/public/vega_type.js

@@ -9,6 +9,7 @@ import { VegaRequestHandlerProvider } from './vega_request_handler';
 import { VegaVisualizationProvider } from './vega_visualization';
 
 import './vega.less';
+import './vega-tooltip.css';
 
 // Editor-specific code
 import 'brace/mode/hjson';

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

@@ -1,4 +1,5 @@
 import * as vega from 'vega-lib';
+import { vega as tooltipVega, vegaLite as tooltipVegaLite } from 'vega-tooltip';
 import { VegaBaseView } from './vega_base_view';
 
 export class VegaView extends VegaBaseView {
@@ -23,5 +24,25 @@ export class VegaView extends VegaBaseView {
 
     await view.runAsync();
     this._view = view;
+
+
+
+    // TODO: move this to base
+
+
+    if (this._parser.tooltips) {
+      const opts = typeof this._parser.tooltips === 'object' ? this._parser.tooltips : undefined;
+
+      let tooltipObj;
+      if (this._parser.isVegaLite) {
+        tooltipObj = tooltipVegaLite(view, this._parser.vlspec, opts);
+      } else {
+        tooltipObj = tooltipVega(view, opts);
+      }
+
+      this._addDestroyHandler(() => {
+        tooltipObj.destroy();
+      });
+    }
   }
 }