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:12 UTC
[incubator-superset] branch datasource-control created (now 0788b92)
This is an automated email from the ASF dual-hosted git repository.
yjc pushed a change to branch datasource-control
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git.
at 0788b92 perf(explore): render datasource details only when needed
This branch includes the following new commits:
new 0788b92 perf(explore): render datasource details only when needed
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[incubator-superset] 01/01: perf(explore): render datasource
details only when needed
Posted by yj...@apache.org.
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>
);
}