[sql-lab] only scroll the result set table

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

superset/assets/javascripts/SqlLab/components/ResultSet.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Alert, Button, ButtonGroup, ProgressBar } from 'react-bootstrap';
-import { Table } from 'reactable';
 import shortid from 'shortid';
 
 import VisualizeModal from './VisualizeModal';
 import HighlightedSql from './HighlightedSql';
+import FilterTable from '../../components/FilterTable';
 
 const propTypes = {
   actions: React.PropTypes.object,
@@ -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 = 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 - 95});
+    }
+  }
   getControls() {
     if (this.props.search || this.props.visualize || this.props.csv) {
       let csvButton;
@@ -129,6 +146,7 @@ class ResultSet extends React.PureComponent {
   reFetchQueryResults(query) {
     this.props.actions.reFetchQueryResults(query);
   }
+
   render() {
     const query = this.props.query;
     const results = query.results;
@@ -183,6 +201,7 @@ class ResultSet extends React.PureComponent {
         </div>);
     } else if (query.state === 'success') {
       if (results && data && data.length > 0) {
+        console.log('results.columns', results.columns)
         return (
           <div>
             <VisualizeModal
@@ -192,26 +211,11 @@ class ResultSet extends React.PureComponent {
             />
             {this.getControls.bind(this)()}
             {sql}
-            <div className="ResultSet">
-              <Table
-                data={data.map(function (row) {
-                  const newRow = {};
-                  for (const k in row) {
-                    const val = row[k];
-                    if (typeof(val) === 'string') {
-                      newRow[k] = val;
-                    } else {
-                      newRow[k] = JSON.stringify(val);
-                    }
-                  }
-                  return newRow;
-                })}
-                columns={results.columns.map((col) => col.name)}
-                sortable
-                className="table table-condensed table-bordered"
-                filterBy={this.state.searchText}
-                filterable={results.columns.map((c) => c.name)}
-                hideFilterInput
+            <div className="ResultSet" ref={(ref) => { this.resultSetDiv = ref; }}>
+              <FilterTable
+                data={data}
+                height={this.state.resultSetHeight}
+                columns={results.columns}
               />
             </div>
           </div>

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"

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>

superset/assets/javascripts/SqlLab/main.css

@@ -238,6 +238,32 @@ div.tablePopover:hover {
     padding-top: 3px;
 }
 
+.table-fixed-header {
+  width: 100%;
+  border-collapse: collapse;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+}
+
+.table-fixed-header thead {
+  display: block;
+  width: 100%;
+  overflow: auto;
+  border-bottom: 1px solid #ccc;
+}
+.table-fixed-header tbody {
+  display: block;
+  width: 100%;
+  overflow: auto;
+}
+.table-fixed-header th, .table-fixed-header td {
+  padding: .5em 1em;
+  text-align: left;
+  vertical-align: top;
+  border-left: 1px solid #ccc;
+}
+
 .ace_editor {
   border: 1px solid #ccc;
   margin: 0px 0px 10px 0px;
@@ -294,3 +320,167 @@ a.Link {
 .tooltip-inner {
     max-width: 500px;
 }
+
+
+
+
+
+.ResultSet {
+    overflow: auto;
+}
+
+
+/* Collection default theme */
+
+.ReactVirtualized__Collection {
+}
+
+.ReactVirtualized__Collection__innerScrollContainer {
+}
+
+/* Grid default theme */
+
+.ReactVirtualized__Grid {
+}
+
+.ReactVirtualized__Grid__innerScrollContainer {
+}
+
+/* Table default theme */
+
+.ReactVirtualized__Table {
+}
+
+.ReactVirtualized__Table__Grid {
+}
+
+.ReactVirtualized__Table__headerRow {
+  font-weight: 700;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ReactVirtualized__Table__row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ReactVirtualized__Table__headerTruncatedText {
+  display: inline-block;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ReactVirtualized__Table__headerColumn,
+.ReactVirtualized__Table__rowColumn {
+  margin-right: 10px;
+  min-width: 0px;
+}
+.ReactVirtualized__Table__rowColumn {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ReactVirtualized__Table__headerColumn:first-of-type,
+.ReactVirtualized__Table__rowColumn:first-of-type {
+  margin-left: 10px;
+}
+.ReactVirtualized__Table__sortableHeaderColumn {
+  cursor: pointer;
+}
+
+.ReactVirtualized__Table__sortableHeaderIconContainer {
+  display: flex;
+  align-items: center;
+}
+.ReactVirtualized__Table__sortableHeaderIcon {
+  flex: 0 0 24px;
+  height: 1em;
+  width: 1em;
+  fill: currentColor;
+}
+
+/* List default theme */
+
+.ReactVirtualized__List {
+}
+
+
+
+
+
+
+.GridRow {
+  margin-top: 15px;
+  display: flex;
+  flex-direction: row;
+}
+.GridColumn {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+}
+.LeftSideGridContainer {
+  flex: 0 0 50px;
+}
+
+.BodyGrid {
+  width: 100%;
+  border: 1px solid #e0e0e0;
+}
+
+.evenRow,
+.oddRow {
+  border-bottom: 1px solid #e0e0e0;
+}
+.oddRow {
+  background-color: #fafafa;
+}
+
+.cell {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0.5em 1em;
+}
+.cell {
+  border-right: 1px solid #e0e0e0;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.uniformSizeCell {
+  padding: 0.5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.tableRow {
+  border-bottom: 1px solid #eee;
+}
+.tableColumn {
+  padding: 5px 15px 5px 0;
+}
+
+.Tab {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 4px 6px;
+  outline: none;
+  background: #eee;
+  margin: 4px;
+  cursor: pointer;
+}
+
+.ActiveTab {
+  background-color: #4db6ac;
+  border: 1px solid #3ca59b;
+  color: rgba(255, 255, 255, 0.8);
+  cursor: default;
+}