This is an automated email from the ASF dual-hosted git repository.
beto pushed a commit to branch VIZ-589
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit af9617619fb8b8510c656165403c65cb9ca4c3a0
Author: Beto Dealmeida <robe...@dealmeida.net>
AuthorDate: Thu Nov 7 11:39:45 2019 -0800
WIP
---
.../spec/javascripts/sqllab/SqlEditor_spec.jsx | 12 ++---
.../assets/src/SqlLab/components/SqlEditor.jsx | 60 ++++++++++++++--------
superset/assets/src/SqlLab/constants.js | 5 +-
superset/assets/src/SqlLab/main.less | 33 +++++++-----
4 files changed, 67 insertions(+), 43 deletions(-)
diff --git a/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx
b/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx
index dcf2609..861ddae 100644
--- a/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx
+++ b/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx
@@ -21,8 +21,8 @@ import { shallow } from 'enzyme';
import { defaultQueryEditor, initialState, queries, table } from './fixtures';
import {
- SQL_EDITOR_GUTTER_HEIGHT,
- SQL_EDITOR_GUTTER_MARGIN,
+ SQL_EDITOR_VERTICAL_GUTTER_HEIGHT,
+ SQL_EDITOR_VERTICAL_GUTTER_MARGIN,
SQL_TOOLBAR_HEIGHT,
} from '../../../src/SqlLab/constants';
import AceEditorWrapper from '../../../src/SqlLab/components/AceEditorWrapper';
@@ -73,8 +73,8 @@ describe('SqlEditor', () => {
const totalSize = parseFloat(wrapper.find(AceEditorWrapper).props().height)
+ wrapper.find(SouthPane).props().height
+ SQL_TOOLBAR_HEIGHT
- + (SQL_EDITOR_GUTTER_MARGIN * 2)
- + SQL_EDITOR_GUTTER_HEIGHT;
+ + (SQL_EDITOR_VERTICAL_GUTTER_MARGIN * 2)
+ + SQL_EDITOR_VERTICAL_GUTTER_HEIGHT;
expect(totalSize).toEqual(MOCKED_SQL_EDITOR_HEIGHT);
});
it('does not overflow the editor window after resizing', () => {
@@ -83,8 +83,8 @@ describe('SqlEditor', () => {
const totalSize = parseFloat(wrapper.find(AceEditorWrapper).props().height)
+ wrapper.find(SouthPane).props().height
+ SQL_TOOLBAR_HEIGHT
- + (SQL_EDITOR_GUTTER_MARGIN * 2)
- + SQL_EDITOR_GUTTER_HEIGHT;
+ + (SQL_EDITOR_VERTICAL_GUTTER_MARGIN * 2)
+ + SQL_EDITOR_VERTICAL_GUTTER_HEIGHT;
expect(totalSize).toEqual(450);
});
it('render a LimitControl with default limit', () => {
diff --git a/superset/assets/src/SqlLab/components/SqlEditor.jsx
b/superset/assets/src/SqlLab/components/SqlEditor.jsx
index f6c52c2..695b153 100644
--- a/superset/assets/src/SqlLab/components/SqlEditor.jsx
+++ b/superset/assets/src/SqlLab/components/SqlEditor.jsx
@@ -47,9 +47,10 @@ import SqlEditorLeftBar from './SqlEditorLeftBar';
import AceEditorWrapper from './AceEditorWrapper';
import {
STATE_BSSTYLE_MAP,
- SQL_EDITOR_GUTTER_HEIGHT,
- SQL_EDITOR_GUTTER_MARGIN,
+ SQL_EDITOR_VERTICAL_GUTTER_HEIGHT,
+ SQL_EDITOR_VERTICAL_GUTTER_MARGIN,
SQL_TOOLBAR_HEIGHT,
+ SQL_EDITOR_HORIZONTAL_GUTTER_WIDTH,
} from '../constants';
import RunQueryActionButton from './RunQueryActionButton';
import { FeatureFlag, isFeatureEnabled } from '../../featureFlags';
@@ -57,9 +58,12 @@ import { FeatureFlag, isFeatureEnabled } from
'../../featureFlags';
const SQL_EDITOR_PADDING = 10;
const INITIAL_NORTH_PERCENT = 30;
const INITIAL_SOUTH_PERCENT = 70;
+const INITIAL_WEST_PERCENT = 20;
+const INITIAL_EAST_PERCENT = 80;
const SET_QUERY_EDITOR_SQL_DEBOUNCE_MS = 2000;
const VALIDATION_DEBOUNCE_MS = 600;
const WINDOW_RESIZE_THROTTLE_MS = 100;
+const SQL_EDITOR_MIN_SIZE = 300;
const propTypes = {
actions: PropTypes.object.isRequired,
@@ -110,6 +114,7 @@ class SqlEditor extends React.PureComponent {
SET_QUERY_EDITOR_SQL_DEBOUNCE_MS,
);
this.queryPane = this.queryPane.bind(this);
+ this.leftBar = this.leftBar.bind(this);
this.getAceEditorAndSouthPaneHeights =
this.getAceEditorAndSouthPaneHeights.bind(this);
this.getSqlEditorHeight = this.getSqlEditorHeight.bind(this);
this.requestValidation = debounce(
@@ -173,10 +178,10 @@ class SqlEditor extends React.PureComponent {
getAceEditorAndSouthPaneHeights(height, northPercent, southPercent) {
return {
aceEditorHeight: height * northPercent / 100
- - (SQL_EDITOR_GUTTER_HEIGHT / 2 + SQL_EDITOR_GUTTER_MARGIN)
+ - (SQL_EDITOR_VERTICAL_GUTTER_HEIGHT / 2 +
SQL_EDITOR_VERTICAL_GUTTER_MARGIN)
- SQL_TOOLBAR_HEIGHT,
southPaneHeight: height * southPercent / 100
- - (SQL_EDITOR_GUTTER_HEIGHT / 2 + SQL_EDITOR_GUTTER_MARGIN),
+ - (SQL_EDITOR_VERTICAL_GUTTER_HEIGHT / 2 +
SQL_EDITOR_VERTICAL_GUTTER_MARGIN),
};
}
getHotkeyConfig() {
@@ -237,7 +242,7 @@ class SqlEditor extends React.PureComponent {
}
elementStyle(dimension, elementSize, gutterSize) {
return {
- [dimension]: `calc(${elementSize}% - ${gutterSize +
SQL_EDITOR_GUTTER_MARGIN}px)`,
+ [dimension]: `calc(${elementSize}% - ${gutterSize +
SQL_EDITOR_VERTICAL_GUTTER_MARGIN}px)`,
};
}
requestValidation() {
@@ -310,7 +315,7 @@ class SqlEditor extends React.PureComponent {
elementStyle={this.elementStyle}
minSize={200}
direction="vertical"
- gutterSize={SQL_EDITOR_GUTTER_HEIGHT}
+ gutterSize={SQL_EDITOR_VERTICAL_GUTTER_HEIGHT}
onDragStart={this.onResizeStart}
onDragEnd={this.onResizeEnd}
>
@@ -340,6 +345,22 @@ class SqlEditor extends React.PureComponent {
</Split>
);
}
+ leftBar() {
+ return (
+ <CSSTransition
+ classNames="schemaPane"
+ in={!this.props.hideLeftBar}
+ timeout={300}
+ >
+ <SqlEditorLeftBar
+ database={this.props.database}
+ queryEditor={this.props.queryEditor}
+ tables={this.props.tables}
+ actions={this.props.actions}
+ />
+ </CSSTransition>
+ );
+ }
renderEditorBottomBar(hotkeys) {
let ctasControls;
if (this.props.database && this.props.database.allow_ctas) {
@@ -495,23 +516,18 @@ class SqlEditor extends React.PureComponent {
}
render() {
return (
- <div ref={this.sqlEditorRef} className="SqlEditor">
- <CSSTransition
- classNames="schemaPane"
- in={!this.props.hideLeftBar}
- timeout={300}
- >
- <div className="schemaPane">
- <SqlEditorLeftBar
- database={this.props.database}
- queryEditor={this.props.queryEditor}
- tables={this.props.tables}
- actions={this.props.actions}
- />
- </div>
- </CSSTransition>
+ <Split
+ ref={this.sqlEditorRef}
+ className={this.props.hideLeftBar ? 'SqlEditor-expanded' : 'SqlEditor'}
+ sizes={[INITIAL_WEST_PERCENT, INITIAL_EAST_PERCENT]}
+ direction="horizontal"
+ minSize={SQL_EDITOR_MIN_SIZE}
+ gutterSize={SQL_EDITOR_HORIZONTAL_GUTTER_WIDTH}
+ snapOffset={0}
+ >
+ {this.leftBar()}
{this.queryPane()}
- </div>
+ </Split>
);
}
}
diff --git a/superset/assets/src/SqlLab/constants.js
b/superset/assets/src/SqlLab/constants.js
index c030ce2..ce12611 100644
--- a/superset/assets/src/SqlLab/constants.js
+++ b/superset/assets/src/SqlLab/constants.js
@@ -45,9 +45,10 @@ export const TIME_OPTIONS = [
];
// SqlEditor layout constants
-export const SQL_EDITOR_GUTTER_HEIGHT = 5;
-export const SQL_EDITOR_GUTTER_MARGIN = 3;
+export const SQL_EDITOR_VERTICAL_GUTTER_HEIGHT = 5;
+export const SQL_EDITOR_VERTICAL_GUTTER_MARGIN = 3;
export const SQL_TOOLBAR_HEIGHT = 51;
+export const SQL_EDITOR_HORIZONTAL_GUTTER_WIDTH = 5;
// kilobyte storage
export const KB_STORAGE = 1024;
diff --git a/superset/assets/src/SqlLab/main.less
b/superset/assets/src/SqlLab/main.less
index 88b6841..15593f0 100644
--- a/superset/assets/src/SqlLab/main.less
+++ b/superset/assets/src/SqlLab/main.less
@@ -229,7 +229,7 @@ div.Workspace {
}
}
-.SqlEditor {
+.SqlEditor, .SqlEditor-expanded {
display: flex;
flex-direction: row;
height: 100%;
@@ -241,14 +241,11 @@ div.Workspace {
}
.schemaPane {
- flex: 0 0 300px;
- max-width: 300px;
transition: transform .3s ease-in-out;
}
.queryPane {
flex: 1 1 auto;
- padding-left: 10px;
}
.schemaPane-enter-done, .schemaPane-exit {
@@ -273,19 +270,29 @@ div.Workspace {
.schemaPane-exit-done + .queryPane {
margin-left: 0;
}
+}
- .gutter {
- border-top: 1px solid #ccc;
- border-bottom: 1px solid #ccc;
- width: 3%;
- margin: 3px 47%;
- }
+.SqlEditor .gutter-horizontal {
+ border-left: 1px solid #ccc;
+ border-right: 1px solid #ccc;
+ height: 40px;
+ cursor: col-resize;
+ margin-right: 10px;
+}
- .gutter.gutter-vertical {
- cursor: row-resize;
- }
+.SqlEditor-expanded .gutter-horizontal {
+ display: none;
+}
+
+.queryPane .gutter-vertical {
+ border-top: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
+ width: 3%;
+ margin: 3px 47%;
+ cursor: row-resize;
}
+
.SqlEditorLeftBar {
height: 100%;
display: flex;
