mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
[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
This commit is contained in:
parent
65c89f54dc
commit
652e572b56
@ -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
|
||||
|
@ -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 = {};
|
||||
|
@ -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"
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user