Skip to content

Commit

Permalink
[sql lab] using react-split-pane
Browse files Browse the repository at this point in the history
  • Loading branch information
@mistercrunch
mistercrunch committed Aug 24, 2017
1 parent 46d6088 commit 4250d88
Show file tree
Hide file tree
Showing 6 changed files with 78 additions and 82 deletions.
4 changes: 2 additions & 2 deletions superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const propTypes = {
sql: PropTypes.string.isRequired,
tables: PropTypes.array,
queryEditor: PropTypes.object.isRequired,
height: PropTypes.string,
};

const defaultProps = {
Expand Down Expand Up @@ -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 }}
Expand Down
6 changes: 3 additions & 3 deletions superset/assets/javascripts/SqlLab/components/ResultSet.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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() {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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>
Expand Down
38 changes: 5 additions & 33 deletions superset/assets/javascripts/SqlLab/components/SouthPane.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,47 +18,19 @@ const propTypes = {
dataPreviewQueries: PropTypes.array.isRequired,
actions: PropTypes.object.isRequired,
activeSouthPaneTab: PropTypes.string,
height: PropTypes.number,
};

const defaultProps = {
activeSouthPaneTab: 'Results',
};

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 - 50;
let latestQuery;
const props = this.props;
if (props.editorQueries.length > 0) {
Expand All @@ -72,7 +44,7 @@ class SouthPane extends React.PureComponent {
search
query={latestQuery}
actions={props.actions}
height={this.state.innerTabHeight}
height={innerTabHeight}
/>
);
} else {
Expand All @@ -91,7 +63,7 @@ class SouthPane extends React.PureComponent {
csv={false}
actions={props.actions}
cache
height={this.state.innerTabHeight}
height={innerTabHeight}
/>
</Tab>
));
Expand All @@ -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>
Expand Down
108 changes: 67 additions & 41 deletions superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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,
}}
>
Expand All @@ -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}
Expand All @@ -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>
Expand Down
3 changes: 0 additions & 3 deletions superset/assets/javascripts/SqlLab/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,9 +130,6 @@ div.Workspace {
display: inline-block;
background-color: #ccc;
}
.Pane2 {
width: 0;
}
.running {
background-color: lime;
color: black;
Expand Down
1 change: 1 addition & 0 deletions superset/assets/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@
"react-resizable": "^1.3.3",
"react-select": "1.0.0-rc.3",
"react-select-fast-filter-options": "^0.2.1",
"react-split-pane": "^0.1.66",
"react-syntax-highlighter": "^5.0.0",
"react-virtualized": "^9.3.0",
"react-virtualized-select": "^2.4.0",
Expand Down

0 comments on commit 4250d88

Please sign in to comment.