[Lens] Allow detaching from global time range (#125563)

* allow detaching from global time range * add test * fix time field recognition * fix tests Co-authored-by: Kibana Machine <[email protected]>
elastic · Feb 21, 2022 · 1f60b7b · 1f60b7b
1 parent 5d17346
commit 1f60b7b
Show file tree

Hide file tree

Showing 18 changed files with 616 additions and 216 deletions.
diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx
@@ -202,9 +202,6 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
         const cell = e[0][0];
         const { x, y } = cell.datum;
 
-        const xAxisFieldName = xAxisColumn?.meta?.field;
-        const timeFieldName = isTimeBasedSwimLane ? xAxisFieldName : '';
-
         const points = [
           {
             row: table.rows.findIndex((r) => r[xAxisColumn.id] === x),
@@ -229,35 +226,21 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
             value: point.value,
             table,
           })),
-          timeFieldName,
         };
         onClickValue(context);
       },
-      [
-        isTimeBasedSwimLane,
-        onClickValue,
-        table,
-        xAxisColumn?.id,
-        xAxisColumn?.meta?.field,
-        xAxisColumnIndex,
-        yAxisColumn,
-        yAxisColumnIndex,
-      ]
+      [onClickValue, table, xAxisColumn?.id, xAxisColumnIndex, yAxisColumn, yAxisColumnIndex]
     );
 
     const onBrushEnd = useCallback(
       (e: HeatmapBrushEvent) => {
         const { x, y } = e;
 
-        const xAxisFieldName = xAxisColumn?.meta?.field;
-        const timeFieldName = isTimeBasedSwimLane ? xAxisFieldName : '';
-
         if (isTimeBasedSwimLane) {
           const context: BrushEvent['data'] = {
             range: x as number[],
             table,
             column: xAxisColumnIndex,
-            timeFieldName,
           };
           onSelectRange(context);
         } else {
@@ -289,7 +272,6 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
               value: point.value,
               table,
             })),
-            timeFieldName,
           };
           onClickValue(context);
         }

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_actions.test.ts b/x-pack/plugins/lens/public/datatable_visualization/components/table_actions.test.ts
@@ -82,7 +82,6 @@ describe('Table actions', () => {
           },
         ],
         negate: false,
-        timeFieldName: 'a',
       });
     });
 
@@ -102,7 +101,6 @@ describe('Table actions', () => {
           },
         ],
         negate: true,
-        timeFieldName: 'a',
       });
     });
 
@@ -122,7 +120,6 @@ describe('Table actions', () => {
           },
         ],
         negate: false,
-        timeFieldName: 'a',
       });
     });
 
@@ -142,7 +139,6 @@ describe('Table actions', () => {
           },
         ],
         negate: true,
-        timeFieldName: undefined,
       });
     });
   });
@@ -173,7 +169,6 @@ describe('Table actions', () => {
           },
         ],
         negate: false,
-        timeFieldName: 'a',
       });
     });
 
@@ -202,7 +197,6 @@ describe('Table actions', () => {
           },
         ],
         negate: true,
-        timeFieldName: undefined,
       });
     });
 
@@ -274,7 +268,6 @@ describe('Table actions', () => {
           },
         ],
         negate: false,
-        timeFieldName: undefined,
       });
     });
   });

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_actions.ts b/x-pack/plugins/lens/public/datatable_visualization/components/table_actions.ts
@@ -75,10 +75,6 @@ export const createGridFilterHandler =
     onClickValue: (data: LensFilterEvent['data']) => void
   ) =>
   (field: string, value: unknown, colIndex: number, rowIndex: number, negate: boolean = false) => {
-    const col = tableRef.current.columns[colIndex];
-    const isDate = col.meta?.type === 'date';
-    const timeFieldName = negate && isDate ? undefined : col?.meta?.field;
-
     const data: LensFilterEvent['data'] = {
       negate,
       data: [
@@ -89,7 +85,6 @@ export const createGridFilterHandler =
           table: tableRef.current,
         },
       ],
-      timeFieldName,
     };
 
     onClickValue(data);
@@ -106,11 +101,6 @@ export const createTransposeColumnFilterHandler =
   ) => {
     if (!untransposedDataRef.current) return;
     const originalTable = Object.values(untransposedDataRef.current.tables)[0];
-    const timeField = bucketValues.find(
-      ({ originalBucketColumn }) => originalBucketColumn.meta.type === 'date'
-    )?.originalBucketColumn;
-    const isDate = Boolean(timeField);
-    const timeFieldName = negate && isDate ? undefined : timeField?.meta?.field;
 
     const data: LensFilterEvent['data'] = {
       negate,
@@ -126,7 +116,6 @@ export const createTransposeColumnFilterHandler =
           table: originalTable,
         };
       }),
-      timeFieldName,
     };
 
     onClickValue(data);

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx
@@ -210,7 +210,6 @@ describe('DatatableComponent', () => {
           },
         ],
         negate: true,
-        timeFieldName: 'a',
       },
     });
   });
@@ -256,7 +255,6 @@ describe('DatatableComponent', () => {
           },
         ],
         negate: false,
-        timeFieldName: 'b',
       },
     });
   });
@@ -341,7 +339,6 @@ describe('DatatableComponent', () => {
           },
         ],
         negate: false,
-        timeFieldName: 'a',
       },
     });
   });

diff --git a/...ns/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.test.tsx b/...ns/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.test.tsx
@@ -204,11 +204,11 @@ describe('workspace_panel', () => {
 
     const onEvent = expressionRendererMock.mock.calls[0][0].onEvent!;
 
-    const eventData = {};
+    const eventData = { myData: true, table: { rows: [], columns: [] }, column: 0 };
     onEvent({ name: 'brush', data: eventData });
 
     expect(uiActionsMock.getTrigger).toHaveBeenCalledWith(VIS_EVENT_TO_TRIGGER.brush);
-    expect(trigger.exec).toHaveBeenCalledWith({ data: eventData });
+    expect(trigger.exec).toHaveBeenCalledWith({ data: { ...eventData, timeFieldName: undefined } });
   });
 
   it('should push add current data table to state on data$ emitting value', async () => {

diff --git a/...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
@@ -68,6 +68,7 @@ import {
   selectSearchSessionId,
 } from '../../../state_management';
 import type { LensInspector } from '../../../lens_inspector_service';
+import { inferTimeField } from '../../../utils';
 
 export interface WorkspacePanelProps {
   visualizationMap: VisualizationMap;
@@ -250,12 +251,18 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
       }
       if (isLensBrushEvent(event)) {
         plugins.uiActions.getTrigger(VIS_EVENT_TO_TRIGGER[event.name]).exec({
-          data: event.data,
+          data: {
+            ...event.data,
+            timeFieldName: inferTimeField(event.data),
+          },
         });
       }
       if (isLensFilterEvent(event)) {
         plugins.uiActions.getTrigger(VIS_EVENT_TO_TRIGGER[event.name]).exec({
-          data: event.data,
+          data: {
+            ...event.data,
+            timeFieldName: inferTimeField(event.data),
+          },
         });
       }
       if (isLensEditEvent(event) && activeVisualization?.onEditAction) {

diff --git a/x-pack/plugins/lens/public/embeddable/embeddable.test.tsx b/x-pack/plugins/lens/public/embeddable/embeddable.test.tsx
@@ -821,12 +821,15 @@ describe('embeddable', () => {
 
     const onEvent = expressionRenderer.mock.calls[0][0].onEvent!;
 
-    const eventData = {};
+    const eventData = { myData: true, table: { rows: [], columns: [] }, column: 0 };
     onEvent({ name: 'brush', data: eventData });
 
     expect(getTrigger).toHaveBeenCalledWith(VIS_EVENT_TO_TRIGGER.brush);
     expect(trigger.exec).toHaveBeenCalledWith(
-      expect.objectContaining({ data: eventData, embeddable: expect.anything() })
+      expect.objectContaining({
+        data: { ...eventData, timeFieldName: undefined },
+        embeddable: expect.anything(),
+      })
     );
   });
 
@@ -1006,7 +1009,10 @@ describe('embeddable', () => {
 
     expressionRenderer = jest.fn(({ onEvent }) => {
       setTimeout(() => {
-        onEvent?.({ name: 'filter', data: { pings: false } });
+        onEvent?.({
+          name: 'filter',
+          data: { pings: false, table: { rows: [], columns: [] }, column: 0 },
+        });
       }, 10);
 
       return null;
@@ -1048,7 +1054,7 @@ describe('embeddable', () => {
 
     await new Promise((resolve) => setTimeout(resolve, 20));
 
-    expect(onFilter).toHaveBeenCalledWith({ pings: false });
+    expect(onFilter).toHaveBeenCalledWith(expect.objectContaining({ pings: false }));
     expect(onFilter).toHaveBeenCalledTimes(1);
   });
 
@@ -1057,7 +1063,10 @@ describe('embeddable', () => {
 
     expressionRenderer = jest.fn(({ onEvent }) => {
       setTimeout(() => {
-        onEvent?.({ name: 'brush', data: { range: [0, 1] } });
+        onEvent?.({
+          name: 'brush',
+          data: { range: [0, 1], table: { rows: [], columns: [] }, column: 0 },
+        });
       }, 10);
 
       return null;
@@ -1099,7 +1108,7 @@ describe('embeddable', () => {
 
     await new Promise((resolve) => setTimeout(resolve, 20));
 
-    expect(onBrushEnd).toHaveBeenCalledWith({ range: [0, 1] });
+    expect(onBrushEnd).toHaveBeenCalledWith(expect.objectContaining({ range: [0, 1] }));
     expect(onBrushEnd).toHaveBeenCalledTimes(1);
   });
 

diff --git a/x-pack/plugins/lens/public/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/embeddable/embeddable.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Filter } from '@kbn/es-query';
-import type {
+import {
   ExecutionContextSearch,
   Query,
   TimefilterContract,
@@ -70,6 +70,7 @@ import type { ErrorMessage } from '../editor_frame_service/types';
 import { getLensInspectorService, LensInspector } from '../lens_inspector_service';
 import { SharingSavedObjectProps } from '../types';
 import type { SpacesPluginStart } from '../../../spaces/public';
+import { inferTimeField } from '../utils';
 
 export type LensSavedObjectAttributes = Omit<Document, 'savedObjectId' | 'type'>;
 
@@ -529,7 +530,10 @@ export class Embeddable
     }
     if (isLensBrushEvent(event)) {
       this.deps.getTrigger(VIS_EVENT_TO_TRIGGER[event.name]).exec({
-        data: event.data,
+        data: {
+          ...event.data,
+          timeFieldName: event.data.timeFieldName || inferTimeField(event.data),
+        },
         embeddable: this,
       });
 
@@ -539,7 +543,10 @@ export class Embeddable
     }
     if (isLensFilterEvent(event)) {
       this.deps.getTrigger(VIS_EVENT_TO_TRIGGER[event.name]).exec({
-        data: event.data,
+        data: {
+          ...event.data,
+          timeFieldName: event.data.timeFieldName || inferTimeField(event.data),
+        },
         embeddable: this,
       });
       if (this.input.onFilter) {