Get query button working in explorev2 (#1581)

* Get query buttonw working in explorev2

 - Create new endpoint for updating explore viz
 - Send over new form_data when query button is pressed

* Added endpoint test

* Changes based on comments

* Added docstring for endpoint, and query spec

* Remove white space around docstring

superset/assets/javascripts/explorev2/components/ChartContainer.jsx

@@ -17,6 +17,8 @@ const propTypes = {
   standalone_endpoint: PropTypes.string.isRequired,
   query: PropTypes.string.isRequired,
   column_formats: PropTypes.object,
+  data: PropTypes.any,
+  isChartLoading: PropTypes.bool,
 };
 
 class ChartContainer extends React.Component {
@@ -29,30 +31,34 @@ class ChartContainer extends React.Component {
   }
 
   componentWillMount() {
-    this.setState({ mockSlice: this.getMockedSliceObject() });
+    this.setState({ mockSlice: this.getMockedSliceObject(this.props) });
   }
 
   componentDidMount() {
     this.renderVis();
   }
 
+  componentWillReceiveProps(nextProps) {
+    this.setState({ mockSlice: this.getMockedSliceObject(nextProps) });
+  }
+
   componentDidUpdate() {
     this.renderVis();
   }
 
-  getMockedSliceObject() {
+  getMockedSliceObject(props) {
     return {
-      viewSqlQuery: this.props.query,
+      viewSqlQuery: props.query,
 
       data: {
-        csv_endpoint: this.props.csv_endpoint,
-        json_endpoint: this.props.json_endpoint,
-        standalone_endpoint: this.props.standalone_endpoint,
+        csv_endpoint: props.csv_endpoint,
+        json_endpoint: props.json_endpoint,
+        standalone_endpoint: props.standalone_endpoint,
       },
 
-      containerId: this.props.containerId,
+      containerId: props.containerId,
 
-      jsonEndpoint: () => this.props.json_endpoint,
+      jsonEndpoint: () => props.json_endpoint,
 
       container: {
         html: (data) => {
@@ -66,7 +72,7 @@ class ChartContainer extends React.Component {
           // should call callback to adjust height of chart
           $(this.state.selector).css(dim, size);
         },
-        height: () => parseInt(this.props.height, 10) - 100,
+        height: () => parseInt(props.height, 10) - 100,
 
         show: () => { this.render(); },
 
@@ -78,7 +84,7 @@ class ChartContainer extends React.Component {
 
       width: () => this.chartContainerRef.getBoundingClientRect().width,
 
-      height: () => parseInt(this.props.height, 10) - 100,
+      height: () => parseInt(props.height, 10) - 100,
 
       selector: this.state.selector,
 
@@ -128,6 +134,7 @@ class ChartContainer extends React.Component {
     };
   }
 
+
   renderVis() {
     visMap[this.props.viz_type](this.state.mockSlice).render();
   }
@@ -152,11 +159,13 @@ class ChartContainer extends React.Component {
             </div>
           }
         >
-          <div
-            id={this.props.containerId}
-            ref={(ref) => { this.chartContainerRef = ref; }}
-            className={this.props.viz_type}
-          />
+          {!this.props.isChartLoading &&
+            <div
+              id={this.props.containerId}
+              ref={(ref) => { this.chartContainerRef = ref; }}
+              className={this.props.viz_type}
+            />
+          }
         </Panel>
       </div>
     );
@@ -176,6 +185,8 @@ function mapStateToProps(state) {
     standalone_endpoint: state.viz.standalone_endpoint,
     query: state.viz.query,
     column_formats: state.viz.column_formats,
+    data: state.viz.data,
+    isChartLoading: state.isChartLoading,
   };
 }
 

superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx

@@ -1,9 +1,24 @@
+/* eslint camelcase: 0 */
 import React from 'react';
+import { bindActionCreators } from 'redux';
+import * as actions from '../actions/exploreActions';
+import { connect } from 'react-redux';
 import ChartContainer from './ChartContainer';
 import ControlPanelsContainer from './ControlPanelsContainer';
 import QueryAndSaveBtns from '../../explore/components/QueryAndSaveBtns';
+const $ = require('jquery');
 
-export default class ExploreViewContainer extends React.Component {
+const propTypes = {
+  form_data: React.PropTypes.object.isRequired,
+  actions: React.PropTypes.object.isRequired,
+  slice_id: React.PropTypes.string.isRequired,
+  slice_name: React.PropTypes.string.isRequired,
+  datasource_id: React.PropTypes.number.isRequired,
+  datasource_type: React.PropTypes.string.isRequired,
+};
+
+
+class ExploreViewContainer extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -11,11 +26,43 @@ export default class ExploreViewContainer extends React.Component {
     };
   }
 
+  onQuery() {
+    const data = {};
+    const form_data = this.props.form_data;
+    Object.keys(form_data).forEach((field) => {
+      // filter out null fields
+      if (form_data[field] !== null) {
+        data[field] = form_data[field];
+      }
+    });
+    // V2 tag temporarily for updating url
+    // Todo: remove after launch
+    data.V2 = true;
+    data.datasource_id = this.props.datasource_id;
+    data.datasource_type = this.props.datasource_type;
+    this.queryFormData(data);
+
+    const params = $.param(data, true);
+    this.updateUrl(params);
+  }
+
   getHeight() {
     const navHeight = 90;
     return `${window.innerHeight - navHeight}px`;
   }
 
+  updateUrl(params) {
+    const baseUrl =
+      `/superset/explore/${this.props.datasource_type}/${this.props.datasource_id}/`;
+    const newEndpoint = `${baseUrl}?${params}`;
+    history.pushState({}, document.title, newEndpoint);
+  }
+
+  queryFormData(data) {
+    this.props.actions.updateExplore(
+      this.props.datasource_type, this.props.datasource_id, data);
+  }
+
   render() {
     return (
       <div
@@ -29,10 +76,13 @@ export default class ExploreViewContainer extends React.Component {
           <div className="col-sm-4">
             <QueryAndSaveBtns
               canAdd="True"
-              onQuery={() => {}}
+              onQuery={this.onQuery.bind(this)}
             />
             <br /><br />
-            <ControlPanelsContainer />
+            <ControlPanelsContainer
+              actions={this.props.actions}
+              form_data={this.props.form_data}
+            />
           </div>
           <div className="col-sm-8">
             <ChartContainer
@@ -44,3 +94,25 @@ export default class ExploreViewContainer extends React.Component {
     );
   }
 }
+
+ExploreViewContainer.propTypes = propTypes;
+
+function mapStateToProps(state) {
+  return {
+    datasource_id: state.datasource_id,
+    datasource_type: state.datasource_type,
+    form_data: state.viz.form_data,
+    slice_id: state.viz.form_data.slice_id,
+    slice_name: state.viz.form_data.slice_name,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+
+export { ControlPanelsContainer };
+
+export default connect(mapStateToProps, mapDispatchToProps)(ExploreViewContainer);

superset/assets/javascripts/explorev2/components/SelectField.jsx

@@ -7,7 +7,7 @@ import Select, { Creatable } from 'react-select';
 const propTypes = {
   name: PropTypes.string.isRequired,
   choices: PropTypes.array,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]).isRequired,
   label: PropTypes.string,
   description: PropTypes.string,
   onChange: PropTypes.func,