fix a few bugs.

resources/frontend_client/app/card/card.controllers.js

@@ -364,7 +364,7 @@ CardControllers.controller('CardDetail', [
                     return canRun;
                 },
                 run: function() {
-                    var query = this.cleanFilters(queryBuilder.card.dataset_query);
+                    var query = queryBuilder.cleanFilters(queryBuilder.card.dataset_query);
                     console.log(query);
                     queryBuilder.isRunning = true;
                     queryBuilder.inform();

resources/frontend_client/app/query_builder/gui_query_editor.react.js

@@ -18,8 +18,8 @@ var GuiQueryEditor = React.createClass({
         addFilter: React.PropTypes.func.isRequired,
         updateFilter: React.PropTypes.func.isRequired,
         removeFilter: React.PropTypes.func.isRequired,
-        canRun: React.PropTypes.boolean,
-        isRunning: React.PropTypes.boolean,
+        canRun: React.PropTypes.bool,
+        isRunning: React.PropTypes.bool,
         runFn: React.PropTypes.func.isRequired
     },
     _getFilterFields: function () {

resources/frontend_client/app/query_builder/header.react.js

@@ -7,7 +7,7 @@ var PureRenderMixin = React.addons.PureRenderMixin;
 // Save - only shown after Run
 // Download Data - only shown after Run
 // Add to Dashboard - only shown after Save
-// GUI vs SQL mode toggle - 2 mode slider
+// GUI vs SQL mode toggle - 2 mode slider - only visible on initial create (while query empty)
 
 var QueryHeader = React.createClass({
     displayName: 'QueryHeader',

resources/frontend_client/app/query_builder/query_builder.js

@@ -11,45 +11,41 @@ var QueryBuilder = React.createClass({
     render: function () {
         return (
             <div className="full-height">
-                <div className="QueryHeader">
+                <div className="QueryHeader flex full">
                     <div className="QueryWrapper">
-                        <div className="inline-block">
-                            <QueryHeader
-                                card={this.props.model.card}
-                                save={this.props.model.save.bind(this.props.model)}
-                                downloadLink={this.props.model.getDownloadLink()}
-                            />
-                        </div>
+                        <QueryHeader
+                            card={this.props.model.card}
+                            save={this.props.model.save.bind(this.props.model)}
+                            downloadLink={this.props.model.getDownloadLink()}
+                        />
                     </div>
                 </div>
                 <div className="QueryPicker-group">
-                    <div>
-                        <div className="QueryWrapper">
-                            <div className="clearfix">
-                                <GuiQueryEditor
-                                    dbList={this.props.model.database_list}
-                                    setDatabase={this.props.model.setDatabase.bind(this.props.model)}
-                                    db={this.props.model.card.dataset_query.database}
-                                    options={this.props.model.selected_table_fields}
-                                    tables={this.props.model.table_list}
-                                    selected_table_fields={this.props.model.selected_table_fields}
-                                    aggregationFieldList={this.props.model.aggregation_field_list}
-                                    query={this.props.model.card.dataset_query.query}
-                                    setSourceTable={this.props.model.setSourceTable.bind(this.props.model)}
-                                    setAggregation={this.props.model.setAggregation.bind(this.props.model)}
-                                    setAggregationTarget={this.props.model.setAggregationTarget.bind(this.props.model)}
-                                    addDimension={this.props.model.addDimension.bind(this.props.model)}
-                                    removeDimension={this.props.model.removeDimension.bind(this.props.model)}
-                                    updateDimension={this.props.model.updateDimension.bind(this.props.model)}
-                                    aggregationComplete={this.props.model.aggregationComplete.bind(this.props.model)}
-                                    addFilter={this.props.model.addFilter}
-                                    updateFilter={this.props.model.updateFilter}
-                                    removeFilter={this.props.model.removeFilter}
-                                    canRun={this.props.model.canRun()}
-                                    isRunning={this.props.model.isRunning}
-                                    runFn={this.props.model.run}
-                                />
-                            </div>
+                    <div className="QueryWrapper">
+                        <div className="clearfix">
+                            <GuiQueryEditor
+                                dbList={this.props.model.database_list}
+                                setDatabase={this.props.model.setDatabase.bind(this.props.model)}
+                                db={this.props.model.card.dataset_query.database}
+                                options={this.props.model.selected_table_fields}
+                                tables={this.props.model.table_list}
+                                selected_table_fields={this.props.model.selected_table_fields}
+                                aggregationFieldList={this.props.model.aggregation_field_list}
+                                query={this.props.model.card.dataset_query.query}
+                                setSourceTable={this.props.model.setSourceTable.bind(this.props.model)}
+                                setAggregation={this.props.model.setAggregation.bind(this.props.model)}
+                                setAggregationTarget={this.props.model.setAggregationTarget.bind(this.props.model)}
+                                addDimension={this.props.model.addDimension.bind(this.props.model)}
+                                removeDimension={this.props.model.removeDimension.bind(this.props.model)}
+                                updateDimension={this.props.model.updateDimension.bind(this.props.model)}
+                                aggregationComplete={this.props.model.aggregationComplete.bind(this.props.model)}
+                                addFilter={this.props.model.addFilter}
+                                updateFilter={this.props.model.updateFilter}
+                                removeFilter={this.props.model.removeFilter}
+                                canRun={this.props.model.canRun()}
+                                isRunning={this.props.model.isRunning}
+                                runFn={this.props.model.run}
+                            />
                         </div>
                     </div>
                 </div>

resources/frontend_client/app/query_builder/run_button.react.js

+'use strict';
+
+var RunButton = React.createClass({
+    displayName: 'RunButton',
+    propTypes: {
+        canRun: React.PropTypes.bool.isRequired,
+        isRunning: React.PropTypes.bool.isRequired,
+        runFn: React.PropTypes.func.isRequired
+    },
+    render: function () {
+        // default state is to not render anything if we can't actually run
+        var runButton = false;
+        if (this.props.canRun) {
+            var runButtonText = (this.props.isRunning) ? "Loading..." : "Find out!";
+            runButton = (
+                <button className="Button Button--primary" onClick={this.props.runFn.bind(this)}>{runButtonText}</button>
+            );
+        }
+
+        return runButton;
+    }
+});