This is an automated email from the ASF dual-hosted git repository.
graceguo pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 7b76356 [Sql Lab] Fix query results display at the bottom of screen
(#4246)
7b76356 is described below
commit 7b7635618238ea57bb8e2d503b009fa694970855
Author: Grace Guo <[email protected]>
AuthorDate: Fri Jan 19 10:19:54 2018 -0800
[Sql Lab] Fix query results display at the bottom of screen (#4246)
---
.../assets/javascripts/SqlLab/components/ResultSet.jsx | 3 ++-
.../assets/javascripts/SqlLab/components/SqlEditor.jsx | 16 ++++++++++++----
superset/assets/javascripts/SqlLab/main.less | 6 ++++++
.../components/FilterableTable/FilterableTableStyles.css | 9 ++++-----
4 files changed, 24 insertions(+), 10 deletions(-)
diff --git a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx
b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx
index 912e623..f36a164 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 4b2e899..cbfaf35 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}
>
<div ref="ace" style={{ width: '100%' }}>
<div>
@@ -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}
/>
</div>
</SplitPane>
diff --git a/superset/assets/javascripts/SqlLab/main.less
b/superset/assets/javascripts/SqlLab/main.less
index f11329c..fd2e7f2 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 c0c3717..c743550 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;
}
--
To stop receiving notification emails like this one, please contact
['"[email protected]" <[email protected]>'].
