[Feature anywhere] Add annotation click handler

src/plugins/vis_augmenter/public/test_constants.ts

@@ -5,6 +5,7 @@
 
 import { OpenSearchDashboardsDatatable } from '../../expressions/public';
 import { VIS_LAYER_COLUMN_TYPE, VisLayerTypes, HOVER_PARAM } from './';
+import { VisInteraction, VisInteractionEventHandlerName } from './vega/constants';
 
 const TEST_X_AXIS_ID = 'test-x-axis-id';
 const TEST_VALUE_AXIS_ID = 'test-value-axis-id';
@@ -457,7 +458,10 @@ const TEST_EVENTS_LAYER_SINGLE_VIS_LAYER = {
     filled: true,
     opacity: 1,
   },
-  transform: [{ filter: `datum['${TEST_PLUGIN_RESOURCE_ID}'] > 0` }],
+  transform: [
+    { filter: `datum['${TEST_PLUGIN_RESOURCE_ID}'] > 0` },
+    { calculate: `'${VisInteraction.POINT_IN_TIME_ANNOTATION}'`, as: 'annotationType' },
+  ],
   params: [{ name: HOVER_PARAM, select: { type: 'point', on: 'mouseover' } }],
   encoding: {
     x: {
@@ -503,6 +507,7 @@ const TEST_EVENTS_LAYER_MULTIPLE_VIS_LAYERS = {
     {
       filter: `datum['${TEST_PLUGIN_RESOURCE_ID}'] > 0 || datum['${TEST_PLUGIN_RESOURCE_ID_2}'] > 0`,
     },
+    { calculate: `'${VisInteraction.POINT_IN_TIME_ANNOTATION}'`, as: 'annotationType' },
   ],
 };
 
@@ -572,3 +577,23 @@ export const TEST_RESULT_SPEC_MULTIPLE_VIS_LAYERS = {
     TEST_EVENTS_LAYER_MULTIPLE_VIS_LAYERS,
   ],
 };
+
+export const TEST_RESULT_SPEC_WITH_VIS_INTERACTION_CONFIG = {
+  ...TEST_SPEC_NO_VIS_LAYERS,
+  config: {
+    ...TEST_SPEC_NO_VIS_LAYERS.config,
+    kibana: {
+      ...(TEST_SPEC_NO_VIS_LAYERS.config.kibana || {}),
+      visInteractions: [
+        {
+          event: 'click',
+          handlerName: VisInteractionEventHandlerName.POINT_IN_TIME_CLICK_EVENT_HANDLER,
+        },
+        {
+          event: 'mouseover',
+          handlerName: VisInteractionEventHandlerName.POINT_IN_TIME_HOVER_IN_EVENT_HANDLER,
+        },
+      ],
+    },
+  },
+};

src/plugins/vis_augmenter/public/vega/constants.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export enum VisInteraction {
+  POINT_IN_TIME_ANNOTATION = 'POINT_IN_TIME_DATA_POINT',
+}
+
+export enum VisInteractionEventHandlerName {
+  POINT_IN_TIME_CLICK_EVENT_HANDLER = 'visAugmenter.pointInTimeClickEventHandler',
+  POINT_IN_TIME_HOVER_IN_EVENT_HANDLER = 'visAugmenter.pointInTimeHoverInEventHandler',
+}

src/plugins/vis_augmenter/public/vega/helpers.test.ts

@@ -15,6 +15,7 @@ import {
   addMissingRowsToTableBounds,
   addPointInTimeEventsLayersToTable,
   addPointInTimeEventsLayersToSpec,
+  addPointInTimeInteractionsConfig,
 } from './helpers';
 import { VIS_LAYER_COLUMN_TYPE, VisLayerTypes, PointInTimeEventsVisLayer, VisLayer } from '../';
 import {
@@ -32,6 +33,7 @@ import {
   TEST_RESULT_SPEC_MULTIPLE_VIS_LAYERS,
   TEST_RESULT_SPEC_SINGLE_VIS_LAYER,
   TEST_RESULT_SPEC_SINGLE_VIS_LAYER_EMPTY,
+  TEST_RESULT_SPEC_WITH_VIS_INTERACTION_CONFIG,
   TEST_SPEC_MULTIPLE_VIS_LAYERS,
   TEST_SPEC_NO_VIS_LAYERS,
   TEST_SPEC_SINGLE_VIS_LAYER,
@@ -455,4 +457,13 @@ describe('helpers', function () {
       expect(returnSpec).toEqual(expectedSpec);
     });
   });
+
+  describe('addPointInTimeInteractionsConfig()', function () {
+    it('appends interactions config to the provided config from visualization spec', function () {
+      const expectedSpec = TEST_RESULT_SPEC_WITH_VIS_INTERACTION_CONFIG;
+      const testSpec = { ...TEST_SPEC_NO_VIS_LAYERS };
+      testSpec.config = addPointInTimeInteractionsConfig(TEST_SPEC_NO_VIS_LAYERS.config) as any;
+      expect(testSpec).toEqual(expectedSpec);
+    });
+  });
 });

src/plugins/vis_augmenter/public/vega/helpers.ts

@@ -5,6 +5,7 @@
 
 import moment from 'moment';
 import { cloneDeep, isEmpty, get } from 'lodash';
+import { Item, ScenegraphEvent } from 'vega';
 import {
   OpenSearchDashboardsDatatable,
   OpenSearchDashboardsDatatableColumn,
@@ -24,6 +25,7 @@ import {
   VisLayers,
   VisLayerTypes,
 } from '../';
+import { VisInteractionEventHandlerName, VisInteraction as VisAnnotationType } from './constants';
 
 // Given any visLayers, create a map to indicate which VisLayer types are present.
 // Convert to an array since ES6 Maps cannot be stringified.
@@ -314,7 +316,10 @@ export const addPointInTimeEventsLayersToSpec = (
       filled: true,
       opacity: 1,
     },
-    transform: [{ filter: generateVisLayerFilterString(visLayerColumnIds) }],
+    transform: [
+      { filter: generateVisLayerFilterString(visLayerColumnIds) },
+      { calculate: `'${VisAnnotationType.POINT_IN_TIME_ANNOTATION}'`, as: 'annotationType' },
+    ],
     params: [{ name: HOVER_PARAM, select: { type: 'point', on: 'mouseover' } }],
     encoding: {
       x: {
@@ -340,3 +345,58 @@ export const addPointInTimeEventsLayersToSpec = (
 
   return newSpec;
 };
+
+/**
+ * Interaction handling functions mapped by their action names.
+ */
+export const interactionHandlersByAction = {
+  [VisInteractionEventHandlerName.POINT_IN_TIME_CLICK_EVENT_HANDLER]: (
+    _event: ScenegraphEvent,
+    item?: Item | null
+  ) => {
+    if (isPointInTimeAnnotation(item)) {
+      // TODO: Show the events flyout
+    }
+  },
+  [VisInteractionEventHandlerName.POINT_IN_TIME_HOVER_IN_EVENT_HANDLER]: (
+    _event: ScenegraphEvent,
+    item?: Item | null
+  ) => {
+    if (isPointInTimeAnnotation(item)) {
+      // TODO: Show the custom tooltip
+    }
+  },
+};
+
+/**
+ * Updating the vega-lite spec to add interaction config that is used to add event handlers on the visualization view.
+ * Note: Since, we cannot have handler functions added directly to the spec object as it is stringified,
+ * we pass the handler names as part of the config and use the @see interactionHandlersByAction to get the corresponding
+ * handler when required.
+ */
+export const addPointInTimeInteractionsConfig = (config: object) => {
+  const kibana = get(config, 'kibana', {});
+  const withInteractionsConfig = {
+    ...kibana,
+    visInteractions: [
+      ...(kibana.visInteractions || []),
+      {
+        event: 'click',
+        handlerName: VisInteractionEventHandlerName.POINT_IN_TIME_CLICK_EVENT_HANDLER,
+      },
+      {
+        event: 'mouseover',
+        handlerName: VisInteractionEventHandlerName.POINT_IN_TIME_HOVER_IN_EVENT_HANDLER,
+      },
+    ],
+  };
+
+  return {
+    ...config,
+    kibana: withInteractionsConfig,
+  };
+};
+
+export const isPointInTimeAnnotation = (item?: Item | null) => {
+  return item?.datum?.annotationType === VisAnnotationType.POINT_IN_TIME_ANNOTATION;
+};

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

@@ -108,13 +108,19 @@ type ContextVarsObjectProps =
 
 type ToolTipPositions = 'top' | 'right' | 'bottom' | 'left';
 
+export interface VisInteractionDescriptor {
+  event: string;
+  handlerName: string;
+}
+
 export interface OpenSearchDashboards {
   controlsLocation: ControlsLocation;
   controlsDirection: ControlsDirection;
   hideWarnings: boolean;
   type: string;
   renderer: Renderer;
   visibleVisLayers?: Map<VisLayerTypes, boolean>;
+  visInteractions?: VisInteractionDescriptor[];
 }
 
 export interface VegaSpec {

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

@@ -57,6 +57,7 @@ import {
   ControlsLocation,
   ControlsDirection,
   OpenSearchDashboards,
+  VisInteractionDescriptor,
 } from './types';
 
 // Set default single color to match other OpenSearch Dashboards visualizations
@@ -94,6 +95,7 @@ export class VegaParser {
   filters: Bool;
   timeCache: TimeCache;
   visibleVisLayers: Map<VisLayerTypes, boolean>;
+  visInteractions?: VisInteractionDescriptor[];
 
   constructor(
     spec: VegaSpec | string,
@@ -409,6 +411,9 @@ The URL is an identifier only. OpenSearch Dashboards and your browser will never
         if (result.visibleVisLayers !== undefined && Array.isArray(result.visibleVisLayers)) {
           result.visibleVisLayers = new Map<VisLayerTypes, boolean>(result.visibleVisLayers);
         }
+        if (result.visInteractions) {
+          this.visInteractions = result.visInteractions;
+        }
       }
     }
     return result || {};

src/plugins/vis_type_vega/public/expressions/line_vega_spec_fn.ts

@@ -18,6 +18,7 @@ import {
   addPointInTimeEventsLayersToTable,
   addPointInTimeEventsLayersToSpec,
   enableVisLayersInSpecConfig,
+  addPointInTimeInteractionsConfig,
 } from '../../../vis_augmenter/public';
 import { formatDatatable, createSpecFromDatatable } from './helpers';
 import { VegaVisualizationDependencies } from '../plugin';
@@ -85,6 +86,7 @@ export const createLineVegaSpecFn = (
     if (!isEmpty(pointInTimeEventsVisLayers) && dimensions.x !== null) {
       spec = addPointInTimeEventsLayersToSpec(table, dimensions, spec);
       spec.config = enableVisLayersInSpecConfig(spec, pointInTimeEventsVisLayers);
+      spec.config = addPointInTimeInteractionsConfig(spec.config);
     }
     return JSON.stringify(spec);
   },

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

@@ -40,6 +40,7 @@ import { opensearchFilters } from '../../../data/public';
 
 import { getEnableExternalUrls, getData } from '../services';
 import { extractIndexPatternsFromSpec } from '../lib/extract_index_pattern';
+import { interactionHandlersByAction } from '../../../vis_augmenter/public';
 
 vega.scheme('euiPaletteColorBlind', euiPaletteColorBlind());
 
@@ -297,6 +298,14 @@ export class VegaBaseView {
         this._addDestroyHandler(() => tthandler.hideTooltip());
       }
 
+      if (this._parser.visInteractions) {
+        this._parser.visInteractions.forEach(({ handlerName, event }) => {
+          if (interactionHandlersByAction[handlerName]) {
+            view.addEventListener(event, interactionHandlersByAction[handlerName]);
+          }
+        });
+      }
+
       return view.runAsync(); // Allows callers to await rendering
     }
   }