scroll to end when new filters are added

frontend/src/lib/query.js

@@ -275,7 +275,7 @@ var Query = {
         if (queryFilters.length === 0) {
             queryFilters = ["AND", [null, null, null]];
         } else {
-            queryFilters.push([null, null, null]);
+            queryFilters = queryFilters.concat([[null, null, null]]);
         }
 
         query.filter = queryFilters;

frontend/src/query_builder/filters/FilterList.jsx

 import React, { Component, PropTypes } from "react";
+import { findDOMNode } from 'react-dom';
 
 import FilterWidget from './FilterWidget.jsx';
 
 export default class FilterList extends Component {
     constructor(props, context) {
         super(props, context);
-        this.state = {};
+        this.state = {
+          shouldScroll: false
+        };
     }
 
     static propTypes = {};
     static defaultProps = {};
 
+    componentDidUpdate () {
+      this.state.shouldScroll ? (findDOMNode(this).scrollLeft = findDOMNode(this).scrollWidth) : null;
+    }
+
+    componentWillReceiveProps (nextProps) {
+      // only scroll when a filter is added
+      if(nextProps.filters.length > this.props.filters.length) {
+        this.setState({ shouldScroll: true })
+      } else {
+        this.setState({ shouldScroll: false })
+      }
+    }
+
+    componentDidMount () {
+      this.componentDidUpdate();
+    }
+
     render() {
         const { filters, tableMetadata } = this.props;
         return (