[Feature anywhere] Add annotation click handler

src/plugins/ui_actions/public/index.ts

@@ -61,13 +61,16 @@ export {
  visualizeFieldTrigger,
  VISUALIZE_GEO_FIELD_TRIGGER,
  visualizeGeoFieldTrigger,
+ EXTERNAL_ACTION_TRIGGER,
+ externalActionTrigger,
 } from './triggers';
 export {
  TriggerContextMapping,
  TriggerId,
  ActionContextMapping,
  ActionType,
  VisualizeFieldContext,
+ ExternalActionContext,
  ACTION_VISUALIZE_FIELD,
  ACTION_VISUALIZE_GEO_FIELD,
  ACTION_VISUALIZE_LENS_FIELD,

src/plugins/ui_actions/public/triggers/external_action_trigger.ts

@@ -0,0 +1,44 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { i18n } from '@osd/i18n';
+import { Trigger } from '.';
+
+export const EXTERNAL_ACTION_TRIGGER = 'EXTERNAL_ACTION_TRIGGER';
+export const externalActionTrigger: Trigger<'EXTERNAL_ACTION_TRIGGER'> = {
+ id: EXTERNAL_ACTION_TRIGGER,
+ title: i18n.translate('uiActions.triggers.externalActionTitle', {
+ defaultMessage: 'Single click',
+ }),
+ description: i18n.translate('uiActions.triggers.externalActionDescription', {
+ defaultMessage:
+ 'A data point click on the visualization used to trigger external action like show flyout, etc.',
+ }),
+};

src/plugins/ui_actions/public/triggers/index.ts

@@ -36,4 +36,5 @@ export * from './value_click_trigger';
 export * from './apply_filter_trigger';
 export * from './visualize_field_trigger';
 export * from './visualize_geo_field_trigger';
+export * from './external_action_trigger';
 export * from './default_trigger';

src/plugins/ui_actions/public/types.ts

@@ -36,6 +36,7 @@ import {
  APPLY_FILTER_TRIGGER,
  VISUALIZE_FIELD_TRIGGER,
  VISUALIZE_GEO_FIELD_TRIGGER,
+ EXTERNAL_ACTION_TRIGGER,
  DEFAULT_TRIGGER,
 } from './triggers';
 import type { RangeSelectContext, ValueClickContext } from '../../embeddable/public';
@@ -51,6 +52,10 @@ export interface VisualizeFieldContext {
  contextualFields?: string[];
 }
 
+export interface ExternalActionContext {
+ data: any;
+}
+
 export type TriggerId = keyof TriggerContextMapping;
 
 export type BaseContext = object;
@@ -63,6 +68,7 @@ export interface TriggerContextMapping {
  [APPLY_FILTER_TRIGGER]: ApplyGlobalFilterActionContext;
  [VISUALIZE_FIELD_TRIGGER]: VisualizeFieldContext;
  [VISUALIZE_GEO_FIELD_TRIGGER]: VisualizeFieldContext;
+ [EXTERNAL_ACTION_TRIGGER]: ExternalActionContext;
 }
 
 const DEFAULT_ACTION = '';

src/plugins/vis_augmenter/opensearch_dashboards.json

@@ -3,5 +3,5 @@
  "version": "opensearchDashboards",
  "server": true,
  "ui": true,
- "requiredPlugins": ["data", "savedObjects", "opensearchDashboardsUtils", "expressions"]
+ "requiredPlugins": ["data", "savedObjects", "opensearchDashboardsUtils", "expressions", "uiActions"]
 }

src/plugins/vis_augmenter/public/actions/external_action_action.ts

@@ -0,0 +1,58 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ActionByType, createAction, ExternalActionContext } from '../../../ui_actions/public';
+import { isPointInTimeAnnotation } from '../vega';
+
+export type ExternalActionActionContext = ExternalActionContext;
+export const ACTION_EXTERNAL_ACTION = 'ACTION_EXTERNAL_ACTION';
+
+declare module '../../../ui_actions/public' {
+ export interface ActionContextMapping {
+ [ACTION_EXTERNAL_ACTION]: ExternalActionActionContext;
+ }
+}
+
+export function createExternalActionAction(): ActionByType<typeof ACTION_EXTERNAL_ACTION> {
+ return createAction<typeof ACTION_EXTERNAL_ACTION>({
+ type: ACTION_EXTERNAL_ACTION,
+ id: ACTION_EXTERNAL_ACTION,
+ shouldAutoExecute: async () => true,
+ execute: async (context: ExternalActionActionContext) => {
+ if (isPointInTimeAnnotation(context.data.item)) {
+ if (context.data.event === 'click') {
+ // TODO: show events flyout
+ } else if (context.data.event === 'mouseover') {
+ // TODO: show custom tooltip
+ }
+ }
+ },
+ });
+}

src/plugins/vis_augmenter/public/plugin.ts

@@ -9,6 +9,12 @@ import { DataPublicPluginSetup, DataPublicPluginStart } from '../../data/public'
 import { visLayers } from './expressions';
 import { setSavedAugmentVisLoader } from './services';
 import { createSavedAugmentVisLoader, SavedAugmentVisLoader } from './saved_augment_vis';
+import {
+ UiActionsSetup,
+ EXTERNAL_ACTION_TRIGGER,
+ externalActionTrigger,
+} from '../../ui_actions/public';
+import { createExternalActionAction } from './actions/external_action_action';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface VisAugmenterSetup {}
@@ -20,6 +26,7 @@ export interface VisAugmenterStart {
 export interface VisAugmenterSetupDeps {
  data: DataPublicPluginSetup;
  expressions: ExpressionsSetup;
+ uiActions: UiActionsSetup;
 }
 
 export interface VisAugmenterStartDeps {
@@ -33,9 +40,15 @@ export class VisAugmenterPlugin
 
  public setup(
  core: CoreSetup<VisAugmenterStartDeps, VisAugmenterStart>,
- { data, expressions }: VisAugmenterSetupDeps
+ { data, expressions, uiActions }: VisAugmenterSetupDeps
  ): VisAugmenterSetup {
  expressions.registerType(visLayers);
+ try {
+ uiActions.registerTrigger(externalActionTrigger);
+ uiActions.addTriggerAction(EXTERNAL_ACTION_TRIGGER, createExternalActionAction());
+ } catch (error: any) {
+ // NYI
+ }
  return {};
  }
 

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 { VisAnnotationType } from './vega/constants';
 
 const TEST_X_AXIS_ID = 'test-x-axis-id';
 const TEST_X_AXIS_ID_DIRTY = 'test.x.axis.id';
@@ -490,7 +491,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: `'${VisAnnotationType.POINT_IN_TIME_ANNOTATION}'`, as: 'annotationType' },
+ ],
  params: [{ name: HOVER_PARAM, select: { type: 'point', on: 'mouseover' } }],
  encoding: {
  x: {
@@ -536,6 +540,7 @@ const TEST_EVENTS_LAYER_MULTIPLE_VIS_LAYERS = {
  {
  filter: `datum['${TEST_PLUGIN_RESOURCE_ID}'] > 0 || datum['${TEST_PLUGIN_RESOURCE_ID_2}'] > 0`,
  },
+ { calculate: `'${VisAnnotationType.POINT_IN_TIME_ANNOTATION}'`, as: 'annotationType' },
  ],
 };
 

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

@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export enum VisAnnotationType {
+ POINT_IN_TIME_ANNOTATION = 'POINT_IN_TIME_ANNOTATION',
+}

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

@@ -32,6 +32,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,

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

@@ -5,6 +5,7 @@
 
 import moment from 'moment';
 import { cloneDeep, isEmpty, get } from 'lodash';
+import { Item } from 'vega';
 import {
  OpenSearchDashboardsDatatable,
  OpenSearchDashboardsDatatableColumn,
@@ -24,6 +25,7 @@ import {
  VisLayers,
  VisLayerTypes,
 } from '../';
+import { 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,7 @@ export const addPointInTimeEventsLayersToSpec = (
 
  return newSpec;
 };
+
+export const isPointInTimeAnnotation = (item?: Item | null) => {
+ return item?.datum?.annotationType === VisAnnotationType.POINT_IN_TIME_ANNOTATION;
+};

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

@@ -76,6 +76,7 @@ export class VegaBaseView {
  this._serviceSettings = opts.serviceSettings;
  this._filterManager = opts.filterManager;
  this._applyFilter = opts.applyFilter;
+ this._triggerExternalAction = opts.externalAction;
  this._timefilter = opts.timefilter;
  this._view = null;
  this._vegaViewConfig = null;
@@ -297,6 +298,15 @@ export class VegaBaseView {
  this._addDestroyHandler(() => tthandler.hideTooltip());
  }
 
+ ['click', 'mouseover', 'mouseout'].forEach((eventName) => {
+ view.addEventListener(eventName, (_event, item) => {
+ this._triggerExternalAction({
+ event: eventName,
+ item,
+ });
+ });
+ });
+
  return view.runAsync(); // Allows callers to await rendering
  }
  }

src/plugins/vis_type_vega/public/vega_visualization.js

@@ -90,6 +90,7 @@ export const createVegaVisualization = ({ getServiceSettings }) =>
  serviceSettings,
  filterManager,
  timefilter,
+ externalAction: this._vis.API.events.externalAction,
  };
 
  if (vegaParser.useMap) {

src/plugins/visualizations/public/embeddable/events.ts

@@ -32,16 +32,19 @@ import {
  APPLY_FILTER_TRIGGER,
  SELECT_RANGE_TRIGGER,
  VALUE_CLICK_TRIGGER,
+ EXTERNAL_ACTION_TRIGGER,
 } from '../../../ui_actions/public';
 
 export interface VisEventToTrigger {
  ['applyFilter']: typeof APPLY_FILTER_TRIGGER;
  ['brush']: typeof SELECT_RANGE_TRIGGER;
  ['filter']: typeof VALUE_CLICK_TRIGGER;
+ ['externalAction']: typeof EXTERNAL_ACTION_TRIGGER;
 }
 
 export const VIS_EVENT_TO_TRIGGER: VisEventToTrigger = {
  applyFilter: APPLY_FILTER_TRIGGER,
  brush: SELECT_RANGE_TRIGGER,
  filter: VALUE_CLICK_TRIGGER,
+ externalAction: EXTERNAL_ACTION_TRIGGER,
 };

src/plugins/visualizations/public/expressions/vis.ts

@@ -55,6 +55,7 @@ export interface ExprVisAPIEvents {
  filter: (data: any) => void;
  brush: (data: any) => void;
  applyFilter: (data: any) => void;
+ externalAction: (data: any) => void;
 }
 
 export interface ExprVisAPI {
@@ -99,6 +100,10 @@ export class ExprVis extends EventEmitter {
  if (!this.eventsSubject) return;
  this.eventsSubject.next({ name: 'applyFilter', data });
  },
+ externalAction: (data: any) => {
+ if (!this.eventsSubject) return;
+ this.eventsSubject.next({ name: 'externalAction', data });
+ },
  },
  };
  }