mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
[sql-lab] improve table select performance (#2457)
* use fast filter for tables select * react-virtualized needs this package, throws error otherwise... * continue to use async select and this.getTableNamesBySubStr when a schema is not selected * import styles in same place as react-select css import
This commit is contained in:
parent
c9b59fab1f
commit
22522fc05f
@ -1,9 +1,10 @@
|
||||
const $ = window.$ = require('jquery');
|
||||
import React from 'react';
|
||||
import Select from 'react-select';
|
||||
import { Label, Button } from 'react-bootstrap';
|
||||
import TableElement from './TableElement';
|
||||
import AsyncSelect from '../../components/AsyncSelect';
|
||||
import Select from 'react-virtualized-select';
|
||||
import createFilterOptions from 'react-select-fast-filter-options';
|
||||
|
||||
const propTypes = {
|
||||
queryEditor: React.PropTypes.object.isRequired,
|
||||
@ -62,8 +63,8 @@ class SqlEditorLeftBar extends React.PureComponent {
|
||||
if (!this.props.queryEditor.dbId || !input) {
|
||||
return Promise.resolve({ options: [] });
|
||||
}
|
||||
const url = `/superset/tables/${this.props.queryEditor.dbId}/\
|
||||
${this.props.queryEditor.schema}/${input}`;
|
||||
const url = `/superset/tables/${this.props.queryEditor.dbId}/` +
|
||||
`${this.props.queryEditor.schema}/${input}`;
|
||||
return $.get(url).then((data) => ({ options: data.options }));
|
||||
}
|
||||
// TODO: move fetching methods to the actions.
|
||||
@ -129,6 +130,8 @@ ${this.props.queryEditor.schema}/${input}`;
|
||||
networkAlert = <p><Label bsStyle="danger">OFFLINE</Label></p>;
|
||||
}
|
||||
const shouldShowReset = window.location.search === '?reset=1';
|
||||
const options = this.state.tableOptions;
|
||||
const filterOptions = createFilterOptions({ options });
|
||||
return (
|
||||
<div className="scrollbar-container">
|
||||
<div className="clearfix sql-toolbar scrollbar-content">
|
||||
@ -148,6 +151,8 @@ ${this.props.queryEditor.schema}/${input}`;
|
||||
mutator={this.dbMutator.bind(this)}
|
||||
placeholder="Select a database"
|
||||
/>
|
||||
</div>
|
||||
<div className="m-t-5">
|
||||
<Select
|
||||
name="select-schema"
|
||||
placeholder={`Select a schema (${this.state.schemaOptions.length})`}
|
||||
@ -173,11 +178,13 @@ ${this.props.queryEditor.schema}/${input}`;
|
||||
placeholder={`Add a table (${this.state.tableOptions.length})`}
|
||||
autosize={false}
|
||||
onChange={this.changeTable.bind(this)}
|
||||
filterOptions={filterOptions}
|
||||
options={this.state.tableOptions}
|
||||
/>
|
||||
}
|
||||
{!this.props.queryEditor.schema &&
|
||||
<Select.Async
|
||||
<Select
|
||||
async
|
||||
name="async-select-table"
|
||||
ref="selectTable"
|
||||
value={this.state.tableName}
|
||||
|
@ -66,6 +66,7 @@
|
||||
"nvd3": "1.8.5",
|
||||
"react": "^15.3.2",
|
||||
"react-ace": "^4.1.5",
|
||||
"react-addons-shallow-compare": "^15.4.2",
|
||||
"react-bootstrap": "^0.30.3",
|
||||
"react-bootstrap-table": "^2.3.8",
|
||||
"react-dom": "^15.3.2",
|
||||
@ -76,7 +77,9 @@
|
||||
"react-redux": "^5.0.2",
|
||||
"react-resizable": "^1.3.3",
|
||||
"react-select": "^1.0.0-rc.2",
|
||||
"react-select-fast-filter-options": "^0.2.1",
|
||||
"react-syntax-highlighter": "^5.0.0",
|
||||
"react-virtualized-select": "^2.4.0",
|
||||
"reactable": "^0.14.0",
|
||||
"redux": "^3.5.2",
|
||||
"redux-localstorage": "^0.4.1",
|
||||
|
@ -91,3 +91,31 @@
|
||||
@import "../../node_modules/react-select/less/mixins.less";
|
||||
@import "../../node_modules/react-select/less/multi.less";
|
||||
@import "../../node_modules/react-select/less/spinner.less";
|
||||
@import "../../node_modules/react-virtualized/styles.css";
|
||||
|
||||
// importing css from "../../node_modules/react-virtualized-select/styles.css";
|
||||
// so the background color of a selected option matches the other selects
|
||||
.VirtualSelectGrid {
|
||||
z-index: 1;
|
||||
}
|
||||
.VirtualizedSelectOption {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
.VirtualizedSelectFocusedOption {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.VirtualizedSelectFocusedOption:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.VirtualizedSelectDisabledOption {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.VirtualizedSelectSelectedOption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user