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/10/02 19:16:07 UTC
[incubator-superset] branch master updated: perf(explore): render
datasource details only when needed (#10924)
This is an automated email from the ASF dual-hosted git repository.
yjc pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 53cd05d perf(explore): render datasource details only when needed (#10924)
53cd05d is described below
commit 53cd05d74af0c5b07307b1c17c86e7c14d868d39
Author: Jesse Yang <je...@airbnb.com>
AuthorDate: Fri Oct 2 12:15:06 2020 -0700
perf(explore): render datasource details only when needed (#10924)
---
.../explore/components/DatasourceControl_spec.jsx | 8 +-
.../components/controls/DatasourceControl.jsx | 85 ++++++++++++++--------
2 files changed, 59 insertions(+), 34 deletions(-)
diff --git a/superset-frontend/spec/javascripts/explore/components/DatasourceControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/DatasourceControl_spec.jsx
index 3f7af15..592fb97 100644
--- a/superset-frontend/spec/javascripts/explore/components/DatasourceControl_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/DatasourceControl_spec.jsx
@@ -60,14 +60,14 @@ describe('DatasourceControl', () => {
});
}
- it('renders a Modal', () => {
+ it('should not render Modal', () => {
const wrapper = setup();
- expect(wrapper.find(DatasourceModal)).toExist();
+ expect(wrapper.find(DatasourceModal)).toHaveLength(0);
});
- it('renders a ChangeDatasourceModal', () => {
+ it('should not render ChangeDatasourceModal', () => {
const wrapper = setup();
- expect(wrapper.find(ChangeDatasourceModal)).toExist();
+ expect(wrapper.find(ChangeDatasourceModal)).toHaveLength(0);
});
it('show or hide Edit Datasource option', () => {
diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx
index eb62c58..d805c93 100644
--- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx
+++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx
@@ -73,6 +73,17 @@ const Styles = styled.div`
}
`;
+/**
+ * <Col> used in column details.
+ */
+const ColumnsCol = styled(Col)`
+ overflow: auto; /* for very very long columns names */
+ white-space: nowrap; /* make sure tooltip trigger is on the same line as the metric */
+ .and-more {
+ padding-left: 38px;
+ }
+`;
+
class DatasourceControl extends React.PureComponent {
constructor(props) {
super(props);
@@ -116,6 +127,8 @@ class DatasourceControl extends React.PureComponent {
renderDatasource() {
const { datasource } = this.props;
+ const { showDatasource } = this.state;
+ const maxNumColumns = 50;
return (
<div className="m-t-10">
<Well className="m-t-0">
@@ -125,24 +138,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">
+ <ColumnsCol 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 className="and-more">...</div>
+ )}
+ </ColumnsCol>
+ <ColumnsCol 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 className="and-more">...</div>
+ )}
+ </ColumnsCol>
+ </Row>
+ )}
</Well>
</div>
);
@@ -214,18 +235,22 @@ class DatasourceControl extends React.PureComponent {
<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}
- />
+ {showEditDatasourceModal && (
+ <DatasourceModal
+ datasource={datasource}
+ show={showEditDatasourceModal}
+ onDatasourceSave={this.onDatasourceSave}
+ onHide={this.toggleEditDatasourceModal}
+ />
+ )}
+ {showChangeDatasourceModal && (
+ <ChangeDatasourceModal
+ onDatasourceSave={this.onDatasourceSave}
+ onHide={this.toggleChangeDatasourceModal}
+ show={showChangeDatasourceModal}
+ onChange={onChange}
+ />
+ )}
</Styles>
);
}