diff --git a/ui/spec/chronograf/reducers/queryConfigSpec.js b/ui/spec/chronograf/reducers/queryConfigSpec.js
index 15b76f4ea..825b9f50b 100644
--- a/ui/spec/chronograf/reducers/queryConfigSpec.js
+++ b/ui/spec/chronograf/reducers/queryConfigSpec.js
@@ -1,5 +1,5 @@
 import reducer from 'chronograf/reducers/queryConfigs';
-import defaultQueryConfig from 'chronograf/utils/defaultQueryConfig';
+import defaultQueryConfig from 'src/utils/defaultQueryConfig';
 import {
   chooseNamespace,
   chooseMeasurement,
diff --git a/ui/spec/chronograf/utils/influxql/selectSpec.js b/ui/spec/chronograf/utils/influxql/selectSpec.js
index 09717dce8..19de40407 100644
--- a/ui/spec/chronograf/utils/influxql/selectSpec.js
+++ b/ui/spec/chronograf/utils/influxql/selectSpec.js
@@ -1,5 +1,5 @@
 import selectStatement from 'chronograf/utils/influxql/select';
-import defaultQueryConfig from 'chronograf/utils/defaultQueryConfig';
+import defaultQueryConfig from 'src/utils/defaultQueryConfig';
 
 function mergeConfig(options) {
   return Object.assign({}, defaultQueryConfig(123), options);
diff --git a/ui/src/chronograf/reducers/queryConfigs.js b/ui/src/chronograf/reducers/queryConfigs.js
index 3d3de52d9..e64ecb3ed 100644
--- a/ui/src/chronograf/reducers/queryConfigs.js
+++ b/ui/src/chronograf/reducers/queryConfigs.js
@@ -1,4 +1,5 @@
-import defaultQueryConfig from '../utils/defaultQueryConfig';
+import defaultQueryConfig from 'src/utils/defaultQueryConfig';
+import {chooseNamespace, chooseMeasurement, toggleField} from 'src/utils/queryTransitions';
 import update from 'react-addons-update';
 import u from 'updeep';
 
@@ -10,10 +11,7 @@ export default function queryConfigs(state = {}, action) {
 
     case 'CHOOSE_NAMESPACE': {
       const {queryId, database, retentionPolicy} = action.payload;
-      const nextQueryConfig = update(defaultQueryConfig(queryId), {$merge: {
-        database,
-        retentionPolicy,
-      }});
+      const nextQueryConfig = chooseNamespace(defaultQueryConfig(queryId), {database, retentionPolicy});
       const nextState = update(state, {
         [queryId]: {$set: nextQueryConfig},
       });
@@ -22,11 +20,7 @@ export default function queryConfigs(state = {}, action) {
 
     case 'CHOOSE_MEASUREMENT': {
       const {queryId, measurement} = action.payload;
-      const nextQueryConfig = update(defaultQueryConfig(queryId), {$merge: {
-        database: state[queryId].database,
-        retentionPolicy: state[queryId].retentionPolicy,
-        measurement,
-      }});
+      const nextQueryConfig = chooseMeasurement(state[queryId], measurement);
       const nextState = update(state, {
         [queryId]: {$set: nextQueryConfig},
       });
@@ -88,28 +82,11 @@ export default function queryConfigs(state = {}, action) {
 
     case 'TOGGLE_FIELD': {
       const {queryId, fieldFunc} = action.payload;
-      const {field/* funcs */} = fieldFunc;
+      const nextQueryConfig = toggleField(state[queryId], fieldFunc);
 
-      const nextState = update(state, {
-        [queryId]: {$apply: (queryConfig) => {
-          const isSelected = queryConfig.fields.find((f) => f.field === field);
-          if (isSelected) {
-            const nextFields = queryConfig.fields.filter((f) => f.field !== field);
-            if (!nextFields.length) {
-              const nextGroupBy = update(state[queryId].groupBy, {time: {$set: null}});
-              return update(queryConfig, {fields: {$set: nextFields}, groupBy: {$set: nextGroupBy}});
-            }
-
-            return update(queryConfig, {
-              fields: {$set: nextFields},
-            });
-          }
-
-          return update(queryConfig, {fields: {$push: [fieldFunc]}});
-        }},
+      return Object.assign({}, state, {
+        [queryId]: nextQueryConfig,
       });
-
-      return nextState;
     }
 
     case 'APPLY_FUNCS_TO_FIELD': {
diff --git a/ui/src/kapacitor/components/DataSection.js b/ui/src/kapacitor/components/DataSection.js
index 19fda673e..dea0ddfb3 100644
--- a/ui/src/kapacitor/components/DataSection.js
+++ b/ui/src/kapacitor/components/DataSection.js
@@ -96,25 +96,24 @@ export const DataSection = React.createClass({
         query: Object.assign({}, oldState.query, {
           fields: oldState.query.fields.concat({field, funcs}),
         }),
-      })
-          return update(queryConfig, {fields: {$push: [fieldFunc]}});
+      });
     });
   },
 
-  handleGroupByTime(time) {
-  },
+  //  handleGroupByTime(time) {
+  //  },
 
-  handleApplyFuncsToField(fieldFunc) {
-  },
+  //  handleApplyFuncsToField(fieldFunc) {
+  //  },
 
-  handleChooseTag(tag) {
-  },
+  //  handleChooseTag(tag) {
+  //  },
 
-  handleToggleTagAcceptance() {
-  },
+  //  handleToggleTagAcceptance() {
+  //  },
 
-  handleGroupByTag(tagKey) {
-  },
+  //  handleGroupByTag(tagKey) {
+  //  },
 
   handleClickTab(tab) {
     this.setState({activeTab: tab});
diff --git a/ui/src/kapacitor/containers/KapacitorRulePage.js b/ui/src/kapacitor/containers/KapacitorRulePage.js
index 973a02c19..2fb3d18bd 100644
--- a/ui/src/kapacitor/containers/KapacitorRulePage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulePage.js
@@ -1,11 +1,6 @@
 import React, {PropTypes} from 'react';
 import DataSection from '../components/DataSection';
 
-const DATA_SECTION = 'data';
-const VALUES_SECTION = 'values';
-const MESSAGE_SECTION = 'message';
-const ALERTS_SECTION = 'alerts';
-
 export const KapacitorRulePage = React.createClass({
   propTypes: {
     source: PropTypes.shape({
@@ -16,12 +11,6 @@ export const KapacitorRulePage = React.createClass({
     addFlashMessage: PropTypes.func,
   },
 
-  getInitialState() {
-    return {
-      activeSection: DATA_SECTION,
-    };
-  },
-
   render() {
     return (
       <div className="kapacitor-rule-page">
@@ -88,7 +77,7 @@ export const KapacitorRulePage = React.createClass({
     // hit kapacitor config endpoint and filter sections by the "enabled" property
     const alertOptions = ['Slack', 'VictorOps'].map((destination) => {
       return <option key={destination}>send to {destination}</option>;
-    })
+    });
     return (
       <div className="kapacitor-rule-section">
         <h3>Alerts</h3>
diff --git a/ui/src/store/getInitialState.js b/ui/src/store/getInitialState.js
index 07b758e23..98a0a7137 100644
--- a/ui/src/store/getInitialState.js
+++ b/ui/src/store/getInitialState.js
@@ -1,5 +1,5 @@
 import uuid from 'node-uuid';
-import defaultQueryConfig from 'src/chronograf/utils/defaultQueryConfig';
+import defaultQueryConfig from 'src/utils/defaultQueryConfig';
 
 export default function getInitialState() {
   const panelID = uuid.v4(); // for the default Panel
diff --git a/ui/src/chronograf/utils/defaultQueryConfig.js b/ui/src/utils/defaultQueryConfig.js
similarity index 100%
rename from ui/src/chronograf/utils/defaultQueryConfig.js
rename to ui/src/utils/defaultQueryConfig.js
diff --git a/ui/src/utils/queryTransitions.js b/ui/src/utils/queryTransitions.js
new file mode 100644
index 000000000..86ba24b10
--- /dev/null
+++ b/ui/src/utils/queryTransitions.js
@@ -0,0 +1,35 @@
+import defaultQueryConfig from './defaultQueryConfig';
+
+export function chooseNamespace(query, namespace) {
+  return Object.assign({}, query, namespace);
+}
+
+export function chooseMeasurement(query, measurement) {
+  return Object.assign({}, defaultQueryConfig(query.id), {
+    database: query.database,
+    retentionPolicy: query.retentionPolicy,
+    measurement,
+  });
+}
+
+export function toggleField(query, {field, funcs}) {
+  const isSelected = query.fields.find((f) => f.field === field);
+  if (isSelected) {
+    const nextFields = query.fields.filter((f) => f.field !== field);
+    if (!nextFields.length) {
+      const nextGroupBy = Object.assign({}, query.groupBy, {time: null});
+      return Object.assign({}, query, {
+        fields: nextFields,
+        groupBy: nextGroupBy,
+      });
+    }
+
+    return Object.assign({}, query, {
+      fields: nextFields,
+    });
+  }
+
+  return Object.assign({}, query, {
+    fields: query.fields.concat({field, funcs}),
+  });
+}