Drilldowns for TSVB / Vega

Closes: elastic#60611
alexwizp · Aug 12, 2020 · 7f93b50 · 7f93b50
1 parent 178afd7
commit 7f93b50
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 28 deletions.
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js b/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js
@@ -50,7 +50,7 @@ export class VisEditor extends Component {
       visFields: props.visFields,
       extractedIndexPatterns: [''],
     };
-    this.onBrush = createBrushHandler(getDataStart().query.timefilter.timefilter);
+    this.onBrush = createBrushHandler(this.props.vis);
     this.visDataSubject = new Rx.BehaviorSubject(this.props.visData);
     this.visData$ = this.visDataSubject.asObservable().pipe(share());
 

diff --git a/...lication/lib/create_brush_handler.test.js → ...lication/lib/create_brush_handler.test.ts b/...lication/lib/create_brush_handler.test.js → ...lication/lib/create_brush_handler.test.ts
@@ -18,28 +18,37 @@
  */
 
 import { createBrushHandler } from './create_brush_handler';
-import moment from 'moment';
+import { ExprVis } from '../../../../visualizations/public';
 
 describe('brushHandler', () => {
-  let mockTimefilter;
-  let onBrush;
+  let onBrush: ReturnType<typeof createBrushHandler>;
+  let vis: ExprVis;
 
   beforeEach(() => {
-    mockTimefilter = {
-      time: {},
-      setTime: function (time) {
-        this.time = time;
+    vis = ({
+      API: {
+        events: {
+          applyFilter: jest.fn(),
+        },
       },
-    };
-    onBrush = createBrushHandler(mockTimefilter);
+    } as unknown) as ExprVis;
+
+    onBrush = createBrushHandler(vis);
   });
 
-  it('returns brushHandler() that updates timefilter', () => {
-    const from = '2017-01-01T00:00:00Z';
-    const to = '2017-01-01T00:10:00Z';
-    onBrush(from, to);
-    expect(mockTimefilter.time.from).toEqual(moment(from).toISOString());
-    expect(mockTimefilter.time.to).toEqual(moment(to).toISOString());
-    expect(mockTimefilter.time.mode).toEqual('absolute');
+  test('returns brushHandler() should updates timefilter through vis.API.events.brush', () => {
+    const gte = '2017-01-01T00:00:00Z';
+    const lte = '2017-01-01T00:10:00Z';
+
+    onBrush(gte, lte);
+
+    expect(vis.API.events.applyFilter).toHaveBeenCalledWith({
+      timeFieldName: '*',
+      filters: [
+        {
+          range: { '*': { gte: '2017-01-01T00:00:00Z', lte: '2017-01-01T00:10:00Z' } },
+        },
+      ],
+    });
   });
 });
diff --git a/...c/application/lib/create_brush_handler.js → ...c/application/lib/create_brush_handler.ts b/...c/application/lib/create_brush_handler.js → ...c/application/lib/create_brush_handler.ts
@@ -17,14 +17,20 @@
  * under the License.
  */
 
-import moment from 'moment';
+import { ExprVis } from '../../../../visualizations/public';
 
-const TIME_MODE = 'absolute';
-
-export const createBrushHandler = (timefilter) => (from, to) => {
-  timefilter.setTime({
-    from: moment(from).toISOString(),
-    to: moment(to).toISOString(),
-    mode: TIME_MODE,
+export const createBrushHandler = (vis: ExprVis) => (gte: string, lte: string) => {
+  return vis.API.events.applyFilter({
+    timeFieldName: '*',
+    filters: [
+      {
+        range: {
+          '*': {
+            gte,
+            lte,
+          },
+        },
+      },
+    ],
   });
 };
diff --git a/src/plugins/vis_type_timeseries/public/metrics_type.ts b/src/plugins/vis_type_timeseries/public/metrics_type.ts
@@ -25,6 +25,7 @@ import { EditorController } from './application';
 // @ts-ignore
 import { PANEL_TYPES } from '../common/panel_types';
 import { VisEditor } from './application/components/vis_editor_lazy';
+import { VIS_EVENT_TO_TRIGGER } from '../../visualizations/public';
 
 export const metricsVisDefinition = {
   name: 'metrics',
@@ -78,6 +79,9 @@ export const metricsVisDefinition = {
     showIndexSelection: false,
   },
   requestHandler: metricsRequestHandler,
+  getSupportedTriggers: () => {
+    return [VIS_EVENT_TO_TRIGGER.applyFilter];
+  },
   inspectorAdapters: {},
   responseHandler: 'none',
 };
diff --git a/src/plugins/vis_type_vega/public/vega_type.ts b/src/plugins/vis_type_vega/public/vega_type.ts
@@ -27,6 +27,7 @@ import { createVegaRequestHandler } from './vega_request_handler';
 import { createVegaVisualization } from './vega_visualization';
 import { getDefaultSpec } from './default_spec';
 import { createInspectorAdapters } from './vega_inspector';
+import { VIS_EVENT_TO_TRIGGER } from '../../visualizations/public';
 
 export const createVegaTypeDefinition = (dependencies: VegaVisualizationDependencies) => {
   const requestHandler = createVegaRequestHandler(dependencies);
@@ -54,6 +55,9 @@ export const createVegaTypeDefinition = (dependencies: VegaVisualizationDependen
       showQueryBar: true,
       showFilterBar: true,
     },
+    getSupportedTriggers: () => {
+      return [VIS_EVENT_TO_TRIGGER.applyFilter];
+    },
     stage: 'experimental',
     inspectorAdapters: createInspectorAdapters,
   };

diff --git a/src/plugins/vis_type_vega/public/vega_view/vega_base_view.js b/src/plugins/vis_type_vega/public/vega_view/vega_base_view.js
@@ -63,6 +63,7 @@ export class VegaBaseView {
     this._parser = opts.vegaParser;
     this._serviceSettings = opts.serviceSettings;
     this._filterManager = opts.filterManager;
+    this._vis = opts.vis;
     this._timefilter = opts.timefilter;
     this._findIndex = opts.findIndex;
     this._view = null;
@@ -263,7 +264,8 @@ export class VegaBaseView {
   async addFilterHandler(query, index) {
     const indexId = await this._findIndex(index);
     const filter = esFilters.buildQueryFilter(query, indexId);
-    this._filterManager.addFilters(filter);
+
+    this._vis.API.events.applyFilter({ filters: [filter] });
   }
 
   /**
@@ -298,7 +300,22 @@ export class VegaBaseView {
    * @param {number|string|Date} end
    */
   setTimeFilterHandler(start, end) {
-    this._timefilter.setTime(VegaBaseView._parseTimeRange(start, end));
+    const { from, to, mode } = VegaBaseView._parseTimeRange(start, end);
+
+    this._vis.API.events.applyFilter({
+      timeFieldName: '*',
+      filters: [
+        {
+          range: {
+            '*': {
+              mode,
+              gte: from,
+              lte: to,
+            },
+          },
+        },
+      ],
+    });
   }
 
   /**

diff --git a/src/plugins/vis_type_vega/public/vega_visualization.js b/src/plugins/vis_type_vega/public/vega_visualization.js
@@ -106,6 +106,7 @@ export const createVegaVisualization = ({ serviceSettings }) =>
         const { timefilter } = this.dataPlugin.query.timefilter;
         const vegaViewParams = {
           parentEl: this._el,
+          vis: this._vis,
           vegaParser,
           serviceSettings,
           filterManager,

diff --git a/src/plugins/visualizations/public/embeddable/events.ts b/src/plugins/visualizations/public/embeddable/events.ts
@@ -17,14 +17,20 @@
  * under the License.
  */
 
-import { SELECT_RANGE_TRIGGER, VALUE_CLICK_TRIGGER } from '../../../../plugins/ui_actions/public';
+import {
+  APPLY_FILTER_TRIGGER,
+  SELECT_RANGE_TRIGGER,
+  VALUE_CLICK_TRIGGER,
+} from '../../../../plugins/ui_actions/public';
 
 export interface VisEventToTrigger {
+  ['applyFilter']: typeof APPLY_FILTER_TRIGGER;
   ['brush']: typeof SELECT_RANGE_TRIGGER;
   ['filter']: typeof VALUE_CLICK_TRIGGER;
 }
 
 export const VIS_EVENT_TO_TRIGGER: VisEventToTrigger = {
+  applyFilter: APPLY_FILTER_TRIGGER,
   brush: SELECT_RANGE_TRIGGER,
   filter: VALUE_CLICK_TRIGGER,
 };
diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts b/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts
@@ -309,6 +309,16 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
           return;
         }
 
+        if (event.name === 'applyFilter') {
+          const context = {
+            embeddable: this,
+            timeFieldName: this.vis.data.indexPattern?.timeFieldName!,
+            ...event.data,
+          };
+
+          getUiActions().getTrigger(VIS_EVENT_TO_TRIGGER.applyFilter).exec(context);
+        }
+
         if (!this.input.disableTriggers) {
           const triggerId =
             event.name === 'brush' ? VIS_EVENT_TO_TRIGGER.brush : VIS_EVENT_TO_TRIGGER.filter;

diff --git a/src/plugins/visualizations/public/expressions/vis.ts b/src/plugins/visualizations/public/expressions/vis.ts
@@ -43,6 +43,7 @@ export interface ExprVisState {
 export interface ExprVisAPIEvents {
   filter: (data: any) => void;
   brush: (data: any) => void;
+  applyFilter: (data: any) => void;
 }
 
 export interface ExprVisAPI {
@@ -83,6 +84,10 @@ export class ExprVis extends EventEmitter {
           if (!this.eventsSubject) return;
           this.eventsSubject.next({ name: 'brush', data });
         },
+        applyFilter: (data: any) => {
+          if (!this.eventsSubject) return;
+          this.eventsSubject.next({ name: 'applyFilter', data });
+        },
       },
     };
   }