[Canvas] Filters panel with filter group update functionality.

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx

@@ -10,7 +10,6 @@ import { get } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { KibanaThemeProvider } from '../../../../../../../src/plugins/kibana_react/public';
-import { syncFilterExpression } from '../../../../public/lib/sync_filter_expression';
 import { RendererFactory } from '../../../../types';
 import { StartInitializer } from '../../../plugin';
 import { DropdownFilter } from './component';
@@ -56,14 +55,6 @@ export const dropdownFilterFactory: StartInitializer<RendererFactory<Config>> =
       ) {
         filterExpression = '';
         handlers.setFilter(filterExpression);
-      } else if (filterExpression !== '') {
-        // NOTE: setFilter() will cause a data refresh, avoid calling unless required
-        // compare expression and filter, update filter if needed
-        const { changed, newAst } = syncFilterExpression(config, filterExpression, ['filterGroup']);
-
-        if (changed) {
-          handlers.setFilter(toExpression(newAst));
-        }
       }
 
       const commit = (commitValue: string) => {
@@ -79,7 +70,7 @@ export const dropdownFilterFactory: StartInitializer<RendererFactory<Config>> =
                 arguments: {
                   value: [commitValue],
                   column: [config.column],
-                  filterGroup: [config.filterGroup],
+                  ...(config.filterGroup ? { filterGroup: [config.filterGroup] } : {}),
                 },
               },
             ],

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/time_filter.tsx

@@ -32,14 +32,17 @@ export interface FilterMeta {
   start: string;
   /** End date string of filtered date range */
   end: string;
+  filterGroup: string;
 }
 
 function getFilterMeta(filter: string): FilterMeta {
   const ast = fromExpression(filter);
+
   const column = get(ast, 'chain[0].arguments.column[0]') as string;
   const start = get(ast, 'chain[0].arguments.from[0]') as string;
   const end = get(ast, 'chain[0].arguments.to[0]') as string;
-  return { column, start, end };
+  const filterGroup = get(ast, 'chain[0].arguments.filterGroup[0]') as string;
+  return { column, start, end, filterGroup };
 }
 
 export interface Props {
@@ -55,20 +58,22 @@ export interface Props {
 
 export const TimeFilter = ({ filter, commit, dateFormat, commonlyUsedRanges = [] }: Props) => {
   const setFilter =
-    (column: string) =>
+    (column: string, filterGroup: string) =>
     ({ start, end }: OnTimeChangeProps) => {
-      commit(`timefilter from="${start}" to=${end} column=${column}`);
+      const filterExpression = `timefilter from="${start}" to=${end} column=${column}`;
+      const filterGroupArg = filterGroup ? `filterGroup="${filterGroup}"` : '';
+      commit(`${filterExpression} ${filterGroupArg}`);
     };
 
-  const { column, start, end } = getFilterMeta(filter);
+  const { column, start, end, filterGroup } = getFilterMeta(filter);
 
   return (
     <div className="canvasTimeFilter">
       <EuiSuperDatePicker
         start={start}
         end={end}
         isPaused={false}
-        onTimeChange={setFilter(column)}
+        onTimeChange={setFilter(column, filterGroup)}
         showUpdateButton={false}
         dateFormat={dateFormat}
         commonlyUsedRanges={commonlyUsedRanges.length ? commonlyUsedRanges : defaultQuickRanges}

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/index.tsx

@@ -7,10 +7,8 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
-import { toExpression } from '@kbn/interpreter/common';
 import { UI_SETTINGS } from '../../../../../../../src/plugins/data/public';
 import { KibanaThemeProvider } from '../../../../../../../src/plugins/kibana_react/public';
-import { syncFilterExpression } from '../../../../public/lib/sync_filter_expression';
 import { RendererStrings } from '../../../../i18n';
 import { TimeFilter } from './components';
 import { StartInitializer } from '../../../plugin';
@@ -46,17 +44,6 @@ export const timeFilterFactory: StartInitializer<RendererFactory<Arguments>> = (
       if (filterExpression === undefined || filterExpression.indexOf('timefilter') !== 0) {
         filterExpression = defaultTimeFilterExpression;
         handlers.setFilter(filterExpression);
-      } else if (filterExpression !== '') {
-        // NOTE: setFilter() will cause a data refresh, avoid calling unless required
-        // compare expression and filter, update filter if needed
-        const { changed, newAst } = syncFilterExpression(config, filterExpression, [
-          'column',
-          'filterGroup',
-        ]);
-
-        if (changed) {
-          handlers.setFilter(toExpression(newAst));
-        }
       }
 
       ReactDOM.render(