[7.x] [Lens] Create filters on click with bar, line, area charts (#57261)

src/plugins/embeddable/public/lib/triggers/triggers.ts

@@ -25,10 +25,10 @@ export interface EmbeddableContext {
 }
 
 export interface EmbeddableVisTriggerContext {
-  embeddable: IEmbeddable;
-  timeFieldName: string;
+  embeddable?: IEmbeddable;
+  timeFieldName?: string;
   data: {
-    e: MouseEvent;
+    e?: MouseEvent;
     data: unknown;
   };
 }

x-pack/legacy/plugins/lens/public/app_plugin/app.test.tsx

@@ -77,6 +77,20 @@ function createMockFilterManager() {
   };
 }
 
+function createMockTimefilter() {
+  const unsubscribe = jest.fn();
+
+  return {
+    getTime: jest.fn(() => ({ from: 'now-7d', to: 'now' })),
+    setTime: jest.fn(),
+    getTimeUpdate$: () => ({
+      subscribe: ({ next }: { next: () => void }) => {
+        return unsubscribe;
+      },
+    }),
+  };
+}
+
 describe('Lens App', () => {
   let frame: jest.Mocked<EditorFrameInstance>;
   let core: ReturnType<typeof coreMock['createStart']>;
@@ -108,10 +122,7 @@ describe('Lens App', () => {
         query: {
           filterManager: createMockFilterManager(),
           timefilter: {
-            timefilter: {
-              getTime: jest.fn(() => ({ from: 'now-7d', to: 'now' })),
-              setTime: jest.fn(),
-            },
+            timefilter: createMockTimefilter(),
           },
         },
         indexPatterns: {

x-pack/legacy/plugins/lens/public/app_plugin/app.tsx

@@ -94,8 +94,23 @@ export function App({
         trackUiEvent('app_filters_updated');
       },
     });
+
+    const timeSubscription = data.query.timefilter.timefilter.getTimeUpdate$().subscribe({
+      next: () => {
+        const currentRange = data.query.timefilter.timefilter.getTime();
+        setState(s => ({
+          ...s,
+          dateRange: {
+            fromDate: currentRange.from,
+            toDate: currentRange.to,
+          },
+        }));
+      },
+    });
+
     return () => {
       filterSubscription.unsubscribe();
+      timeSubscription.unsubscribe();
     };
   }, []);
 

x-pack/legacy/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx

@@ -14,8 +14,11 @@ import {
   IIndexPattern,
   TimefilterContract,
 } from 'src/plugins/data/public';
+
 import { Subscription } from 'rxjs';
 import { ReactExpressionRendererType } from '../../../../../../../src/plugins/expressions/public';
+import { VIS_EVENT_TO_TRIGGER } from '../../../../../../../src/legacy/core_plugins/visualizations/public/np_ready/public/embeddable/events';
+
 import {
   Embeddable as AbstractEmbeddable,
   EmbeddableOutput,
@@ -90,6 +93,18 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
       .subscribe(this.reload.bind(this));
   }
 
+  public supportedTriggers() {
+    switch (this.savedVis.visualizationType) {
+      case 'lnsXY':
+        // TODO: case 'lnsDatatable':
+        return [VIS_EVENT_TO_TRIGGER.filter];
+
+      case 'lnsMetric':
+      default:
+        return [];
+    }
+  }
+
   onContainerStateChanged(containerState: LensEmbeddableInput) {
     const cleanedFilters = containerState.filters
       ? containerState.filters.filter(filter => !filter.meta.disabled)

x-pack/legacy/plugins/lens/public/plugin.tsx

@@ -28,6 +28,8 @@ import {
   stopReportManager,
   trackUiEvent,
 } from './lens_ui_telemetry';
+
+import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
 import { KibanaLegacySetup } from '../../../../../src/plugins/kibana_legacy/public';
 import { NOT_INTERNATIONALIZED_PRODUCT_NAME } from '../../../../plugins/lens/common';
 import {
@@ -40,7 +42,6 @@ import { EmbeddableSetup, EmbeddableStart } from '../../../../../src/plugins/emb
 import { EditorFrameStart } from './types';
 import { getLensAliasConfig } from './vis_type_alias';
 import { VisualizationsSetup } from './legacy_imports';
-
 export interface LensPluginSetupDependencies {
   kibanaLegacy: KibanaLegacySetup;
   expressions: ExpressionsSetup;
@@ -56,6 +57,7 @@ export interface LensPluginStartDependencies {
   data: DataPublicPluginStart;
   embeddable: EmbeddableStart;
   expressions: ExpressionsStart;
+  uiActions: UiActionsStart;
 }
 
 export const isRisonObject = (value: RisonValue): value is RisonObject => {
@@ -217,6 +219,7 @@ export class LensPlugin {
 
   start(core: CoreStart, startDependencies: LensPluginStartDependencies) {
     this.createEditorFrame = this.editorFrameService.start(core, startDependencies).createInstance;
+    this.xyVisualization.start(core, startDependencies);
   }
 
   stop() {

x-pack/legacy/plugins/lens/public/xy_visualization/index.ts

@@ -5,21 +5,27 @@
  */
 
 import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
-import { CoreSetup, IUiSettingsClient } from 'src/core/public';
+import { CoreSetup, IUiSettingsClient, CoreStart } from 'src/core/public';
 import moment from 'moment-timezone';
 import { FormatFactory } from '../legacy_imports';
 import { ExpressionsSetup } from '../../../../../../src/plugins/expressions/public';
 import { xyVisualization } from './xy_visualization';
 import { xyChart, getXyChartRenderer } from './xy_expression';
 import { legendConfig, xConfig, layerConfig } from './types';
 import { EditorFrameSetup } from '../types';
+import { UiActionsStart } from '../../../../../../src/plugins/ui_actions/public';
+import { setExecuteTriggerActions } from './services';
 
 export interface XyVisualizationPluginSetupPlugins {
   expressions: ExpressionsSetup;
   formatFactory: FormatFactory;
   editorFrame: EditorFrameSetup;
 }
 
+interface XyVisualizationPluginStartPlugins {
+  uiActions: UiActionsStart;
+}
+
 function getTimeZone(uiSettings: IUiSettingsClient) {
   const configuredTimeZone = uiSettings.get('dateFormat:tz');
   if (configuredTimeZone === 'Browser') {
@@ -53,4 +59,7 @@ export class XyVisualization {
 
     editorFrame.registerVisualization(xyVisualization);
   }
+  start(core: CoreStart, { uiActions }: XyVisualizationPluginStartPlugins) {
+    setExecuteTriggerActions(uiActions.executeTriggerActions);
+  }
 }

x-pack/legacy/plugins/lens/public/xy_visualization/services.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { createGetterSetter } from '../../../../../../src/plugins/kibana_utils/public';
+import { UiActionsStart } from '../../../../../../src/plugins/ui_actions/public';
+
+export const [getExecuteTriggerActions, setExecuteTriggerActions] = createGetterSetter<
+  UiActionsStart['executeTriggerActions']
+>('executeTriggerActions');