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} >
@@ -273,7 +281,7 @@ class SqlEditor extends React.PureComponent { editorQueries={this.props.editorQueries} dataPreviewQueries={this.props.dataPreviewQueries} actions={this.props.actions} - height={this.state.southPaneHeight} + height={this.state.southPaneHeight || 0} />
diff --git a/superset/assets/javascripts/SqlLab/main.less b/superset/assets/javascripts/SqlLab/main.less index f11329cdba16..fd2e7f29a487 100644 --- a/superset/assets/javascripts/SqlLab/main.less +++ b/superset/assets/javascripts/SqlLab/main.less @@ -289,8 +289,14 @@ a.Link { .tooltip-inner { max-width: 500px; } +.SplitPane.horizontal { + padding-right: 4px; +} .SouthPane { margin-top: 10px; + position: absolute; + width: 100%; + overflow: scroll; } .search-date-filter-container { display: flex; diff --git a/superset/assets/javascripts/components/FilterableTable/FilterableTableStyles.css b/superset/assets/javascripts/components/FilterableTable/FilterableTableStyles.css index c0c3717b6353..c74355042f64 100644 --- a/superset/assets/javascripts/components/FilterableTable/FilterableTableStyles.css +++ b/superset/assets/javascripts/components/FilterableTable/FilterableTableStyles.css @@ -1,8 +1,12 @@ +.ReactVirtualized__Grid__innerScrollContainer { + border: 1px solid #ccc; +} .ReactVirtualized__Table__headerRow { font-weight: 700; display: flex; flex-direction: row; align-items: center; + border: 1px solid #ccc; } .ReactVirtualized__Table__row { display: flex; @@ -50,11 +54,6 @@ } .even-row { background: #f2f2f2; } .odd-row { background: #ffffff; } -.even-row, -.odd-row { - border: none; -} .filterable-table-container { overflow: auto; - border: 1px solid #ccc; }