[sql lab] using react-split-pane (#3363)

* [sql lab] using react-split-pane

* padding

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

@@ -32,6 +32,7 @@ const propTypes = {
   sql: PropTypes.string.isRequired,
   tables: PropTypes.array,
   queryEditor: PropTypes.object.isRequired,
+  height: PropTypes.string,
 };
 
 const defaultProps = {
@@ -125,8 +126,7 @@ class AceEditorWrapper extends React.PureComponent {
         theme="github"
         onLoad={this.onEditorLoad.bind(this)}
         onBlur={this.onBlur.bind(this)}
-        minLines={12}
-        maxLines={12}
+        height={this.props.height}
         onChange={this.textChange.bind(this)}
         width="100%"
         editorProps={{ $blockScrolling: true }}

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

@@ -27,7 +27,7 @@ const defaultProps = {
   cache: false,
 };
 
-const RESULT_SET_CONTROLS_HEIGHT = 46;
+const SEARCH_HEIGHT = 46;
 
 export default class ResultSet extends React.PureComponent {
   constructor(props) {
@@ -36,7 +36,6 @@ export default class ResultSet extends React.PureComponent {
       searchText: '',
       showModal: false,
       data: null,
-      height: props.search ? props.height - RESULT_SET_CONTROLS_HEIGHT : props.height,
     };
   }
   componentDidMount() {
@@ -144,6 +143,7 @@ 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;
     let sql;
 
     if (this.props.showSql) {
@@ -190,7 +190,7 @@ export default class ResultSet extends React.PureComponent {
             <FilterableTable
               data={data}
               orderedColumnKeys={results.columns.map(col => col.name)}
-              height={this.state.height}
+              height={height}
               filterText={this.state.searchText}
             />
           </div>

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

@@ -18,6 +18,7 @@ const propTypes = {
   dataPreviewQueries: PropTypes.array.isRequired,
   actions: PropTypes.object.isRequired,
   activeSouthPaneTab: PropTypes.string,
+  height: PropTypes.number,
 };
 
 const defaultProps = {
@@ -25,40 +26,11 @@ const defaultProps = {
 };
 
 class SouthPane extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      innerTabHeight: this.getInnerTabHeight(),
-    };
-  }
-  getInnerTabHeight() {
-    // hack to get height the tab container so it can be fixed and scroll in place
-    // calculate inner tab 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;
-
-    const sum =
-      sqlEditorHeight +
-      sqlToolbar +
-      tabsHeight +
-      headerHeight;
-
-    return window.innerHeight - sum - 95;
-  }
   switchTab(id) {
     this.props.actions.setActiveSouthPaneTab(id);
   }
   render() {
+    const innerTabHeight = this.props.height - 55;
     let latestQuery;
     const props = this.props;
     if (props.editorQueries.length > 0) {
@@ -72,7 +44,7 @@ class SouthPane extends React.PureComponent {
           search
           query={latestQuery}
           actions={props.actions}
-          height={this.state.innerTabHeight}
+          height={innerTabHeight}
         />
       );
     } else {
@@ -91,7 +63,7 @@ class SouthPane extends React.PureComponent {
           csv={false}
           actions={props.actions}
           cache
-          height={this.state.innerTabHeight}
+          height={innerTabHeight}
         />
       </Tab>
     ));
@@ -114,7 +86,7 @@ class SouthPane extends React.PureComponent {
             title="Query History"
             eventKey="History"
           >
-            <div style={{ height: `${this.state.innerTabHeight}px`, overflow: 'scroll' }}>
+            <div style={{ height: `${innerTabHeight}px`, overflow: 'scroll' }}>
               <QueryHistory queries={props.editorQueries} actions={props.actions} />
             </div>
           </Tab>

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

@@ -12,9 +12,9 @@ import {
   Tooltip,
   Collapse,
 } from 'react-bootstrap';
+import SplitPane from 'react-split-pane';
 
 import Button from '../../components/Button';
-
 import SouthPane from './SouthPane';
 import SaveQuery from './SaveQuery';
 import Timer from '../../components/Timer';
@@ -50,16 +50,24 @@ class SqlEditor extends React.PureComponent {
       ctas: '',
     };
   }
-  componentDidMount() {
-    this.onMount();
-  }
-  onMount() {
+  componentWillMount() {
     if (this.state.autorun) {
       this.setState({ autorun: false });
       this.props.actions.queryEditorSetAutorun(this.props.queryEditor, false);
       this.startQuery();
     }
   }
+  componentDidMount() {
+    this.onResize();
+  }
+  onResize() {
+    const height = this.sqlEditorHeight();
+    this.setState({
+      editorPaneHeight: this.refs.ace.clientHeight,
+      southPaneHeight: height - this.refs.ace.clientHeight,
+      height,
+    });
+  }
   setQueryEditorSql(sql) {
     this.props.actions.queryEditorSetSql(this.props.queryEditor, sql);
   }
@@ -101,24 +109,7 @@ class SqlEditor extends React.PureComponent {
     const mysteryVerticalHeight = 50;
     return window.innerHeight - tabNavHeight - navBarHeight - mysteryVerticalHeight;
   }
-
-  render() {
-    const qe = this.props.queryEditor;
-    let limitWarning = null;
-    if (this.props.latestQuery && this.props.latestQuery.limit_reached) {
-      const tooltip = (
-        <Tooltip id="tooltip">
-          It appears that the number of rows in the query results displayed
-          was limited on the server side to
-          the {this.props.latestQuery.rows} limit.
-        </Tooltip>
-      );
-      limitWarning = (
-        <OverlayTrigger placement="left" overlay={tooltip}>
-          <Label bsStyle="warning" className="m-r-5">LIMIT</Label>
-        </OverlayTrigger>
-      );
-    }
+  renderEditorBottomBar() {
     let ctasControls;
     if (this.props.database && this.props.database.allow_ctas) {
       const ctasToolTip = 'Create table as with query results';
@@ -146,7 +137,23 @@ class SqlEditor extends React.PureComponent {
         </FormGroup>
       );
     }
-    const editorBottomBar = (
+    const qe = this.props.queryEditor;
+    let limitWarning = null;
+    if (this.props.latestQuery && this.props.latestQuery.limit_reached) {
+      const tooltip = (
+        <Tooltip id="tooltip">
+          It appears that the number of rows in the query results displayed
+          was limited on the server side to
+          the {this.props.latestQuery.rows} limit.
+        </Tooltip>
+      );
+      limitWarning = (
+        <OverlayTrigger placement="left" overlay={tooltip}>
+          <Label bsStyle="warning" className="m-r-5">LIMIT</Label>
+        </OverlayTrigger>
+      );
+    }
+    return (
       <div className="sql-toolbar clearfix" id="js-sql-toolbar">
         <div className="pull-left">
           <Form inline>
@@ -181,11 +188,15 @@ class SqlEditor extends React.PureComponent {
         </div>
       </div>
     );
+  }
+  render() {
+    const height = this.sqlEditorHeight();
+    const defaultNorthHeight = 200;
     return (
       <div
         className="SqlEditor"
         style={{
-          minHeight: this.sqlEditorHeight(),
+          minHeight: height,
           height: this.props.height,
         }}
       >
@@ -200,7 +211,7 @@ class SqlEditor extends React.PureComponent {
               lg={3}
             >
               <SqlEditorLeftBar
-                height={this.sqlEditorHeight()}
+                height={height}
                 queryEditor={this.props.queryEditor}
                 tables={this.props.tables}
                 actions={this.props.actions}
@@ -212,22 +223,37 @@ class SqlEditor extends React.PureComponent {
             sm={this.props.hideLeftBar ? 12 : 7}
             md={this.props.hideLeftBar ? 12 : 8}
             lg={this.props.hideLeftBar ? 12 : 9}
+            style={{ height: this.state.height }}
           >
-            <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}
-            />
+            <SplitPane
+              split="horizontal"
+              defaultSize={defaultNorthHeight}
+              minSize={100}
+              onChange={this.onResize.bind(this)}
+            >
+              <div ref="ace" style={{ width: '100%' }}>
+                <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}
+                    height={((this.state.editorPaneHeight || defaultNorthHeight) - 50).toString()}
+                  />
+                  {this.renderEditorBottomBar()}
+                </div>
+              </div>
+              <div ref="south">
+                <SouthPane
+                  editorQueries={this.props.editorQueries}
+                  dataPreviewQueries={this.props.dataPreviewQueries}
+                  actions={this.props.actions}
+                  height={this.state.southPaneHeight}
+                />
+              </div>
+            </SplitPane>
           </Col>
         </Row>
       </div>

superset/assets/javascripts/SqlLab/main.less

@@ -130,9 +130,6 @@ div.Workspace {
     display: inline-block;
     background-color: #ccc;
 }
-.Pane2 {
-    width: 0;
-}
 .running {
     background-color: lime;
     color: black;
@@ -292,3 +289,6 @@ a.Link {
 .tooltip-inner {
     max-width: 500px;
 }
+.SouthPane {
+    margin-top: 10px;
+}