From b17fa85eacc1f6dadf333c5e744954894856ed35 Mon Sep 17 00:00:00 2001
From: Vera Liu <vera.liu@airbnb.com>
Date: Mon, 27 Feb 2017 21:29:18 -0800
Subject: [PATCH] Changes based on comments

---
 .../explorev2/components/controls/Filter.jsx  | 31 ++++++++++++++-----
 .../components/controls/FilterControl.jsx     |  8 ++++-
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/superset/assets/javascripts/explorev2/components/controls/Filter.jsx b/superset/assets/javascripts/explorev2/components/controls/Filter.jsx
index 29c69d165b51b..263b29f9e804e 100644
--- a/superset/assets/javascripts/explorev2/components/controls/Filter.jsx
+++ b/superset/assets/javascripts/explorev2/components/controls/Filter.jsx
@@ -50,6 +50,21 @@ export default class Filter extends React.Component {
       });
     }
   }
+  switchFilterValue(prevFilter, nextOp) {
+    const prevOp = prevFilter.op;
+    let newVal = null;
+    if (arrayFilterOps.indexOf(prevOp) !== -1
+        && strFilterOps.indexOf(nextOp) !== -1) {
+      // switch from array to string
+      newVal = this.props.filter.val.length > 0 ? this.props.filter.val[0] : '';
+    }
+    if (strFilterOps.indexOf(prevOp) !== -1
+        && arrayFilterOps.indexOf(nextOp) !== -1) {
+      // switch from string to array
+      newVal = this.props.filter.val === '' ? [] : [this.props.filter.val];
+    }
+    return newVal;
+  }
   changeFilter(control, event) {
     let value = event;
     if (event && event.target) {
@@ -59,15 +74,15 @@ export default class Filter extends React.Component {
       value = event.value;
     }
     if (control === 'op') {
-      if (arrayFilterOps.indexOf(this.props.filter.op) !== -1
-        && strFilterOps.indexOf(value) !== -1) {
-        this.props.changeFilter('val', this.props.filter.val[0]);
-      } else if (strFilterOps.indexOf(this.props.filter.op) !== -1
-        && arrayFilterOps.indexOf(value) !== -1) {
-        this.props.changeFilter('val', [this.props.filter.val]);
+      const newVal = this.switchFilterValue(this.props.filter, value);
+      if (newVal) {
+        this.props.changeFilter(['op', 'val'], [value, newVal]);
+      } else {
+        this.props.changeFilter(control, value);
       }
+    } else {
+      this.props.changeFilter(control, value);
     }
-    this.props.changeFilter(control, value);
     if (control === 'col' && value !== null && this.props.datasource.filter_select) {
       this.fetchFilterValues(value);
     }
@@ -82,7 +97,7 @@ export default class Filter extends React.Component {
         this.fetchFilterValues(filter.col);
       }
     }
-    if (this.props.having || strFilterOps.indexOf(filter.op) !== -1) {
+    if (strFilterOps.indexOf(filter.op) !== -1) {
       // druid having filter or regex/==/!= filters
       return (
         <input
diff --git a/superset/assets/javascripts/explorev2/components/controls/FilterControl.jsx b/superset/assets/javascripts/explorev2/components/controls/FilterControl.jsx
index c81ff5f8e8dad..cac520a2c7b21 100644
--- a/superset/assets/javascripts/explorev2/components/controls/FilterControl.jsx
+++ b/superset/assets/javascripts/explorev2/components/controls/FilterControl.jsx
@@ -29,7 +29,13 @@ export default class FilterControl extends React.Component {
   changeFilter(index, control, value) {
     const newFilters = Object.assign([], this.props.value);
     const modifiedFilter = Object.assign({}, newFilters[index]);
-    modifiedFilter[control] = value;
+    if (typeof control === 'string') {
+      modifiedFilter[control] = value;
+    } else {
+      control.forEach((c, i) => {
+        modifiedFilter[c] = value[i];
+      });
+    }
     newFilters.splice(index, 1, modifiedFilter);
     this.props.onChange(newFilters);
   }