diff --git a/superset/assets/javascripts/SqlLab/components/QueryTable.jsx b/superset/assets/javascripts/SqlLab/components/QueryTable.jsx index aa9aefd04e1b4..75d7b20d1b0c9 100644 --- a/superset/assets/javascripts/SqlLab/components/QueryTable.jsx +++ b/superset/assets/javascripts/SqlLab/components/QueryTable.jsx @@ -47,8 +47,7 @@ class QueryTable extends React.PureComponent { this.setState({ showVisualizeModal: false }); } showVisualizeModal(query) { - this.setState({ showVisualizeModal: true }); - this.setState({ activeQuery: query }); + this.setState({ activeQuery: query, showVisualizeModal: true }); } restoreSql(query) { this.props.actions.queryEditorSetSql({ id: query.sqlEditorId }, query.sql); diff --git a/superset/assets/javascripts/SqlLab/components/VisualizeModal.jsx b/superset/assets/javascripts/SqlLab/components/VisualizeModal.jsx index 7c5769f0aef9f..d55f337dc3da8 100644 --- a/superset/assets/javascripts/SqlLab/components/VisualizeModal.jsx +++ b/superset/assets/javascripts/SqlLab/components/VisualizeModal.jsx @@ -34,21 +34,21 @@ class VisualizeModal extends React.PureComponent { hints: [], }; } - componentWillMount() { - this.setStateFromProps(); - } componentDidMount() { this.validate(); } - setStateFromProps() { + componentWillReceiveProps(nextProps) { + this.setStateFromProps(nextProps); + } + setStateFromProps(props) { if ( - !this.props.query || - !this.props.query.results || - !this.props.query.results.columns) { + !props.query || + !props.query.results || + !props.query.results.columns) { return; } const columns = {}; - this.props.query.results.columns.forEach((col) => { + props.query.results.columns.forEach((col) => { columns[col.name] = col; }); this.setState({ columns }); @@ -125,8 +125,16 @@ class VisualizeModal extends React.PureComponent { this.setState({ columns }, this.validate); } render() { - if (!(this.props.query)) { - return
; + if (!(this.props.query) || !(this.props.query.results) || !(this.props.query.results.columns)) { + return ( +