Added filter in ControlPanelsContainer for explore V2 (#1647)

* Added filter in ControlPanelsContainer

* Move function for getting url params object to utils

* Fixed python test

* Move Filter to separate component

* Added specs and made changes based on comments

* Moved specs to right folder

superset/assets/javascripts/explorev2/actions/exploreActions.js

@@ -1,6 +1,5 @@
 /* eslint camelcase: 0 */
 const $ = window.$ = require('jquery');
-
 const FAVESTAR_BASE_URL = '/superset/favstar/slice';
 
 export const SET_FIELD_OPTIONS = 'SET_FIELD_OPTIONS';
@@ -89,19 +88,9 @@ export function removeFilter(filter) {
   return { type: REMOVE_FILTER, filter };
 }
 
-export const CHANGE_FILTER_FIELD = 'CHANGE_FILTER_FIELD';
+export const CHANGE_FILTER = 'CHANGE_FILTER';
-export function changeFilterField(filter, field) {
+export function changeFilter(filter, field, value) {
-  return { type: CHANGE_FILTER_FIELD, filter, field };
+  return { type: CHANGE_FILTER, filter, field, value };
-}
-
-export const CHANGE_FILTER_OP = 'CHANGE_FILTER_OP';
-export function changeFilterOp(filter, op) {
-  return { type: CHANGE_FILTER_OP, filter, op };
-}
-
-export const CHANGE_FILTER_VALUE = 'CHANGE_FILTER_VALUE';
-export function changeFilterValue(filter, value) {
-  return { type: CHANGE_FILTER_VALUE, filter, value };
 }
 
 export const SET_FIELD_VALUE = 'SET_FIELD_VALUE';

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

@@ -4,9 +4,10 @@ import { bindActionCreators } from 'redux';
 import * as actions from '../actions/exploreActions';
 import { connect } from 'react-redux';
 import { Panel, Alert } from 'react-bootstrap';
-import { visTypes, sectionsToRender } from '../stores/store';
+import { visTypes, sectionsToRender, commonControlPanelSections } from '../stores/store';
 import ControlPanelSection from './ControlPanelSection';
 import FieldSetRow from './FieldSetRow';
+import Filters from './Filters';
 
 const propTypes = {
   datasource_type: PropTypes.string.isRequired,
@@ -44,6 +45,12 @@ class ControlPanelsContainer extends React.Component {
     return sectionsToRender(this.props.form_data.viz_type, this.props.datasource_type);
   }
 
+  filterSectionsToRender() {
+    const filterSections = this.props.datasource_type === 'table' ?
+      [commonControlPanelSections.filters[0]] : commonControlPanelSections.filters;
+    return filterSections;
+  }
+
   fieldOverrides() {
     const viz = visTypes[this.props.form_data.viz_type];
     return viz.fieldOverrides;
@@ -86,7 +93,20 @@ class ControlPanelsContainer extends React.Component {
                   ))}
                 </ControlPanelSection>
               ))}
-              {/* TODO: add filters section */}
+              {this.filterSectionsToRender().map((section) => (
+                <ControlPanelSection
+                  key={section.label}
+                  label={section.label}
+                  tooltip={section.description}
+                >
+                  <Filters
+                    filterColumnOpts={[]}
+                    filters={this.props.form_data.filters}
+                    actions={this.props.actions}
+                    prefix={section.prefix}
+                  />
+                </ControlPanelSection>
+              ))}
             </div>
           </div>
         }

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

@@ -8,6 +8,8 @@ import ControlPanelsContainer from './ControlPanelsContainer';
 import SaveModal from './SaveModal';
 import QueryAndSaveBtns from '../../explore/components/QueryAndSaveBtns';
 import { autoQueryFields } from '../stores/store';
+import { getParamObject } from '../../modules/utils.js';
+
 const $ = require('jquery');
 
 const propTypes = {
@@ -47,18 +49,7 @@ class ExploreViewContainer extends React.Component {
   }
 
   onQuery(form_data) {
-    const data = {};
+    const data = getParamObject(form_data, this.props.datasource_type);
-    Object.keys(form_data).forEach((field) => {
-    // filter out null fields
-      if (form_data[field] !== null && field !== 'datasource') {
-        data[field] = form_data[field];
-      }
-    });
-    // V2 tag temporarily for updating url
-    // Todo: remove after launch
-    data.V2 = true;
-    data.datasource_id = this.props.form_data.datasource;
-    data.datasource_type = this.props.datasource_type;
     this.queryFormData(data);
 
     const params = $.param(data, true);

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

@@ -0,0 +1,92 @@
+import React from 'react';
+// import { Tab, Row, Col, Nav, NavItem } from 'react-bootstrap';
+import Select from 'react-select';
+import { Button } from 'react-bootstrap';
+
+const propTypes = {
+  actions: React.PropTypes.object.isRequired,
+  filterColumnOpts: React.PropTypes.array,
+  prefix: React.PropTypes.string,
+  filter: React.PropTypes.object.isRequired,
+};
+
+const defaultProps = {
+  filterColumnOpts: [],
+  prefix: 'flt',
+};
+
+export default class Filter extends React.Component {
+  constructor(props) {
+    super(props);
+    const opChoices = this.props.prefix === 'flt' ?
+      ['in', 'not in'] : ['==', '!=', '>', '<', '>=', '<='];
+    this.state = {
+      opChoices,
+    };
+  }
+  changeCol(filter, colOpt) {
+    const val = (colOpt) ? colOpt.value : null;
+    this.props.actions.changeFilter(filter, 'col', val);
+  }
+  changeOp(filter, opOpt) {
+    const val = (opOpt) ? opOpt.value : null;
+    this.props.actions.changeFilter(filter, 'op', val);
+  }
+  changeValue(filter, event) {
+    this.props.actions.changeFilter(filter, 'value', event.target.value);
+  }
+  removeFilter(filter) {
+    this.props.actions.removeFilter(filter);
+  }
+  render() {
+    return (
+      <div>
+        <div className="row space-1">
+          <Select
+            className="col-lg-12"
+            multi={false}
+            name="select-column"
+            placeholder="Select column"
+            options={this.props.filterColumnOpts.map((o) => ({ value: o, label: o }))}
+            value={this.props.filter.col}
+            autosize={false}
+            onChange={this.changeCol.bind(this, this.props.filter)}
+          />
+        </div>
+        <div className="row space-1">
+          <Select
+            className="col-lg-4"
+            multi={false}
+            name="select-op"
+            placeholder="Select operator"
+            options={this.state.opChoices.map((o) => ({ value: o, label: o }))}
+            value={this.props.filter.op}
+            autosize={false}
+            onChange={this.changeOp.bind(this, this.props.filter)}
+          />
+          <div className="col-lg-6">
+            <input
+              type="text"
+              onChange={this.changeValue.bind(this, this.props.filter)}
+              value={this.props.filter.value}
+              className="form-control input-sm"
+              placeholder="Filter value"
+            />
+          </div>
+          <div className="col-lg-2">
+            <Button
+              id="remove-button"
+              bsSize="small"
+              onClick={this.removeFilter.bind(this, this.props.filter)}
+            >
+              <i className="fa fa-minus" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Filter.propTypes = propTypes;
+Filter.defaultProps = defaultProps;

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

@@ -1,109 +1,63 @@
 import React from 'react';
 // import { Tab, Row, Col, Nav, NavItem } from 'react-bootstrap';
-import Select from 'react-select';
+import Filter from './Filter';
 import { Button } from 'react-bootstrap';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import * as actions from '../actions/exploreActions';
 import shortid from 'shortid';
 
 const propTypes = {
-  actions: React.PropTypes.object,
+  actions: React.PropTypes.object.isRequired,
   filterColumnOpts: React.PropTypes.array,
   filters: React.PropTypes.array,
+  prefix: React.PropTypes.string,
 };
 
 const defaultProps = {
   filterColumnOpts: [],
   filters: [],
+  prefix: 'flt',
 };
 
 class Filters extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      opOpts: ['in', 'not in'],
-    };
-  }
-  changeField(filter, fieldOpt) {
-    const val = (fieldOpt) ? fieldOpt.value : null;
-    this.props.actions.changeFilterField(filter, val);
-  }
-  changeOp(filter, opOpt) {
-    const val = (opOpt) ? opOpt.value : null;
-    this.props.actions.changeFilterOp(filter, val);
-  }
-  changeValue(filter, value) {
-    this.props.actions.changeFilterValue(filter, value);
-  }
-  removeFilter(filter) {
-    this.props.actions.removeFilter(filter);
-  }
   addFilter() {
     this.props.actions.addFilter({
       id: shortid.generate(),
-      field: null,
+      prefix: this.props.prefix,
+      col: null,
       op: null,
       value: null,
     });
   }
   render() {
-    const filters = this.props.filters.map((filter) => (
+    const filters = [];
-      <div>
+    this.props.filters.forEach((filter) => {
-        <Select
+      // only display filters with current prefix
-          className="row"
+      if (filter.prefix === this.props.prefix) {
-          multi={false}
+        filters.push(
-          name="select-column"
+          <Filter
-          placeholder="Select column"
+            filterColumnOpts={this.props.filterColumnOpts}
-          options={this.props.filterColumnOpts}
+            actions={this.props.actions}
-          value={filter.field}
+            prefix={this.props.prefix}
-          autosize={false}
+            filter={filter}
-          onChange={this.changeField.bind(this, filter)}
-        />
-        <div className="row">
-          <Select
-            className="col-sm-3"
-            multi={false}
-            name="select-op"
-            placeholder="Select operator"
-            options={this.state.opOpts.map((o) => ({ value: o, label: o }))}
-            value={filter.op}
-            autosize={false}
-            onChange={this.changeOp.bind(this, filter)}
           />
-          <div className="col-sm-6">
+        );
-            <input
+      }
-              type="text"
+    });
-              onChange={this.changeValue.bind(this, filter)}
+    return (
-              className="form-control input-sm"
+      <div>
-              placeholder="Filter value"
+        {filters}
-            />
+        <div className="row space-2">
-          </div>
+          <div className="col-lg-2">
-          <div className="col-sm-3">
             <Button
-              bsStyle="primary"
+              id="add-button"
-              onClick={this.removeFilter.bind(this, filter)}
+              bsSize="sm"
+              onClick={this.addFilter.bind(this)}
             >
-              <i className="fa fa-minus" />
+              <i className="fa fa-plus" /> &nbsp; Add Filter
             </Button>
           </div>
         </div>
       </div>
-      )
-    );
-    return (
-      <div className="panel space-1">
-        <div className="panel-header">Filters</div>
-        <div className="panel-body">
-          {filters}
-          <Button
-            bsStyle="primary"
-            onClick={this.addFilter.bind(this)}
-          >
-            <i className="fa fa-plus" />Add Filter
-          </Button>
-        </div>
-      </div>
     );
   }
 }
@@ -114,14 +68,9 @@ Filters.defaultProps = defaultProps;
 function mapStateToProps(state) {
   return {
     filterColumnOpts: state.filterColumnOpts,
-    filters: state.filters,
+    filters: state.viz.form_data.filters,
   };
 }
 
-function mapDispatchToProps(dispatch) {
+export { Filters };
-  return {
+export default connect(mapStateToProps, () => ({}))(Filters);
-    actions: bindActionCreators(actions, dispatch),
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Filters);

superset/assets/javascripts/explorev2/components/SaveModal.js

@@ -4,6 +4,7 @@ import $ from 'jquery';
 import { Modal, Alert, Button, Radio } from 'react-bootstrap';
 import Select from 'react-select';
 import { connect } from 'react-redux';
+import { getParamObject } from '../../modules/utils.js';
 
 const propTypes = {
   can_edit: PropTypes.bool,
@@ -57,10 +58,8 @@ class SaveModal extends React.Component {
   saveOrOverwrite(gotodash) {
     this.setState({ alert: null });
     this.props.actions.removeSaveModalAlert();
-    const params = {};
+    const params = getParamObject(this.props.form_data, this.props.datasource_type);
     const sliceParams = {};
-    params.datasource_id = this.props.form_data.datasource;
-    params.datasource_type = this.props.datasource_type;
     params.datasource_name = this.props.form_data.datasource_name;
 
     let sliceName = null;
@@ -76,12 +75,6 @@ class SaveModal extends React.Component {
       sliceParams.slice_name = this.props.form_data.slice_name;
     }
 
-    Object.keys(this.props.form_data).forEach((field) => {
-      if (this.props.form_data[field] !== null && field !== 'slice_name') {
-        params[field] = this.props.form_data[field];
-      }
-    });
-
     const addToDash = this.state.addToDash;
     sliceParams.add_to_dash = addToDash;
     let dashboard = null;
@@ -105,7 +98,6 @@ class SaveModal extends React.Component {
       default:
         dashboard = null;
     }
-    params.V2 = true;
     sliceParams.goto_dash = gotodash;
     const baseUrl = '/superset/explore/' +
       `${this.props.datasource_type}/${this.props.form_data.datasource}/`;

superset/assets/javascripts/explorev2/index.jsx

@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ExploreViewContainer from './components/ExploreViewContainer';
@@ -28,6 +29,35 @@ const bootstrappedState = Object.assign(initialState(bootstrapData.viz.form_data
 bootstrappedState.viz.form_data.datasource = parseInt(bootstrapData.datasource_id, 10);
 bootstrappedState.viz.form_data.datasource_name = bootstrapData.datasource_name;
 
+function parseFilters(form_data, prefix = 'flt') {
+  const filters = [];
+  for (let i = 0; i < 10; i++) {
+    if (form_data[`${prefix}_col_${i}`] && form_data[`${prefix}_op_${i}`]) {
+      filters.push({
+        prefix,
+        col: form_data[`${prefix}_col_${i}`],
+        op: form_data[`${prefix}_op_${i}`],
+        value: form_data[`${prefix}_eq_${i}`],
+      });
+    }
+    /* eslint no-param-reassign: 0 */
+    delete form_data[`${prefix}_col_${i}`];
+    delete form_data[`${prefix}_op_${i}`];
+    delete form_data[`${prefix}_eq_${i}`];
+  }
+  return filters;
+}
+
+function getFilters(form_data, datasource_type) {
+  if (datasource_type === 'table') {
+    return parseFilters(form_data);
+  }
+  return parseFilters(form_data).concat(parseFilters(form_data, 'having'));
+}
+
+bootstrappedState.viz.form_data.filters =
+  getFilters(bootstrappedState.viz.form_data, bootstrapData.datasource_type);
+
 const store = createStore(exploreReducer, bootstrappedState,
   compose(applyMiddleware(thunk))
 );

superset/assets/javascripts/explorev2/reducers/exploreReducer.js

@@ -43,9 +43,12 @@ export const exploreReducer = function (state, action) {
       const fieldNames = Object.keys(optionsByFieldName);
 
       fieldNames.forEach((fieldName) => {
-        newState.fields[fieldName].choices = optionsByFieldName[fieldName];
+        if (fieldName === 'filterable_cols') {
+          newState.filterColumnOpts = optionsByFieldName[fieldName];
+        } else {
+          newState.fields[fieldName].choices = optionsByFieldName[fieldName];
+        }
       });
-
       return Object.assign({}, state, newState);
     },
 
@@ -53,19 +56,32 @@ export const exploreReducer = function (state, action) {
       return Object.assign({}, state, { filterColumnOpts: action.filterColumnOpts });
     },
     [actions.ADD_FILTER]() {
-      return addToArr(state, 'filters', action.filter);
+      const newFormData = addToArr(state.viz.form_data, 'filters', action.filter);
+      const newState = Object.assign(
+        {},
+        state,
+        { viz: Object.assign({}, state.viz, { form_data: newFormData }) }
+      );
+      return newState;
     },
     [actions.REMOVE_FILTER]() {
-      return removeFromArr(state, 'filters', action.filter);
+      const newFormData = removeFromArr(state.viz.form_data, 'filters', action.filter);
+      return Object.assign(
+        {},
+        state,
+        { viz: Object.assign({}, state.viz, { form_data: newFormData }) }
+      );
     },
-    [actions.CHANGE_FILTER_FIELD]() {
+    [actions.CHANGE_FILTER]() {
-      return alterInArr(state, 'filters', action.filter, { field: action.field });
+      const changes = {};
-    },
+      changes[action.field] = action.value;
-    [actions.CHANGE_FILTER_OP]() {
+      const newFormData = alterInArr(
-      return alterInArr(state, 'filters', action.filter, { op: action.op });
+        state.viz.form_data, 'filters', action.filter, changes);
-    },
+      return Object.assign(
-    [actions.CHANGE_FILTER_VALUE]() {
+        {},
-      return alterInArr(state, 'filters', action.filter, { value: action.value });
+        state,
+        { viz: Object.assign({}, state.viz, { form_data: newFormData }) }
+      );
     },
     [actions.SET_FIELD_VALUE]() {
       const newFormData = action.key === 'datasource' ?

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

@@ -105,6 +105,20 @@ export const commonControlPanelSections = {
       ],
     },
   ],
+  filters: [
+    {
+      label: 'Filters',
+      description: 'Filters are defined using comma delimited strings as in <US,FR,Other>' +
+        'Leave the value field empty to filter empty strings or nulls' +
+        'For filters with comma in values, wrap them in single quotes' +
+        "as in <NY, 'Tahoe, CA', DC>",
+    },
+    {
+      label: 'Result Filters',
+      description: 'The filters to apply after post-aggregation.' +
+        'Leave the value field empty to filter empty strings or nulls',
+    },
+  ],
 };
 
 export const visTypes = {
@@ -1688,6 +1702,7 @@ export function defaultFormData(vizType = 'table', datasourceType = 'table') {
     slice_name: null,
     slice_id: null,
     datasource_name: null,
+    filters: [],
   };
   const sections = sectionsToRender(vizType, datasourceType);
   sections.forEach((section) => {
@@ -1722,6 +1737,7 @@ export function initialState(vizType = 'table') {
     isDatasourceMetaLoading: false,
     datasources: null,
     datasource_type: null,
+    filterColumnOpts: [],
     fields,
     viz: defaultViz(vizType),
     isStarred: false,

superset/assets/javascripts/modules/utils.js

@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
 const d3 = require('d3');
 const $ = require('jquery');
 
@@ -152,3 +153,35 @@ export function slugify(string) {
           .replace(/[\s\W-]+/g, '-') // replace spaces, non-word chars, w/ a single dash (-)
           .replace(/-$/, ''); // remove last floating dash
 }
+
+function formatFilters(filters) {
+  // outputs an object of url params of filters
+  // prefix can be 'flt' or 'having'
+  const params = {};
+  for (let i = 0; i < filters.length; i++) {
+    const filter = filters[i];
+    params[`${filter.prefix}_col_${i + 1}`] = filter.col;
+    params[`${filter.prefix}_op_${i + 1}`] = filter.op;
+    params[`${filter.prefix}_eq_${i + 1}`] = filter.value;
+  }
+  return params;
+}
+
+export function getParamObject(form_data, datasource_type) {
+  const data = {
+    // V2 tag temporarily for updating url
+    // Todo: remove after launch
+    V2: true,
+    datasource_id: form_data.datasource,
+    datasource_type,
+  };
+  Object.keys(form_data).forEach((field) => {
+    // filter out null fields
+    if (form_data[field] !== null && field !== 'datasource') {
+      data[field] = form_data[field];
+    }
+  });
+  const filterParams = formatFilters(form_data.filters);
+  Object.assign(data, filterParams);
+  return data;
+}

superset/assets/spec/javascripts/explorev2/actions_spec.js

@@ -15,4 +15,15 @@ describe('reducers', () => {
       actions.setFieldValue('table', 'show_legend'));
     expect(newState.viz.form_data.show_legend).to.equal(false);
   });
+  it('adds a filter given a new filter', () => {
+    const newState = exploreReducer(initialState('table'),
+      actions.addFilter({
+        id: 1,
+        prefix: 'flt',
+        col: null,
+        op: null,
+        value: null,
+      }));
+    expect(newState.viz.form_data.filters).to.have.length(1);
+  });
 });

superset/assets/spec/javascripts/explorev2/components/Filter_spec.js

@@ -0,0 +1,41 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import Select from 'react-select';
+import { Button } from 'react-bootstrap';
+import { expect } from 'chai';
+import { describe, it, beforeEach } from 'mocha';
+import { shallow } from 'enzyme';
+import Filter from '../../../../javascripts/explorev2/components/Filter';
+
+const defaultProps = {
+  actions: {},
+  filterColumnOpts: ['country_name'],
+  filter: {
+    id: 1,
+    prefix: 'flt',
+    col: 'country_name',
+    eq: 'in',
+    value: 'China',
+  },
+  prefix: 'flt',
+};
+
+describe('Filter', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<Filter {...defaultProps} />);
+  });
+
+  it('renders Filters', () => {
+    expect(
+      React.isValidElement(<Filter {...defaultProps} />)
+    ).to.equal(true);
+  });
+
+  it('renders two select, one button and one input', () => {
+    expect(wrapper.find(Select)).to.have.lengthOf(2);
+    expect(wrapper.find(Button)).to.have.lengthOf(1);
+    expect(wrapper.find('input')).to.have.lengthOf(1);
+  });
+});

superset/assets/spec/javascripts/explorev2/components/Filters_spec.js

@@ -0,0 +1,40 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { expect } from 'chai';
+import { describe, it, beforeEach } from 'mocha';
+import { shallow } from 'enzyme';
+import { Filters } from '../../../../javascripts/explorev2/components/Filters';
+import Filter from '../../../../javascripts/explorev2/components/Filter';
+
+const defaultProps = {
+  filterColumnOpts: ['country_name'],
+  filters: [
+    {
+      id: 1,
+      prefix: 'flt',
+      col: 'country_name',
+      eq: 'in',
+      value: 'China',
+    }],
+  prefix: 'flt',
+};
+
+describe('Filters', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<Filters {...defaultProps} />);
+  });
+
+  it('renders Filters', () => {
+    expect(
+      React.isValidElement(<Filters {...defaultProps} />)
+    ).to.equal(true);
+  });
+
+  it('renders one filter', () => {
+    expect(wrapper.find(Filter)).to.have.lengthOf(1);
+    expect(wrapper.find(Button)).to.have.lengthOf(1);
+  });
+});

superset/views.py

@@ -2401,6 +2401,7 @@ class Superset(BaseSupersetView):
             'size': datasource.metrics_combo,
             'mapbox_label': all_cols,
             'point_radius': [(c, c) for c in (["Auto"] + datasource.column_names)],
+            'filterable_cols': datasource.filterable_column_names,
         }
 
         return Response(

tests/core_tests.py

@@ -430,7 +430,7 @@ class CoreTests(SupersetTestCase):
         url = '/superset/fetch_datasource_metadata?datasource_type=table&' \
               'datasource_id=1'
         resp = json.loads(self.get_resp(url))
-        self.assertEqual(len(resp['field_options']), 20)
+        self.assertEqual(len(resp['field_options']), 21)
 
     def test_fetch_all_tables(self):
         self.login(username='admin')