diff --git a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx index 912e623ce739..f36a1640c79c 100644 --- a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx +++ b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx @@ -144,7 +144,8 @@ export default class ResultSet extends React.PureComponent { } render() { const query = this.props.query; - const height = this.props.search ? this.props.height - SEARCH_HEIGHT : this.props.height; + const height = Math.max(0, + (this.props.search ? this.props.height - SEARCH_HEIGHT : this.props.height)); let sql; if (this.props.showSql) { diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx index 4b2e8999a76d..cbfaf3597f6d 100644 --- a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx +++ b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import throttle from 'lodash.throttle'; import { Col, FormGroup, @@ -52,6 +53,9 @@ class SqlEditor extends React.PureComponent { autorun: props.queryEditor.autorun, ctas: '', }; + + this.onResize = this.onResize.bind(this); + this.throttledResize = throttle(this.onResize, 250); } componentWillMount() { if (this.state.autorun) { @@ -62,12 +66,16 @@ class SqlEditor extends React.PureComponent { } componentDidMount() { this.onResize(); + window.addEventListener('resize', this.throttledResize); + } + componentWillUnmount() { + window.removeEventListener('resize', this.throttledResize); } onResize() { const height = this.sqlEditorHeight(); this.setState({ - editorPaneHeight: this.refs.ace.clientHeight, - southPaneHeight: height - this.refs.ace.clientHeight, + editorPaneHeight: this.props.queryEditor.height, + southPaneHeight: height - this.props.queryEditor.height, height, }); @@ -252,7 +260,7 @@ class SqlEditor extends React.PureComponent { split="horizontal" defaultSize={defaultNorthHeight} minSize={100} - onChange={this.onResize.bind(this)} + onChange={this.onResize} >