fix(explore): long metric name display (#12387)

* fix(explore): long metric name display * add tooltip to control
apache · Jan 11, 2021 · c327cb9 · c327cb9
1 parent 9acf48f
commit c327cb9
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 12 deletions.
diff --git 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
@@ -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
@@ -60,6 +60,9 @@ const Label = styled.div`
   svg {
     margin-right: ${({ theme }) => theme.gridUnit}px;
   }
+  .option-label {
+    display: inline;
+  }
 `;
 
 const CaretContainer = styled.div`