[superset] branch master updated: fix(explore): long metric name display (#12387)

[yo...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

yongjiezhao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new c327cb9  fix(explore): long metric name display (#12387)
c327cb9 is described below

commit c327cb911ee9b390b9954160da99225fb8a9a9f1
Author: Yongjie Zhao <yo...@gmail.com>
AuthorDate: Mon Jan 11 09:42:38 2021 +0800

    fix(explore): long metric name display (#12387)
    
    * fix(explore): long metric name display
    
    * add tooltip to control
---
 .../explore/components/AdhocMetricEditPopover.jsx  | 12 +++++++++-
 .../src/explore/components/AdhocMetricOption.jsx   | 28 +++++++++++++---------
 .../src/explore/components/OptionControls.tsx      |  3 +++
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx b/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx
index fe6b019..a6218b3 100644
--- a/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx
+++ b/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx
@@ -58,6 +58,12 @@ const ResizeIcon = styled.i`
   margin-left: ${({ theme }) => theme.gridUnit * 2}px;
 `;
 
+const ColumnOptionStyle = styled.span`
+  .option-label {
+    display: inline;
+  }
+`;
+
 const SAVED_TAB_KEY = 'SAVED';
 
 const startingWidth = 320;
@@ -220,7 +226,11 @@ export default class AdhocMetricEditPopover extends React.Component {
     if (column.metric_name && !column.verbose_name) {
       column.verbose_name = column.metric_name;
     }
-    return <ColumnOption column={column} showType />;
+    return (
+      <ColumnOptionStyle>
+        <ColumnOption column={column} showType />
+      </ColumnOptionStyle>
+    );
   }
 
   render() {
diff --git a/superset-frontend/src/explore/components/AdhocMetricOption.jsx b/superset-frontend/src/explore/components/AdhocMetricOption.jsx
index 270db91..77eab7c 100644
--- a/superset-frontend/src/explore/components/AdhocMetricOption.jsx
+++ b/superset-frontend/src/explore/components/AdhocMetricOption.jsx
@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Tooltip } from 'src/common/components/Tooltip';
 import AdhocMetric from '../AdhocMetric';
 import columnType from '../propTypes/columnType';
 import savedMetricType from '../propTypes/savedMetricType';
@@ -70,17 +71,22 @@ class AdhocMetricOption extends React.PureComponent {
         savedMetric={savedMetric}
         datasourceType={datasourceType}
       >
-        <DraggableOptionControlLabel
-          savedMetric={savedMetric}
-          label={adhocMetric.label}
-          onRemove={this.onRemoveMetric}
-          onMoveLabel={onMoveLabel}
-          onDropLabel={onDropLabel}
-          index={index}
-          type={OPTION_TYPES.metric}
-          isAdhoc
-          isFunction
-        />
+        <Tooltip
+          placement="top"
+          title={savedMetric.expression || adhocMetric.label}
+        >
+          <DraggableOptionControlLabel
+            savedMetric={savedMetric}
+            label={adhocMetric.label}
+            onRemove={this.onRemoveMetric}
+            onMoveLabel={onMoveLabel}
+            onDropLabel={onDropLabel}
+            index={index}
+            type={OPTION_TYPES.metric}
+            isAdhoc
+            isFunction
+          />
+        </Tooltip>
       </AdhocMetricPopoverTrigger>
     );
   }
diff --git a/superset-frontend/src/explore/components/OptionControls.tsx b/superset-frontend/src/explore/components/OptionControls.tsx
index 31de6ae..8e3121d 100644
--- a/superset-frontend/src/explore/components/OptionControls.tsx
+++ b/superset-frontend/src/explore/components/OptionControls.tsx
@@ -60,6 +60,9 @@ const Label = styled.div`
   svg {
     margin-right: ${({ theme }) => theme.gridUnit}px;
   }
+  .option-label {
+    display: inline;
+  }
 `;
 
 const CaretContainer = styled.div`