QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-05-11 10:55:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf(explore): render datasource details only when needed (#10924)

Browse Source
This commit is contained in:
Jesse Yang
2020-10-02 12:15:06 -07:00
committed by GitHub
parent 269644d18e
commit 53cd05d74a
2 changed files with 59 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
superset-frontend/src/explore/components/controls/DatasourceControl.jsx
View File

@@ -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>
);
}