QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-14 05:34:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "[sql lab] Make sql editor resizable (#3242)" (#3360)

Browse Source 
This reverts commit 75e69f02e8.
This commit is contained in:
Maxime Beauchemin
2017-08-23 14:40:08 -07:00
committed by GitHub
parent 0c36827368
commit 46d60880eb
10 changed files with 40 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
View File

@@ -32,7 +32,6 @@ const propTypes = {
sql: PropTypes.string.isRequired,
tables: PropTypes.array,
queryEditor: PropTypes.object.isRequired,
height: PropTypes.string,
};
const defaultProps = {
@@ -120,15 +119,14 @@ class AceEditorWrapper extends React.PureComponent {
this.setState({ sql: text });
}
render() {
const { height } = this.props;
return (
<AceEditor
ref="editor"
mode="sql"
theme="github"
onLoad={this.onEditorLoad.bind(this)}
onBlur={this.onBlur.bind(this)}
height={height}
minLines={12}
maxLines={12}
onChange={this.textChange.bind(this)}
width="100%"
editorProps={{ $blockScrolling: true }}

6
superset/assets/javascripts/SqlLab/components/ResultSet.jsx
View File

@@ -36,6 +36,7 @@ export default class ResultSet extends React.PureComponent {
searchText: '',
showModal: false,
data: null,
height: props.search ? props.height - RESULT_SET_CONTROLS_HEIGHT : props.height,
};
}
componentDidMount() {
@@ -142,8 +143,7 @@ export default class ResultSet extends React.PureComponent {
}
}
render() {
const { query, search, height } = this.props;
const tableHeight = search ? height - RESULT_SET_CONTROLS_HEIGHT : height;
const query = this.props.query;
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={tableHeight}
height={this.state.height}
filterText={this.state.searchText}
/>
</div>

65
superset/assets/javascripts/SqlLab/components/SouthPane.jsx
View File

@@ -4,7 +4,6 @@ import shortid from 'shortid';
import { Alert, Tab, Tabs } from 'react-bootstrap';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { AutoSizer } from 'react-virtualized';
import * as Actions from '../actions';
import QueryHistory from './QueryHistory';
@@ -56,7 +55,6 @@ class SouthPane extends React.PureComponent {
return window.innerHeight - sum - 95;
}
switchTab(id) {
this.props.actions.setActiveSouthPaneTab(id);
}
@@ -69,28 +67,13 @@ class SouthPane extends React.PureComponent {
let results;
if (latestQuery) {
results = (
<AutoSizer
disableWidth
>
{({ height }) => {
/*
checking of the height probably won't be necessary
after release of react-virtualized v10
*/
if (height !== 0) {
return (
<ResultSet
showControls
search
query={latestQuery}
actions={props.actions}
height={height}
/>
);
}
return <div />;
}}
</AutoSizer>
<ResultSet
showControls
search
query={latestQuery}
actions={props.actions}
height={this.state.innerTabHeight}
/>
);
} else {
results = <Alert bsStyle="info">Run a query to display results here</Alert>;
@@ -102,36 +85,20 @@ class SouthPane extends React.PureComponent {
eventKey={query.id}
key={query.id}
>
<AutoSizer
disableWidth
>
{({ height }) => {
/*
checking of the height probably won't be necessary
after release of react-virtualized v10
*/
if (height !== 0) {
return (
<ResultSet
query={query}
visualize={false}
csv={false}
actions={props.actions}
cache
height={height}
/>
);
}
return <div />;
}}
</AutoSizer>
<ResultSet
query={query}
visualize={false}
csv={false}
actions={props.actions}
cache
height={this.state.innerTabHeight}
/>
</Tab>
));
return (
<div className="SouthPane">
<Tabs
className="Tabs"
bsStyle="tabs"
id={shortid.generate()}
activeKey={this.props.activeSouthPaneTab}
@@ -147,7 +114,7 @@ class SouthPane extends React.PureComponent {
title="Query History"
eventKey="History"
>
<div className="QueryHistoryWrapper">
<div style={{ height: `${this.state.innerTabHeight}px`, overflow: 'scroll' }}>
<QueryHistory queries={props.editorQueries} actions={props.actions} />
</div>
</Tab>

146
superset/assets/javascripts/SqlLab/components/SplitPane.jsx
View File

@@ -1,146 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import delay from 'lodash.delay';
import { getTopOffset } from '../../../utils/common';
const propTypes = {
north: PropTypes.object.isRequired,
south: PropTypes.object.isRequired,
minHeight: PropTypes.number,
onSizeChange: PropTypes.func,
};
class SplitPane extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
dragging: false,
};
this.handleDraggingStart = this.handleDraggingStart.bind(this);
this.handleMouseUp = this.handleMouseUp.bind(this);
this.handleMouseMove = this.handleMouseMove.bind(this);
this.handleResize = this.handleResize.bind(this);
}
componentDidMount() {
window.addEventListener('mouseup', this.handleMouseUp);
window.addEventListener('mousemove', this.handleMouseMove);
window.addEventListener('resize', this.handleResize);
this.initSize();
}
componentWillUnmount() {
window.removeEventListener('mouseup', this.handleMouseUp);
window.removeEventListener('mousemove', this.handleMouseMove);
window.removeEventListener('resize', this.handleResize);
}
setSize(northInPercent, southInPercent) {
const totalHeight = this.refs.splitter.clientHeight - this.refs.dragBar.clientHeight;
const heightNorthInPixels = northInPercent * totalHeight / 100;
const heightSouthInPixels = southInPercent * totalHeight / 100;
if (this.props.onSizeChange) {
this.props.onSizeChange({
north: heightNorthInPixels,
south: heightSouthInPixels,
});
}
}
initSize() {
const totalHeight = this.refs.splitter.clientHeight;
const dragBarHeight = this.refs.dragBar.clientHeight;
const heightInPixels = (totalHeight - dragBarHeight) / 2;
const heightInPercent = heightInPixels * 100 / totalHeight;
this.setState({
...this.state,
heightNorth: heightInPercent,
heightSouth: heightInPercent,
});
this.setSize(heightInPercent, heightInPercent);
}
handleMouseMove(e) {
if (!this.state.dragging) {
return;
}
const minHeight = this.props.minHeight || 0;
const offset = getTopOffset(this.refs.splitter);
const totalHeight = this.refs.splitter.clientHeight;
const dragBarHeight = this.refs.dragBar.clientHeight;
const heightNorthInPixels = e.pageY - offset;
const heightSouthInPixels = totalHeight - heightNorthInPixels - dragBarHeight;
const heightNorthInPercent = 100 * heightNorthInPixels / totalHeight;
const heightSouthInPercent = 100 * heightSouthInPixels / totalHeight;
if (heightNorthInPercent >= minHeight
&& heightSouthInPercent >= minHeight) {
this.setState({
...this.state,
heightNorth: heightNorthInPercent,
heightSouth: heightSouthInPercent,
});
this.setSize(heightNorthInPercent, heightSouthInPercent);
}
}
handleDraggingStart() {
this.setState({ ...this.state, dragging: true });
}
handleResize() {
const { heightNorth, heightSouth } = this.state;
/*
The `delay` is needed since some events like 'onresize' happen before rendering.
That means that we can't calculate the sizes right.
*/
delay(() => {
this.setSize(heightNorth, heightSouth);
}, 100);
}
handleMouseUp() {
if (this.state.dragging) {
this.setState({ ...this.state, dragging: false });
}
}
render() {
return (
<div ref="splitter" className="Splitter">
<div
style={{ height: this.state.heightNorth + '%' }}
>
{this.props.north}
</div>
<div
ref="dragBar"
className="DragBar"
onMouseDown={this.handleDraggingStart}
>
<div className="DragBarVisible" />
</div>
<div
style={{ height: this.state.heightSouth + '%' }}
>
{this.props.south}
</div>
</div>
);
}
}
SplitPane.propTypes = propTypes;
export default SplitPane;

55
superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
View File

@@ -15,16 +15,14 @@ import {
import Button from '../../components/Button';
import AceEditorWrapper from './AceEditorWrapper';
import SouthPane from './SouthPane';
import SplitPane from './SplitPane';
import SaveQuery from './SaveQuery';
import Timer from '../../components/Timer';
import SqlEditorLeftBar from './SqlEditorLeftBar';
import AceEditorWrapper from './AceEditorWrapper';
import { STATE_BSSTYLE_MAP } from '../constants';
import RunQueryActionButton from './RunQueryActionButton';
const propTypes = {
actions: PropTypes.object.isRequired,
height: PropTypes.string.isRequired,
@@ -51,7 +49,6 @@ class SqlEditor extends React.PureComponent {
autorun: props.queryEditor.autorun,
ctas: '',
};
this.onSizeChange = this.onSizeChange.bind(this);
}
componentDidMount() {
this.onMount();
@@ -63,13 +60,6 @@ class SqlEditor extends React.PureComponent {
this.startQuery();
}
}
onSizeChange(newSizes) {
const bottomBarHeight = this.refs.editorBottomBar.clientHeight;
this.setState({
...this.state,
editorHeight: newSizes.north - bottomBarHeight,
});
}
setQueryEditorSql(sql) {
this.props.actions.queryEditorSetSql(this.props.queryEditor, sql);
}
@@ -157,7 +147,7 @@ class SqlEditor extends React.PureComponent {
);
}
const editorBottomBar = (
<div ref="editorBottomBar" className="sql-toolbar clearfix" id="js-sql-toolbar">
<div className="sql-toolbar clearfix" id="js-sql-toolbar">
<div className="pull-left">
<Form inline>
<RunQueryActionButton
@@ -222,34 +212,21 @@ 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.sqlEditorHeight(),
}}
>
<SplitPane
onSizeChange={this.onSizeChange}
minHeight={25}
north={
<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.editorHeight + 'px'}
/>
{editorBottomBar}
</div>
}
south={
<SouthPane
editorQueries={this.props.editorQueries}
dataPreviewQueries={this.props.dataPreviewQueries}
actions={this.props.actions}
/>
}
<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>