You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by yj...@apache.org on 2020/09/16 22:20:13 UTC
[incubator-superset] 01/01: perf(explore): render datasource
details only when needed
This is an automated email from the ASF dual-hosted git repository.
yjc pushed a commit to branch datasource-control
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 0788b92904047de686339e0dd7f38ca2fb4f118d
Author: Jesse Yang <je...@airbnb.com>
AuthorDate: Wed Sep 16 11:43:54 2020 -0700
perf(explore): render datasource details only when needed
---
.../components/controls/DatasourceControl.jsx | 81 +++++++++++++---------
1 file changed, 47 insertions(+), 34 deletions(-)
diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx
index 04f3c03..e371a0e 100644
--- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx
+++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx
@@ -99,6 +99,8 @@ class DatasourceControl extends React.PureComponent {
renderDatasource() {
const { datasource } = this.props;
+ const { showDatasource } = this.state;
+ const maxNumColumns = 30;
return (
<div className="m-t-10">
<Well className="m-t-0">
@@ -108,24 +110,32 @@ class DatasourceControl extends React.PureComponent {
</Label>
{` ${datasource.database.name} `}
</div>
- <Row className="datasource-container">
- <Col md={6}>
- <strong>Columns</strong>
- {datasource.columns.map(col => (
- <div key={col.column_name}>
- <ColumnOption showType column={col} />
- </div>
- ))}
- </Col>
- <Col md={6}>
- <strong>Metrics</strong>
- {datasource.metrics.map(m => (
- <div key={m.metric_name}>
- <MetricOption metric={m} showType />
- </div>
- ))}
- </Col>
- </Row>
+ {showDatasource && (
+ <Row className="datasource-container">
+ <Col md={6}>
+ <strong>Columns</strong>
+ {datasource.columns.slice(0, maxNumColumns).map(col => (
+ <div key={col.column_name}>
+ <ColumnOption showType column={col} />
+ </div>
+ ))}
+ {datasource.columns.length > maxNumColumns && (
+ <div key="too-many-columns">...</div>
+ )}
+ </Col>
+ <Col md={6}>
+ <strong>Metrics</strong>
+ {datasource.metrics.slice(0, maxNumColumns).map(m => (
+ <div key={m.metric_name}>
+ <MetricOption metric={m} showType />
+ </div>
+ ))}
+ {datasource.columns.length > maxNumColumns && (
+ <div key="too-many-metrics">...</div>
+ )}
+ </Col>
+ </Row>
+ )}
</Well>
</div>
);
@@ -134,6 +144,7 @@ class DatasourceControl extends React.PureComponent {
render() {
const { showChangeDatasourceModal, showEditDatasourceModal } = this.state;
const { datasource, onChange, value } = this.props;
+ const { showDatasource } = this.state;
return (
<div>
<ControlHeader {...this.props} />
@@ -183,28 +194,30 @@ class DatasourceControl extends React.PureComponent {
aria-label="Toggle datasource visibility"
tabIndex={0}
className={`fa fa-${
- this.state.showDatasource ? 'minus' : 'plus'
+ showDatasource ? 'minus' : 'plus'
}-square m-r-5 m-l-5 m-t-4`}
onClick={this.toggleShowDatasource}
/>
</a>
</OverlayTrigger>
</div>
- <Collapse in={this.state.showDatasource}>
- {this.renderDatasource()}
- </Collapse>
- <DatasourceModal
- datasource={datasource}
- show={showEditDatasourceModal}
- onDatasourceSave={this.onDatasourceSave}
- onHide={this.toggleEditDatasourceModal}
- />
- <ChangeDatasourceModal
- onDatasourceSave={this.onDatasourceSave}
- onHide={this.toggleChangeDatasourceModal}
- show={showChangeDatasourceModal}
- onChange={onChange}
- />
+ <Collapse in={showDatasource}>{this.renderDatasource()}</Collapse>
+ {showEditDatasourceModal && (
+ <DatasourceModal
+ datasource={datasource}
+ show={showEditDatasourceModal}
+ onDatasourceSave={this.onDatasourceSave}
+ onHide={this.toggleEditDatasourceModal}
+ />
+ )}
+ {showChangeDatasourceModal && (
+ <ChangeDatasourceModal
+ onDatasourceSave={this.onDatasourceSave}
+ onHide={this.toggleChangeDatasourceModal}
+ show={showChangeDatasourceModal}
+ onChange={onChange}
+ />
+ )}
</div>
);
}