superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From grace...@apache.org
Subject [incubator-superset] branch master updated: [Sql Lab] Fix query results display at the bottom of screen (#4246)
Date Fri, 19 Jan 2018 18:19:58 GMT
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 <grace.guo@airbnb.com>
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
['"commits@superset.apache.org" <commits@superset.apache.org>'].

Mime
View raw message