From 184134e8404af0dc4d6a9b4675aac24d4d68d901 Mon Sep 17 00:00:00 2001
From: Vera Liu <vera.liu@airbnb.com>
Date: Fri, 7 Oct 2016 13:23:20 -0700
Subject: [PATCH] Maded modifications based on comments:

---
 .../explorev2/components/ChartControl.jsx     |  2 +-
 .../explorev2/components/GroupBy.jsx          | 36 +++++------
 .../explorev2/components/NotGroupBy.jsx       | 36 +++++------
 .../explorev2/components/Options.jsx          | 32 +++++-----
 .../explorev2/components/SqlClause.jsx        |  2 +-
 .../explorev2/components/TimeFilter.jsx       | 59 +++++++++----------
 .../explorev2/reducers/exploreReducer.js      |  6 +-
 7 files changed, 86 insertions(+), 87 deletions(-)

diff --git a/caravel/assets/javascripts/explorev2/components/ChartControl.jsx b/caravel/assets/javascripts/explorev2/components/ChartControl.jsx
index 1ee24488217ae..fe44d96bbac59 100644
--- a/caravel/assets/javascripts/explorev2/components/ChartControl.jsx
+++ b/caravel/assets/javascripts/explorev2/components/ChartControl.jsx
@@ -38,7 +38,7 @@ class ChartControl extends React.Component {
   }
   render() {
     return (
-      <div className="panel space-1">
+      <div className="panel">
         <div className="panel-header">Chart Options</div>
         <div className="panel-body">
           <h5 className="section-heading">Datasource</h5>
diff --git a/caravel/assets/javascripts/explorev2/components/GroupBy.jsx b/caravel/assets/javascripts/explorev2/components/GroupBy.jsx
index 12c1df46364c1..a49ab1a78eed5 100644
--- a/caravel/assets/javascripts/explorev2/components/GroupBy.jsx
+++ b/caravel/assets/javascripts/explorev2/components/GroupBy.jsx
@@ -20,25 +20,25 @@ const defaultProps = {
 };
 
 const GroupBy = (props) => {
-  const selects = [];
-  selects.push({
-    key: 'groupByColumns',
-    title: 'GroupBy Column',
-    options: props.groupByColumnOpts,
-    value: props.groupByColumns,
-    multi: true,
-    width: '12',
-  });
-  selects.push({
-    key: 'metrics',
-    title: 'Metrics',
-    options: props.metricsOpts,
-    value: props.metrics,
-    multi: true,
-    width: '12',
-  });
+  const selects = [
+    {
+      key: 'groupByColumns',
+      title: 'Group By',
+      options: props.groupByColumnOpts,
+      value: props.groupByColumns,
+      multi: true,
+      width: '12',
+    },
+    {
+      key: 'metrics',
+      title: 'Metrics',
+      options: props.metricsOpts,
+      value: props.metrics,
+      multi: true,
+      width: '12',
+    }];
   return (
-    <div className="panel space-1">
+    <div className="panel">
       <div className="panel-header">GroupBy</div>
       <div className="panel-body">
         <SelectArray selectArray={selects} />
diff --git a/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx b/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx
index 5abef41bf2c37..2dabdbc850dc6 100644
--- a/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx
+++ b/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx
@@ -20,25 +20,25 @@ const defaultProps = {
 };
 
 const NotGroupBy = (props) => {
-  const selects = [];
-  selects.push({
-    key: 'columns',
-    title: 'Columns',
-    options: props.columnOpts,
-    value: props.columns,
-    multi: true,
-    width: '12',
-  });
-  selects.push({
-    key: 'orderings',
-    title: 'Orderings',
-    options: props.orderingOpts,
-    value: props.orderings,
-    multi: true,
-    width: '12',
-  });
+  const selects = [
+    {
+      key: 'columns',
+      title: 'Columns',
+      options: props.columnOpts,
+      value: props.columns,
+      multi: true,
+      width: '12',
+    },
+    {
+      key: 'orderings',
+      title: 'Orderings',
+      options: props.orderingOpts,
+      value: props.orderings,
+      multi: true,
+      width: '12',
+    }];
   return (
-    <div className="panel space-1">
+    <div className="panel">
       <div className="panel-header">Not GroupBy</div>
       <div className="panel-body">
         <SelectArray selectArray={selects} />
diff --git a/caravel/assets/javascripts/explorev2/components/Options.jsx b/caravel/assets/javascripts/explorev2/components/Options.jsx
index 2081526727ec6..f52662a96de39 100644
--- a/caravel/assets/javascripts/explorev2/components/Options.jsx
+++ b/caravel/assets/javascripts/explorev2/components/Options.jsx
@@ -17,23 +17,23 @@ const defaultProps = {
 };
 
 const Options = (props) => {
-  const selects = [];
-  selects.push({
-    key: 'timeStampFormat',
-    title: 'Timestamp Format',
-    options: timestampOptions.map((t) => ({ value: t[0], label: t[1] })),
-    value: props.timeStampFormat,
-    width: '12',
-  });
-  selects.push({
-    key: 'rowLimit',
-    title: 'Row Limit',
-    options: rowLimitOptions.map((r) => ({ value: r, label: r })),
-    value: props.rowLimit,
-    width: '12',
-  });
+  const selects = [
+    {
+      key: 'timeStampFormat',
+      title: 'Timestamp Format',
+      options: timestampOptions.map((t) => ({ value: t[0], label: t[1] })),
+      value: props.timeStampFormat,
+      width: '12',
+    },
+    {
+      key: 'rowLimit',
+      title: 'Row Limit',
+      options: rowLimitOptions.map((r) => ({ value: r, label: r })),
+      value: props.rowLimit,
+      width: '12',
+    }];
   return (
-    <div className="panel space-1">
+    <div className="panel">
       <div className="panel-header">Options</div>
       <div className="panel-body">
         <SelectArray selectArray={selects} />
diff --git a/caravel/assets/javascripts/explorev2/components/SqlClause.jsx b/caravel/assets/javascripts/explorev2/components/SqlClause.jsx
index d60c418bd4cc4..86e865fbd8d17 100644
--- a/caravel/assets/javascripts/explorev2/components/SqlClause.jsx
+++ b/caravel/assets/javascripts/explorev2/components/SqlClause.jsx
@@ -13,7 +13,7 @@ class SqlClause extends React.Component {
   }
   render() {
     return (
-      <div className="panel space-1">
+      <div className="panel">
         <div className="panel-header">SQL</div>
         <div className="panel-body">
           <div className="row">
diff --git a/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx b/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx
index 60c8e075d4003..0903465f00ed7 100644
--- a/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx
+++ b/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx
@@ -26,37 +26,36 @@ const defaultProps = {
 };
 
 const TimeFilter = (props) => {
-  const timeColumnTitle =
-    (props.datasourceType === 'table') ? 'Time Column' : 'Time Granularity';
-  const timeGrainTitle =
-    (props.datasourceType === 'table') ? 'Time Grain' : 'Origin';
-  const selects = [];
-  selects.push({
-    key: 'timeColumn',
-    title: timeColumnTitle,
-    options: props.timeColumnOpts,
-    value: props.timeColumn,
-  });
-  selects.push({
-    key: 'timeGrain',
-    title: timeGrainTitle,
-    options: props.timeGrainOpts,
-    value: props.timeGrain,
-  });
-  selects.push({
-    key: 'since',
-    title: 'Since',
-    options: sinceOptions.map((s) => ({ value: s, label: s })),
-    value: props.since,
-  });
-  selects.push({
-    key: 'until',
-    title: 'Until',
-    options: untilOptions.map((u) => ({ value: u, label: u })),
-    value: props.until,
-  });
+  const isDatasourceTypeTable = props.datasourceType === 'table';
+  const timeColumnTitle = isDatasourceTypeTable ? 'Time Column' : 'Time Granularity';
+  const timeGrainTitle = isDatasourceTypeTable ? 'Time Grain' : 'Origin';
+  const selects = [
+    {
+      key: 'timeColumn',
+      title: timeColumnTitle,
+      options: props.timeColumnOpts,
+      value: props.timeColumn,
+    },
+    {
+      key: 'timeGrain',
+      title: timeGrainTitle,
+      options: props.timeGrainOpts,
+      value: props.timeGrain,
+    },
+    {
+      key: 'since',
+      title: 'Since',
+      options: sinceOptions.map((s) => ({ value: s, label: s })),
+      value: props.since,
+    },
+    {
+      key: 'until',
+      title: 'Until',
+      options: untilOptions.map((u) => ({ value: u, label: u })),
+      value: props.until,
+    }];
   return (
-    <div className="panel space-1">
+    <div className="panel">
       <div className="panel-header">Time Filter</div>
       <div className="panel-body">
         <SelectArray selectArray={selects} />
diff --git a/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js b/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js
index 5c771e9f9d1e0..8e397c7e52dcb 100644
--- a/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js
+++ b/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js
@@ -3,9 +3,9 @@ import * as actions from '../actions/exploreActions';
 import { addToArr, removeFromArr, alterInArr } from '../../../utils/reducerUtils';
 
 const setFormInViz = function (state, action) {
-  const newForm = Object.assign({}, state);
-  newForm[action.key] = action.value;
-  return newForm;
+  const newFormData = Object.assign({}, state);
+  newFormData[action.key] = action.value;
+  return newFormData;
 };
 
 const setVizInState = function (state, action) {