graceguo-supercat closed pull request #4246: [Sql Lab] Fix query results
display cutoff at the bottom of screen
URL: https://github.com/apache/incubator-superset/pull/4246
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx
b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx
index 912e623ce7..f36a1640c7 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 4b2e8999a7..cbfaf3597f 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 f11329cdba..fd2e7f29a4 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 c0c3717b63..c74355042f 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;
}
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
With regards,
Apache Git Services
