[filter_box] option to delay filtering with apply button (#2338)

* [filter_box] delayed filtering with apply button

* Remove lingering console.log statement

superset/assets/javascripts/explorev2/components/ChartContainer.jsx

@@ -101,10 +101,9 @@ class ChartContainer extends React.PureComponent {
 
       height: getHeight,
 
-      setFilter: () => {
-        // set filter according to data in store
-        // used in FilterBox.onChange()
-      },
+      setFilter: () => {},
+
+      addFilter: () => {},
 
       getFilters: () => (
         // return filter objects from viz.formData

superset/assets/javascripts/explorev2/stores/controls.jsx

@@ -840,6 +840,17 @@ export const controls = {
     description: 'Font size for the biggest value in the list',
   },
 
+  instant_filtering: {
+    type: 'CheckboxControl',
+    label: 'Instant Filtering',
+    renderTrigger: true,
+    default: true,
+    description: (
+      'Whether to apply filters as they change, or wait for' +
+      'users to hit an [Apply] button'
+    ),
+  },
+
   show_brush: {
     type: 'CheckboxControl',
     label: 'Range Filter',

superset/assets/javascripts/explorev2/stores/visTypes.js

@@ -607,7 +607,7 @@ const visTypes = {
       {
         label: null,
         controlSetRows: [
-          ['date_filter'],
+          ['date_filter', 'instant_filtering'],
           ['groupby'],
           ['metric'],
         ],

superset/assets/javascripts/modules/superset.js

@@ -244,11 +244,11 @@ const px = function () {
       resize() {
         this.render();
       },
-      addFilter(col, vals) {
-        controller.addFilter(sliceId, col, vals);
+      addFilter(col, vals, merge = true, refresh = true) {
+        controller.addFilter(sliceId, col, vals, merge, refresh);
       },
-      setFilter(col, vals) {
-        controller.setFilter(sliceId, col, vals);
+      setFilter(col, vals, refresh = true) {
+        controller.setFilter(sliceId, col, vals, refresh);
       },
       getFilters() {
         return controller.filters[sliceId];

superset/assets/visualizations/filter_box.jsx

@@ -6,12 +6,14 @@ import ReactDOM from 'react-dom';
 
 import Select from 'react-select';
 import '../stylesheets/react-select/select.less';
+import { Button } from 'react-bootstrap';
 
 import './filter_box.css';
 import { TIME_CHOICES } from './constants.js';
 
 const propTypes = {
   origSelectedValues: React.PropTypes.object,
+  instantFiltering: React.PropTypes.bool,
   filtersChoices: React.PropTypes.object,
   onChange: React.PropTypes.func,
   showDateFilter: React.PropTypes.bool,
@@ -21,6 +23,7 @@ const defaultProps = {
   origSelectedValues: {},
   onChange: () => {},
   showDateFilter: false,
+  instantFiltering: true,
 };
 
 class FilterBox extends React.Component {
@@ -28,8 +31,13 @@ class FilterBox extends React.Component {
     super(props);
     this.state = {
       selectedValues: props.origSelectedValues,
+      hasChanged: false,
     };
   }
+  clickApply() {
+    this.props.onChange(Object.keys(this.state.selectedValues)[0], [], true, true);
+    this.setState({ hasChanged: false });
+  }
   changeFilter(filter, options) {
     let vals = null;
     if (options) {
@@ -41,8 +49,8 @@ class FilterBox extends React.Component {
     }
     const selectedValues = Object.assign({}, this.state.selectedValues);
     selectedValues[filter] = vals;
-    this.setState({ selectedValues });
-    this.props.onChange(filter, vals);
+    this.setState({ selectedValues, hasChanged: true });
+    this.props.onChange(filter, vals, false, !this.props.instantFiltering);
   }
   render() {
     let dateFilter;
@@ -101,6 +109,16 @@ class FilterBox extends React.Component {
       <div>
         {dateFilter}
         {filters}
+        {this.props.instantFiltering &&
+          <Button
+            bsSize="small"
+            bsStyle="primary"
+            onClick={this.clickApply.bind(this)}
+            disabled={!this.state.hasChanged}
+          >
+            Apply
+          </Button>
+        }
       </div>
     );
   }
@@ -124,9 +142,10 @@ function filterBox(slice, payload) {
   ReactDOM.render(
     <FilterBox
       filtersChoices={filtersChoices}
-      onChange={slice.setFilter}
+      onChange={slice.addFilter}
       showDateFilter={fd.date_filter}
       origSelectedValues={slice.getFilters() || {}}
+      instantFiltering={fd.instant_filtering}
     />,
     document.getElementById(slice.containerId)
   );