From 53cd05d74af0c5b07307b1c17c86e7c14d868d39 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Fri, 2 Oct 2020 12:15:06 -0700
Subject: [PATCH] perf(explore): render datasource details only when needed
 (#10924)

---
 .../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 3f7af15063d..592fb975e77 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 eb62c58409b..d805c934258 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>
     );
   }