Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(sql lab): SQL Lab Compile Query Delay #20206

Merged
merged 1 commit into from
May 27, 2022
Merged

fix(sql lab): SQL Lab Compile Query Delay #20206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion superset-frontend/src/SqlLab/actions/sqlLab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -917,9 +917,13 @@ export function updateSavedQuery(query) {
}

export function queryEditorSetSql(queryEditor, sql) {
return { type: QUERY_EDITOR_SET_SQL, queryEditor, sql };
}

export function queryEditorSetAndSaveSql(queryEditor, sql) {
return function (dispatch) {
// saved query and set tab state use this action
dispatch({ type: QUERY_EDITOR_SET_SQL, queryEditor, sql });
dispatch(queryEditorSetSql(queryEditor, sql));
if (isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)) {
return SupersetClient.put({
endpoint: encodeURI(`/tabstateview/${queryEditor.id}`),
Expand Down
6 changes: 3 additions & 3 deletions superset-frontend/src/SqlLab/actions/sqlLab.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -635,7 +635,7 @@ describe('async actions', () => {
});
});

describe('queryEditorSetSql', () => {
describe('queryEditorSetAndSaveSql', () => {
const sql = 'SELECT * ';
const expectedActions = [
{
Expand All @@ -651,7 +651,7 @@ describe('async actions', () => {
const store = mockStore({});

return store
.dispatch(actions.queryEditorSetSql(queryEditor, sql))
.dispatch(actions.queryEditorSetAndSaveSql(queryEditor, sql))
.then(() => {
expect(store.getActions()).toEqual(expectedActions);
expect(fetchMock.calls(updateTabStateEndpoint)).toHaveLength(1);
Expand All @@ -668,7 +668,7 @@ describe('async actions', () => {

const store = mockStore({});

store.dispatch(actions.queryEditorSetSql(queryEditor, sql));
store.dispatch(actions.queryEditorSetAndSaveSql(queryEditor, sql));

expect(store.getActions()).toEqual(expectedActions);
expect(fetchMock.calls(updateTabStateEndpoint)).toHaveLength(0);
Expand Down
2 changes: 1 addition & 1 deletion superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const NOOP = () => {};
const mockedProps = {
queries: [],
actions: {
queryEditorSetSql: NOOP,
queryEditorSetAndSaveSql: NOOP,
cloneQueryToNewTab: NOOP,
fetchQueryResults: NOOP,
clearQueryResults: NOOP,
Expand Down
2 changes: 1 addition & 1 deletion superset-frontend/src/SqlLab/components/QueryHistory/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import QueryTable from 'src/SqlLab/components/QueryTable';
interface QueryHistoryProps {
queries: Query[];
actions: {
queryEditorSetSql: Function;
queryEditorSetAndSaveSql: Function;
cloneQueryToNewTab: Function;
fetchQueryResults: Function;
clearQueryResults: Function;
Expand Down
2 changes: 1 addition & 1 deletion superset-frontend/src/SqlLab/components/QuerySearch/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ interface QuerySearchProps {
actions: {
addDangerToast: (msg: string) => void;
setDatabases: (data: Record<string, any>) => Record<string, any>;
queryEditorSetSql: Function;
queryEditorSetAndSaveSql: Function;
cloneQueryToNewTab: Function;
fetchQueryResults: Function;
clearQueryResults: Function;
Expand Down
8 changes: 4 additions & 4 deletions superset-frontend/src/SqlLab/components/QueryTable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ interface QueryTableQuery
interface QueryTableProps {
columns?: string[];
actions: {
queryEditorSetSql: Function;
queryEditorSetAndSaveSql: Function;
cloneQueryToNewTab: Function;
fetchQueryResults: Function;
clearQueryResults: Function;
Expand Down Expand Up @@ -94,7 +94,7 @@ const QueryTable = ({
const user = useSelector<RootState, User>(state => state.sqlLab.user);

const {
queryEditorSetSql,
queryEditorSetAndSaveSql,
cloneQueryToNewTab,
fetchQueryResults,
clearQueryResults,
Expand All @@ -103,7 +103,7 @@ const QueryTable = ({

const data = useMemo(() => {
const restoreSql = (query: Query) => {
queryEditorSetSql({ id: query.sqlEditorId }, query.sql);
queryEditorSetAndSaveSql({ id: query.sqlEditorId }, query.sql);
};

const openQueryInNewTab = (query: Query) => {
Expand Down Expand Up @@ -314,7 +314,7 @@ const QueryTable = ({
clearQueryResults,
cloneQueryToNewTab,
fetchQueryResults,
queryEditorSetSql,
queryEditorSetAndSaveSql,
removeQuery,
]);

Expand Down
2 changes: 1 addition & 1 deletion superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const mockedEmptyProps = {
latestQueryId: '',
dataPreviewQueries: [],
actions: {
queryEditorSetSql: NOOP,
queryEditorSetAndSaveSql: NOOP,
cloneQueryToNewTab: NOOP,
fetchQueryResults: NOOP,
clearQueryResults: NOOP,
Expand Down
2 changes: 1 addition & 1 deletion superset-frontend/src/SqlLab/components/SouthPane/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ interface SouthPanePropTypes {
latestQueryId?: string;
dataPreviewQueries: any[];
actions: {
queryEditorSetSql: Function;
queryEditorSetAndSaveSql: Function;
cloneQueryToNewTab: Function;
fetchQueryResults: Function;
clearQueryResults: Function;
Expand Down
40 changes: 18 additions & 22 deletions superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import {
queryEditorSetAutorun,
queryEditorSetQueryLimit,
queryEditorSetSql,
queryEditorSetAndSaveSql,
queryEditorSetTemplateParams,
runQuery,
saveQuery,
Expand Down Expand Up @@ -177,7 +178,6 @@ class SqlEditor extends React.PureComponent {
ctas: '',
northPercent: props.queryEditor.northPercent || INITIAL_NORTH_PERCENT,
southPercent: props.queryEditor.southPercent || INITIAL_SOUTH_PERCENT,
sql: props.queryEditor.sql,
autocompleteEnabled: getItem(
LocalStorageKeys.sqllab__is_autocomplete_enabled,
true,
Expand All @@ -198,12 +198,13 @@ class SqlEditor extends React.PureComponent {
this.stopQuery = this.stopQuery.bind(this);
this.saveQuery = this.saveQuery.bind(this);
this.onSqlChanged = this.onSqlChanged.bind(this);
this.setQueryEditorSql = this.setQueryEditorSql.bind(this);
this.setQueryEditorSqlWithDebounce = debounce(
this.setQueryEditorSql.bind(this),
this.setQueryEditorAndSaveSql = this.setQueryEditorAndSaveSql.bind(this);
this.setQueryEditorAndSaveSqlWithDebounce = debounce(
this.setQueryEditorAndSaveSql.bind(this),
SET_QUERY_EDITOR_SQL_DEBOUNCE_MS,
);
this.queryPane = this.queryPane.bind(this);
this.getHotkeyConfig = this.getHotkeyConfig.bind(this);
this.renderQueryLimit = this.renderQueryLimit.bind(this);
this.getAceEditorAndSouthPaneHeights =
this.getAceEditorAndSouthPaneHeights.bind(this);
Expand Down Expand Up @@ -250,12 +251,6 @@ class SqlEditor extends React.PureComponent {
});
}

componentDidUpdate() {
if (this.props.queryEditor.sql !== this.state.sql) {
this.onSqlChanged(this.props.queryEditor.sql);
}
}

componentWillUnmount() {
window.removeEventListener('resize', this.handleWindowResize);
window.removeEventListener('beforeunload', this.onBeforeUnload);
Expand Down Expand Up @@ -290,12 +285,12 @@ class SqlEditor extends React.PureComponent {
}

onSqlChanged(sql) {
this.setState({ sql });
this.setQueryEditorSqlWithDebounce(sql);
this.props.queryEditorSetSql(this.props.queryEditor, sql);
this.setQueryEditorAndSaveSqlWithDebounce(sql);
// Request server-side validation of the query text
if (this.canValidateQuery()) {
// NB. requestValidation is debounced
this.requestValidation();
this.requestValidation(sql);
}
}

Expand Down Expand Up @@ -330,7 +325,7 @@ class SqlEditor extends React.PureComponent {
key: 'ctrl+r',
descr: t('Run query'),
func: () => {
if (this.state.sql.trim() !== '') {
if (this.props.queryEditor.sql.trim() !== '') {
this.runQuery();
}
},
Expand All @@ -340,7 +335,7 @@ class SqlEditor extends React.PureComponent {
key: 'ctrl+enter',
descr: t('Run query'),
func: () => {
if (this.state.sql.trim() !== '') {
if (this.props.queryEditor.sql.trim() !== '') {
this.runQuery();
}
},
Expand Down Expand Up @@ -383,8 +378,8 @@ class SqlEditor extends React.PureComponent {
this.setState({ showEmptyState: bool });
}

setQueryEditorSql(sql) {
this.props.queryEditorSetSql(this.props.queryEditor, sql);
setQueryEditorAndSaveSql(sql) {
this.props.queryEditorSetAndSaveSql(this.props.queryEditor, sql);
}

setQueryLimit(queryLimit) {
Expand All @@ -396,7 +391,7 @@ class SqlEditor extends React.PureComponent {
const qe = this.props.queryEditor;
const query = {
dbId: qe.dbId,
sql: qe.selectedText ? qe.selectedText : this.state.sql,
sql: qe.selectedText ? qe.selectedText : this.props.queryEditor.sql,
sqlEditorId: qe.id,
schema: qe.schema,
templateParams: qe.templateParams,
Expand Down Expand Up @@ -429,12 +424,12 @@ class SqlEditor extends React.PureComponent {
};
}

requestValidation() {
requestValidation(sql) {
if (this.props.database) {
const qe = this.props.queryEditor;
const query = {
dbId: qe.dbId,
sql: this.state.sql,
sql,
sqlEditorId: qe.id,
schema: qe.schema,
templateParams: qe.templateParams,
Expand Down Expand Up @@ -466,7 +461,7 @@ class SqlEditor extends React.PureComponent {
const qe = this.props.queryEditor;
const query = {
dbId: qe.dbId,
sql: qe.selectedText ? qe.selectedText : this.state.sql,
sql: qe.selectedText ? qe.selectedText : qe.sql,
sqlEditorId: qe.id,
tab: qe.title,
schema: qe.schema,
Expand Down Expand Up @@ -682,7 +677,7 @@ class SqlEditor extends React.PureComponent {
runQuery={this.runQuery}
selectedText={qe.selectedText}
stopQuery={this.stopQuery}
sql={this.state.sql}
sql={this.props.queryEditor.sql}
overlayCreateAsMenu={showMenu ? runMenuBtn : null}
/>
</span>
Expand Down Expand Up @@ -854,6 +849,7 @@ function mapDispatchToProps(dispatch) {
queryEditorSetAutorun,
queryEditorSetQueryLimit,
queryEditorSetSql,
queryEditorSetAndSaveSql,
queryEditorSetTemplateParams,
runQuery,
saveQuery,
Expand Down