diff --git a/superset/assets/javascripts/SqlLab/components/QueryTable.jsx b/superset/assets/javascripts/SqlLab/components/QueryTable.jsx index aa9aefd04e1b..75d7b20d1b0c 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 7c5769f0aef9..d55f337dc3da 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 ( +
+ + + No results available for this query + + +
+ ); } const tableData = this.props.query.results.columns.map((col) => ({ column: col.name, diff --git a/superset/assets/javascripts/SqlLab/reducers.js b/superset/assets/javascripts/SqlLab/reducers.js index 87626f199953..791a86a21801 100644 --- a/superset/assets/javascripts/SqlLab/reducers.js +++ b/superset/assets/javascripts/SqlLab/reducers.js @@ -134,8 +134,10 @@ export const sqlLabReducer = function (state, action) { let newState = Object.assign({}, state); if (action.query.sqlEditorId) { const qe = getFromArr(state.queryEditors, action.query.sqlEditorId); - if (qe.latestQueryId) { - const q = Object.assign({}, state.queries[qe.latestQueryId], { results: null }); + if (qe.latestQueryId && state.queries[qe.latestQueryId]) { + const newResults = Object.assign( + {}, state.queries[qe.latestQueryId].results, { data: [], query: null }); + const q = Object.assign({}, state.queries[qe.latestQueryId], { results: newResults }); const queries = Object.assign({}, state.queries, { [q.id]: q }); newState = Object.assign({}, state, { queries }); }