diff --git a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx index 022de7f1ad0da..9c912da5bd1d1 100644 --- a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx +++ b/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 diff --git a/superset/assets/javascripts/explorev2/stores/controls.jsx b/superset/assets/javascripts/explorev2/stores/controls.jsx index 09578f5304b97..db5ca17847a6b 100644 --- a/superset/assets/javascripts/explorev2/stores/controls.jsx +++ b/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', diff --git a/superset/assets/javascripts/explorev2/stores/visTypes.js b/superset/assets/javascripts/explorev2/stores/visTypes.js index 7ee613166d040..6a970aed9e94e 100644 --- a/superset/assets/javascripts/explorev2/stores/visTypes.js +++ b/superset/assets/javascripts/explorev2/stores/visTypes.js @@ -607,7 +607,7 @@ const visTypes = { { label: null, controlSetRows: [ - ['date_filter'], + ['date_filter', 'instant_filtering'], ['groupby'], ['metric'], ], diff --git a/superset/assets/javascripts/modules/superset.js b/superset/assets/javascripts/modules/superset.js index aae2191a326c7..d310dbab2aff4 100644 --- a/superset/assets/javascripts/modules/superset.js +++ b/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]; diff --git a/superset/assets/visualizations/filter_box.jsx b/superset/assets/visualizations/filter_box.jsx index 6c11647881057..9a4c76451b3eb 100644 --- a/superset/assets/visualizations/filter_box.jsx +++ b/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 {
{dateFilter} {filters} + {this.props.instantFiltering && + + }
); } @@ -124,9 +142,10 @@ function filterBox(slice, payload) { ReactDOM.render( , document.getElementById(slice.containerId) );