[sql-lab] make results table scroll in static container (#2426)

* only scroll result set horizontally * only scroll results table, keep rest of ui static * use hard coded values * fix linting
apache · Mar 22, 2017 · 652e572 · 652e572
1 parent 65c89f5
commit 652e572
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 28 deletions.
diff --git 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
@@ -34,6 +34,7 @@ class ResultSet extends React.PureComponent {
       searchText: '',
       showModal: false,
       data: [],
+      resultSetHeight: '0',
     };
   }
   componentWillReceiveProps(nextProps) {
@@ -51,6 +52,36 @@ 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
+
+      // 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 });
+    }
+  }
   getControls() {
     if (this.props.search || this.props.visualize || this.props.csv) {
       let csvButton;
@@ -192,7 +223,7 @@ class ResultSet extends React.PureComponent {
             />
             {this.getControls.bind(this)()}
             {sql}
-            <div className="ResultSet">
+            <div className="ResultSet" style={{ height: `${this.state.resultSetHeight}px` }}>
               <Table
                 data={data.map(function (row) {
                   const newRow = {};

diff --git 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"
           >
-            <div style={{ overflow: 'auto' }}>
-              {results}
-            </div>
+            {results}
           </Tab>
           <Tab
             title="Query History"

diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
@@ -146,7 +146,7 @@ class SqlEditor extends React.PureComponent {
       );
     }
     const editorBottomBar = (
-      <div className="sql-toolbar clearfix">
+      <div className="sql-toolbar clearfix" id="js-sql-toolbar">
         <div className="pull-left">
           <Form inline>
             <RunQueryActionButton
@@ -196,25 +196,21 @@ class SqlEditor extends React.PureComponent {
             </Col>
           </Collapse>
           <Col md={this.props.hideLeftBar ? 12 : 9}>
-            <div className="scrollbar-container">
-              <div className="scrollbar-content">
-                <AceEditorWrapper
-                  actions={this.props.actions}
-                  onBlur={this.setQueryEditorSql.bind(this)}
-                  queryEditor={this.props.queryEditor}
-                  onAltEnter={this.runQuery.bind(this)}
-                  sql={this.props.queryEditor.sql}
-                  tables={this.props.tables}
-                />
-                {editorBottomBar}
-                <br />
-                <SouthPane
-                  editorQueries={this.props.editorQueries}
-                  dataPreviewQueries={this.props.dataPreviewQueries}
-                  actions={this.props.actions}
-                />
-              </div>
-            </div>
+            <AceEditorWrapper
+              actions={this.props.actions}
+              onBlur={this.setQueryEditorSql.bind(this)}
+              queryEditor={this.props.queryEditor}
+              onAltEnter={this.runQuery.bind(this)}
+              sql={this.props.queryEditor.sql}
+              tables={this.props.tables}
+            />
+            {editorBottomBar}
+            <br />
+            <SouthPane
+              editorQueries={this.props.editorQueries}
+              dataPreviewQueries={this.props.dataPreviewQueries}
+              actions={this.props.actions}
+            />
           </Col>
         </Row>
       </div>

diff --git a/superset/assets/javascripts/SqlLab/main.css b/superset/assets/javascripts/SqlLab/main.css
@@ -237,7 +237,16 @@ div.tablePopover:hover {
     padding-bottom: 3px;
     padding-top: 3px;
 }
-
+.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;
   margin: 0px 0px 10px 0px;