From 412d426b433725a4cff27693fcaca235fc50ef5c Mon Sep 17 00:00:00 2001 From: alanna scott Date: Wed, 1 Mar 2017 00:49:07 -0800 Subject: [PATCH 1/4] only scroll result set horizontally --- superset/assets/javascripts/SqlLab/components/SouthPane.jsx | 4 +--- superset/assets/javascripts/SqlLab/main.css | 4 +++- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/superset/assets/javascripts/SqlLab/components/SouthPane.jsx b/superset/assets/javascripts/SqlLab/components/SouthPane.jsx index 5291c38456b3..7654db69c3df 100644 --- a/superset/assets/javascripts/SqlLab/components/SouthPane.jsx +++ b/superset/assets/javascripts/SqlLab/components/SouthPane.jsx @@ -64,9 +64,7 @@ class SouthPane extends React.PureComponent { title="Results" eventKey="Results" > -
- {results} -
+ {results} Date: Wed, 1 Mar 2017 03:09:33 -0800 Subject: [PATCH 2/4] only scroll results table, keep rest of ui static --- .../SqlLab/components/ResultSet.jsx | 19 +++++++++- .../SqlLab/components/SqlEditor.jsx | 36 +++++++++---------- superset/assets/javascripts/SqlLab/main.css | 7 ++++ 3 files changed, 41 insertions(+), 21 deletions(-) diff --git a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx index 5e2bbb23b451..dc0330b7a383 100644 --- a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx +++ b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx @@ -34,6 +34,7 @@ class ResultSet extends React.PureComponent { searchText: '', showModal: false, data: [], + resultSetHeight: '0', }; } componentWillReceiveProps(nextProps) { @@ -51,6 +52,22 @@ class ResultSet extends React.PureComponent { this.fetchResults(nextProps.query); } } + componentWillMount() { + // hack to get height of result set table so it can be fixed and scroll in place + if (this.state.resultSetHeight === '0') { + // calculate result set table height + const sqlEditorHeight = document.getElementById('brace-editor').getBoundingClientRect().height; + const sqlToolbar = document.getElementById('js-sql-toolbar').getBoundingClientRect().height; + const tabsHeight = document.getElementsByClassName('nav-tabs')[0].getBoundingClientRect().height * 2; + const headerHeight = document.getElementsByTagName('header')[0].getBoundingClientRect().height; + + // this needs to be hardcoded since this element is in this component and has not mounted yet + const resultsControlsHeight = 30; + + const sum = sqlEditorHeight + sqlToolbar + tabsHeight + resultsControlsHeight + headerHeight; + this.setState({ resultSetHeight: window.innerHeight - sum - 90}); + } + } getControls() { if (this.props.search || this.props.visualize || this.props.csv) { let csvButton; @@ -192,7 +209,7 @@ class ResultSet extends React.PureComponent { /> {this.getControls.bind(this)()} {sql} -
+
+
-
-
- - {editorBottomBar} -
- -
-
+ + {editorBottomBar} +
+ diff --git a/superset/assets/javascripts/SqlLab/main.css b/superset/assets/javascripts/SqlLab/main.css index 550854d1af07..e39e6ba8f500 100644 --- a/superset/assets/javascripts/SqlLab/main.css +++ b/superset/assets/javascripts/SqlLab/main.css @@ -239,6 +239,13 @@ div.tablePopover:hover { } .ResultSet { overflow: auto; + border-bottom: 1px solid #ccc; +} +.ResultSet table { + margin-bottom: 0px; +} +.ResultSet table tr.last { + border-bottom: none; } .ace_editor { border: 1px solid #ccc; From 87692a9a1bdfff88f6e5ab5c6fb297946c4d9103 Mon Sep 17 00:00:00 2001 From: alanna scott Date: Wed, 1 Mar 2017 03:33:05 -0800 Subject: [PATCH 3/4] use hard coded values --- .../javascripts/SqlLab/components/AceEditorWrapper.jsx | 5 ++--- .../assets/javascripts/SqlLab/components/ResultSet.jsx | 10 +++++----- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx b/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx index b864c70e274c..2ded35c8edc5 100644 --- a/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx +++ b/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx @@ -114,10 +114,9 @@ class AceEditorWrapper extends React.PureComponent { theme="github" onLoad={this.onEditorLoad.bind(this)} onBlur={this.onBlur.bind(this)} - minLines={8} - maxLines={30} + minLines={12} + maxLines={12} onChange={this.textChange.bind(this)} - height="200px" width="100%" editorProps={{ $blockScrolling: true }} enableLiveAutocompletion diff --git a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx index dc0330b7a383..aaf4e9fcbaa8 100644 --- a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx +++ b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx @@ -56,16 +56,16 @@ class ResultSet extends React.PureComponent { // hack to get height of result set table so it can be fixed and scroll in place if (this.state.resultSetHeight === '0') { // calculate result set table height - const sqlEditorHeight = document.getElementById('brace-editor').getBoundingClientRect().height; - const sqlToolbar = document.getElementById('js-sql-toolbar').getBoundingClientRect().height; - const tabsHeight = document.getElementsByClassName('nav-tabs')[0].getBoundingClientRect().height * 2; - const headerHeight = document.getElementsByTagName('header')[0].getBoundingClientRect().height; + const sqlEditorHeight = 192; //document.getElementById('brace-editor').getBoundingClientRect().height; + const sqlToolbar = 30; //document.getElementById('js-sql-toolbar').getBoundingClientRect().height; + const tabsHeight = 88; //document.getElementsByClassName('nav-tabs')[0].getBoundingClientRect().height * 2; + const headerHeight = 59; //document.getElementsByTagName('header')[0].getBoundingClientRect().height; // this needs to be hardcoded since this element is in this component and has not mounted yet const resultsControlsHeight = 30; const sum = sqlEditorHeight + sqlToolbar + tabsHeight + resultsControlsHeight + headerHeight; - this.setState({ resultSetHeight: window.innerHeight - sum - 90}); + this.setState({ resultSetHeight: window.innerHeight - sum - 95}); } } getControls() { From 30ec58c9563f0082a1c60f071d421962a2b97ce1 Mon Sep 17 00:00:00 2001 From: alanna scott Date: Thu, 16 Mar 2017 12:54:01 -0700 Subject: [PATCH 4/4] fix linting --- .../SqlLab/components/ResultSet.jsx | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx index aaf4e9fcbaa8..1a4e57fc8d50 100644 --- a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx +++ b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx @@ -56,16 +56,30 @@ class ResultSet extends React.PureComponent { // hack to get height of result set table so it can be fixed and scroll in place if (this.state.resultSetHeight === '0') { // calculate result set table height - const sqlEditorHeight = 192; //document.getElementById('brace-editor').getBoundingClientRect().height; - const sqlToolbar = 30; //document.getElementById('js-sql-toolbar').getBoundingClientRect().height; - const tabsHeight = 88; //document.getElementsByClassName('nav-tabs')[0].getBoundingClientRect().height * 2; - const headerHeight = 59; //document.getElementsByTagName('header')[0].getBoundingClientRect().height; + + // document.getElementById('brace-editor').getBoundingClientRect().height; + const sqlEditorHeight = 192; + + // document.getElementById('js-sql-toolbar').getBoundingClientRect().height; + const sqlToolbar = 30; + + // document.getElementsByClassName('nav-tabs')[0].getBoundingClientRect().height * 2; + const tabsHeight = 88; + + // document.getElementsByTagName('header')[0].getBoundingClientRect().height; + const headerHeight = 59; // this needs to be hardcoded since this element is in this component and has not mounted yet const resultsControlsHeight = 30; - const sum = sqlEditorHeight + sqlToolbar + tabsHeight + resultsControlsHeight + headerHeight; - this.setState({ resultSetHeight: window.innerHeight - sum - 95}); + const sum = + sqlEditorHeight + + sqlToolbar + + tabsHeight + + resultsControlsHeight + + headerHeight; + + this.setState({ resultSetHeight: window.innerHeight - sum - 95 }); } } getControls() { @@ -209,7 +223,7 @@ class ResultSet extends React.PureComponent { /> {this.getControls.bind(this)()} {sql} -
+