pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 08:39:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

[sql lab] fix table dropdown with large schema make UI unresponsive (#2547)

Browse Source 
Indexing was done on render, moving to doing it only when the data
changes.
This commit is contained in:
Maxime Beauchemin 2017-04-04 12:19:44 -07:00 committed by GitHub
parent db6b2f3ae1
commit 6566377740
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,12 +3,15 @@ import Button from '../../components/Button';
const propTypes = { const propTypes = {
allowAsync: PropTypes.bool.isRequired, allowAsync: PropTypes.bool.isRequired,
dbId: PropTypes.number.isRequired, dbId: PropTypes.number,
queryState: PropTypes.string.isRequired, queryState: PropTypes.string.isRequired,
runQuery: PropTypes.func.isRequired, runQuery: PropTypes.func.isRequired,
selectedText: PropTypes.string, selectedText: PropTypes.string,
stopQuery: PropTypes.func.isRequired, stopQuery: PropTypes.func.isRequired,
}; };
const defaultProps = {
allowAsync: false,
};
export default function RunQueryActionButton(props) { export default function RunQueryActionButton(props) {
const runBtnText = props.selectedText ? 'Run Selected Query' : 'Run Query'; const runBtnText = props.selectedText ? 'Run Selected Query' : 'Run Query';
@ -69,3 +72,4 @@ export default function RunQueryActionButton(props) {
} }
RunQueryActionButton.propTypes = propTypes; RunQueryActionButton.propTypes = propTypes;
RunQueryActionButton.defaultProps = defaultProps;

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

@ -148,7 +148,7 @@ class SqlEditor extends React.PureComponent {
<div className="pull-left"> <div className="pull-left">
<Form inline> <Form inline>
<RunQueryActionButton <RunQueryActionButton
allowAsync={this.props.database && this.props.database.allow_run_async} allowAsync={this.props.database ? this.props.database.allow_run_async : false}
dbId={this.props.queryEditor.dbId} dbId={this.props.queryEditor.dbId}
queryState={this.props.latestQuery && this.props.latestQuery.state} queryState={this.props.latestQuery && this.props.latestQuery.state}
runQuery={this.runQuery.bind(this)} runQuery={this.runQuery.bind(this)}

10
superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
View File

@ -65,20 +65,22 @@ class SqlEditorLeftBar extends React.PureComponent {
`${this.props.queryEditor.schema}/${input}`; `${this.props.queryEditor.schema}/${input}`;
return $.get(url).then((data) => ({ options: data.options })); return $.get(url).then((data) => ({ options: data.options }));
} }
// TODO: move fetching methods to the actions.
fetchTables(dbId, schema, substr) { fetchTables(dbId, schema, substr) {
// This can be large so it shouldn't be put in the Redux store
if (dbId && schema) { if (dbId && schema) {
this.setState({ tableLoading: true, tableOptions: [] }); this.setState({ tableLoading: true, tableOptions: [] });
const url = `/superset/tables/${dbId}/${schema}/${substr}/`; const url = `/superset/tables/${dbId}/${schema}/${substr}/`;
$.get(url, (data) => { $.get(url, (data) => {
const filterOptions = createFilterOptions({ options: data.options });
this.setState({ this.setState({
filterOptions,
tableLoading: false, tableLoading: false,
tableOptions: data.options, tableOptions: data.options,
tableLength: data.tableLength, tableLength: data.tableLength,
}); });
}); });
} else { } else {
this.setState({ tableLoading: false, tableOptions: [] }); this.setState({ tableLoading: false, tableOptions: [], filterOptions: null });
} }
} }
changeTable(tableOpt) { changeTable(tableOpt) {
@ -126,8 +128,6 @@ class SqlEditorLeftBar extends React.PureComponent {
} }
render() { render() {
const shouldShowReset = window.location.search === '?reset=1'; const shouldShowReset = window.location.search === '?reset=1';
const options = this.state.tableOptions;
const filterOptions = createFilterOptions({ options });
return ( return (
<div className="scrollbar-container"> <div className="scrollbar-container">
<div className="clearfix sql-toolbar scrollbar-content"> <div className="clearfix sql-toolbar scrollbar-content">
@ -173,7 +173,7 @@ class SqlEditorLeftBar extends React.PureComponent {
placeholder={`Add a table (${this.state.tableOptions.length})`} placeholder={`Add a table (${this.state.tableOptions.length})`}
autosize={false} autosize={false}
onChange={this.changeTable.bind(this)} onChange={this.changeTable.bind(this)}
filterOptions={filterOptions} filterOptions={this.state.filterOptions}
options={this.state.tableOptions} options={this.state.tableOptions}
/> />
} }