From e282ae30f2a40bde8ed2ee6c75307bce660a2335 Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Mon, 2 Aug 2021 19:12:38 +0200
Subject: [PATCH 01/11] Implement dynamic tooltip

---
 .../DndColumnSelect.tsx                       |  6 +-
 .../DndFilterSelect.tsx                       |  6 +-
 .../OptionWrapper.test.tsx                    | 15 ++---
 .../DndColumnSelectControl/OptionWrapper.tsx  | 63 ++++++++++++++++++-
 .../controls/DndColumnSelectControl/types.ts  |  4 +-
 .../controls/OptionControls/index.tsx         | 36 ++++++++---
 6 files changed, 102 insertions(+), 28 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
index d677aa2104d8a..9ac7d045ac643 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
@@ -26,7 +26,6 @@ import OptionWrapper from 'src/explore/components/controls/DndColumnSelectContro
 import { OptionSelector } from 'src/explore/components/controls/DndColumnSelectControl/utils';
 import { DatasourcePanelDndItem } from 'src/explore/components/DatasourcePanel/types';
 import { DndItemType } from 'src/explore/components/DndItemType';
-import { StyledColumnOption } from 'src/explore/components/optionRenderers';
 
 export const DndColumnSelect = (props: LabelProps) => {
   const {
@@ -99,9 +98,8 @@ export const DndColumnSelect = (props: LabelProps) => {
         onShiftOptions={onShiftOptions}
         type={DndItemType.ColumnOption}
         canDelete={canDelete}
-      >
-        <StyledColumnOption column={column} showType />
-      </OptionWrapper>
+        column={column}
+      />
     ));
 
   return (
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
index f0b7c1d44d1a8..ab44875e96e53 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
@@ -26,7 +26,6 @@ import {
   t,
 } from '@superset-ui/core';
 import { ColumnMeta } from '@superset-ui/chart-controls';
-import { Tooltip } from 'src/components/Tooltip';
 import {
   OPERATOR_ENUM_TO_OPERATOR_TYPE,
   Operators,
@@ -284,14 +283,13 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => {
           <OptionWrapper
             key={index}
             index={index}
+            label={label}
             clickClose={onClickClose}
             onShiftOptions={onShiftOptions}
             type={DndItemType.FilterOption}
             withCaret
             isExtra={adhocFilter.isExtra}
-          >
-            <Tooltip title={label}>{label}</Tooltip>
-          </OptionWrapper>
+          />
         </AdhocFilterPopoverTrigger>
       );
     });
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx
index c46f49be0107e..e237cea989a5c 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx
@@ -28,9 +28,8 @@ test('renders with default props', () => {
       clickClose={jest.fn()}
       type={'Column' as DndItemType}
       onShiftOptions={jest.fn()}
-    >
-      Option
-    </OptionWrapper>,
+      label="Option"
+    />,
     { useDnd: true },
   );
   expect(container).toBeInTheDocument();
@@ -46,17 +45,15 @@ test('triggers onShiftOptions on drop', () => {
         clickClose={jest.fn()}
         type={'Column' as DndItemType}
         onShiftOptions={onShiftOptions}
-      >
-        Option 1
-      </OptionWrapper>
+        label="Option 1"
+      />
       <OptionWrapper
         index={2}
         clickClose={jest.fn()}
         type={'Column' as DndItemType}
         onShiftOptions={onShiftOptions}
-      >
-        Option 2
-      </OptionWrapper>
+        label="Option 2"
+      />
     </>,
     { useDnd: true },
   );
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
index 62230c56f87b1..9ed846dd4e0af 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
@@ -29,8 +29,18 @@ import {
   OptionProps,
   OptionItemInterface,
 } from 'src/explore/components/controls/DndColumnSelectControl/types';
+import { Tooltip } from 'src/components/Tooltip';
+import { StyledColumnOption } from 'src/explore/components/optionRenderers';
+import { styled } from '@superset-ui/core';
 import Option from './Option';
 
+export const OptionLabel = styled.div`
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 export default function OptionWrapper(
   props: OptionProps & {
     type: DndItemType;
@@ -39,22 +49,24 @@ export default function OptionWrapper(
 ) {
   const {
     index,
+    label,
+    column,
     type,
     onShiftOptions,
     clickClose,
     withCaret,
     isExtra,
     canDelete = true,
-    children,
     ...rest
   } = props;
   const ref = useRef<HTMLDivElement>(null);
+  const labelRef = useRef<HTMLDivElement>(null);
 
   const item: OptionItemInterface = {
     dragIndex: index,
     type,
   };
-  const [, drag] = useDrag({
+  const [{ isDragging }, drag] = useDrag({
     item,
     collect: (monitor: DragSourceMonitor) => ({
       isDragging: monitor.isDragging(),
@@ -105,6 +117,49 @@ export default function OptionWrapper(
     },
   });
 
+  const shouldShowTooltip = () => {
+    if (labelRef && labelRef.current) {
+      return labelRef.current.scrollWidth > labelRef.current.clientWidth;
+    }
+    return false;
+  };
+
+  const Label = () => {
+    if (label) {
+      const showTooltip = !isDragging && shouldShowTooltip();
+      if (!showTooltip) {
+        return <>{label}</>;
+      }
+      return <Tooltip title={label}>{label}</Tooltip>;
+    }
+    return null;
+  };
+
+  const ColumnOption = () => {
+    if (column) {
+      const showTooltip = !isDragging && shouldShowTooltip();
+      return (
+        <StyledColumnOption
+          column={column}
+          labelRef={labelRef}
+          showTooltip={showTooltip}
+          showType
+        />
+      );
+    }
+    return null;
+  };
+
+  const LabelContent = () => {
+    if (label) {
+      return <Label />;
+    }
+    if (column) {
+      return <ColumnOption />;
+    }
+    return null;
+  };
+
   drag(drop(ref));
 
   return (
@@ -116,7 +171,9 @@ export default function OptionWrapper(
         isExtra={isExtra}
         canDelete={canDelete}
       >
-        {children}
+        <OptionLabel ref={label ? labelRef : undefined}>
+          <LabelContent />
+        </OptionLabel>
       </Option>
     </DragContainer>
   );
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts
index 2d7142e2d7354..502247ec3f47c 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts
@@ -23,8 +23,10 @@ import { DatasourcePanelDndItem } from '../../DatasourcePanel/types';
 import { DndItemType } from '../../DndItemType';
 
 export interface OptionProps {
-  children: ReactNode;
+  children?: ReactNode;
   index: number;
+  label?: string;
+  column?: ColumnMeta;
   clickClose: (index: number) => void;
   withCaret?: boolean;
   isExtra?: boolean;
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 0469b4b916a7c..7b5c0150745cd 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -49,7 +49,7 @@ export const OptionControlContainer = styled.div<{
 export const Label = styled.div`
   ${({ theme }) => `
     display: flex;
-    max-width: 100%;
+    width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     align-items: center;
@@ -195,7 +195,9 @@ export const OptionControlLabel = ({
 }) => {
   const theme = useTheme();
   const ref = useRef<HTMLDivElement>(null);
-  const [, drop] = useDrop({
+  const labelRef = useRef<HTMLDivElement>(null);
+  const hasMetricName = savedMetric?.metric_name;
+  const [_, drop] = useDrop({
     accept: type,
     drop() {
       onDropLabel?.();
@@ -242,7 +244,7 @@ export const OptionControlLabel = ({
       item.index = hoverIndex;
     },
   });
-  const [, drag] = useDrag({
+  const [{ isDragging }, drag] = useDrag({
     item: {
       type,
       index,
@@ -253,11 +255,28 @@ export const OptionControlLabel = ({
     }),
   });
 
+  const shouldShowTooltip = () => {
+    if (labelRef && labelRef.current) {
+      return labelRef.current.scrollWidth > labelRef.current.clientWidth;
+    }
+    return false;
+  };
+
   const getLabelContent = () => {
-    if (savedMetric?.metric_name) {
-      return <StyledMetricOption metric={savedMetric} />;
+    const showTooltip = !isDragging && shouldShowTooltip();
+    if (savedMetric && hasMetricName) {
+      return (
+        <StyledMetricOption
+          metric={savedMetric}
+          labelRef={labelRef}
+          showTooltip={showTooltip}
+        />
+      );
+    }
+    if (!showTooltip) {
+      return label;
     }
-    return <Tooltip title={tooltipTitle}>{label}</Tooltip>;
+    return <Tooltip title={tooltipTitle || label}>{label}</Tooltip>;
   };
 
   const getOptionControlContent = () => (
@@ -273,7 +292,10 @@ export const OptionControlLabel = ({
       >
         <Icons.XSmall iconColor={theme.colors.grayscale.light1} />
       </CloseContainer>
-      <Label data-test="control-label">
+      <Label
+        data-test="control-label"
+        ref={!hasMetricName ? labelRef : undefined}
+      >
         {isFunction && <Icons.FunctionX viewBox="0 0 16 11" iconSize="l" />}
         {getLabelContent()}
       </Label>

From 3c10fe35def8a59fced1d784f12a27acb99d5695 Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Wed, 4 Aug 2021 15:41:07 +0200
Subject: [PATCH 02/11] Normalize and consolidate

---
 .../DndColumnSelectControl/OptionWrapper.tsx  |  2 ++
 .../controls/OptionControls/index.tsx         | 19 ++++++++++++-------
 .../explore/components/optionRenderers.tsx    |  1 +
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
index 9ed846dd4e0af..a239683f19995 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
@@ -119,6 +119,8 @@ export default function OptionWrapper(
 
   const shouldShowTooltip = () => {
     if (labelRef && labelRef.current) {
+      console.log("SCROLL WIDTH OPTION WRAPPER", labelRef.current.scrollWidth);
+      console.log("CLIENT WIDTH OPTION", labelRef.current.clientWidth);
       return labelRef.current.scrollWidth > labelRef.current.clientWidth;
     }
     return false;
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 7b5c0150745cd..c7f8361bb0b33 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -45,7 +45,6 @@ export const OptionControlContainer = styled.div<{
   border-radius: 3px;
   cursor: ${({ withCaret }) => (withCaret ? 'pointer' : 'default')};
 `;
-
 export const Label = styled.div`
   ${({ theme }) => `
     display: flex;
@@ -71,6 +70,11 @@ export const Label = styled.div`
   `}
 `;
 
+const LabelText = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 export const CaretContainer = styled.div`
   height: 100%;
   border-left: solid 1px ${({ theme }) => theme.colors.grayscale.dark2}0C;
@@ -274,9 +278,13 @@ export const OptionControlLabel = ({
       );
     }
     if (!showTooltip) {
-      return label;
+      return <LabelText ref={labelRef}>{label}</LabelText>;
     }
-    return <Tooltip title={tooltipTitle || label}>{label}</Tooltip>;
+    return (
+      <Tooltip title={tooltipTitle || label}>
+        <LabelText ref={labelRef}>{label}</LabelText>
+      </Tooltip>
+    );
   };
 
   const getOptionControlContent = () => (
@@ -292,10 +300,7 @@ export const OptionControlLabel = ({
       >
         <Icons.XSmall iconColor={theme.colors.grayscale.light1} />
       </CloseContainer>
-      <Label
-        data-test="control-label"
-        ref={!hasMetricName ? labelRef : undefined}
-      >
+      <Label data-test="control-label">
         {isFunction && <Icons.FunctionX viewBox="0 0 16 11" iconSize="l" />}
         {getLabelContent()}
       </Label>
diff --git a/superset-frontend/src/explore/components/optionRenderers.tsx b/superset-frontend/src/explore/components/optionRenderers.tsx
index 74d2891df9104..fbd641db3742c 100644
--- a/superset-frontend/src/explore/components/optionRenderers.tsx
+++ b/superset-frontend/src/explore/components/optionRenderers.tsx
@@ -27,6 +27,7 @@ import {
 } from '@superset-ui/chart-controls';
 
 const OptionContainer = styled.div`
+  width: 100%;
   > span {
     display: flex;
     align-items: center;

From 8e44b1c2cddac39f4e27afc7a4c780dff25ee7e9 Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Wed, 4 Aug 2021 15:48:24 +0200
Subject: [PATCH 03/11] Clean up

---
 .../controls/DndColumnSelectControl/OptionWrapper.tsx           | 2 --
 1 file changed, 2 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
index a239683f19995..9ed846dd4e0af 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
@@ -119,8 +119,6 @@ export default function OptionWrapper(
 
   const shouldShowTooltip = () => {
     if (labelRef && labelRef.current) {
-      console.log("SCROLL WIDTH OPTION WRAPPER", labelRef.current.scrollWidth);
-      console.log("CLIENT WIDTH OPTION", labelRef.current.clientWidth);
       return labelRef.current.scrollWidth > labelRef.current.clientWidth;
     }
     return false;

From 72755bc585702164c31b94cbdfd5e260daf95f03 Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Wed, 4 Aug 2021 17:12:53 +0200
Subject: [PATCH 04/11] Refactor and clean up

---
 .../DndColumnSelectControl/OptionWrapper.tsx  | 69 ++++++++++---------
 .../controls/OptionControls/index.tsx         | 18 +++--
 2 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
index 02773f8008e94..72859138fbae9 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
@@ -31,6 +31,7 @@ import {
 import { Tooltip } from 'src/components/Tooltip';
 import { StyledColumnOption } from 'src/explore/components/optionRenderers';
 import { styled } from '@superset-ui/core';
+import { ColumnMeta } from '@superset-ui/chart-controls/src';
 import Option from './Option';
 
 export const OptionLabel = styled.div`
@@ -40,6 +41,8 @@ export const OptionLabel = styled.div`
   white-space: nowrap;
 `;
 
+const LabelText = styled.span``;
+
 export default function OptionWrapper(
   props: OptionProps & {
     type: string;
@@ -119,45 +122,49 @@ export default function OptionWrapper(
     },
   });
 
-  const shouldShowTooltip = () => {
-    if (labelRef && labelRef.current) {
-      return labelRef.current.scrollWidth > labelRef.current.clientWidth;
-    }
-    return false;
-  };
+  const shouldShowTooltip =
+    !isDragging &&
+    labelRef &&
+    labelRef.current &&
+    labelRef.current.scrollWidth > labelRef.current.clientWidth;
 
-  const Label = () => {
-    if (label) {
-      const showTooltip = !isDragging && shouldShowTooltip();
-      if (!showTooltip) {
-        return <>{label}</>;
-      }
-      return <Tooltip title={label}>{label}</Tooltip>;
+  const LabelContent = () => {
+    if (!shouldShowTooltip) {
+      return <LabelText>{label}</LabelText>;
     }
-    return null;
+    return (
+      <Tooltip title={label}>
+        <LabelText>{label}</LabelText>
+      </Tooltip>
+    );
   };
 
   const ColumnOption = () => {
-    if (column) {
-      const showTooltip = !isDragging && shouldShowTooltip();
-      return (
-        <StyledColumnOption
-          column={column}
-          labelRef={labelRef}
-          showTooltip={showTooltip}
-          showType
-        />
-      );
-    }
-    return null;
+    const showTooltip = !isDragging && shouldShowTooltip;
+    return (
+      <StyledColumnOption
+        column={column as ColumnMeta}
+        labelRef={labelRef}
+        showTooltip={!!showTooltip}
+        showType
+      />
+    );
   };
 
-  const LabelContent = () => {
+  const Label = () => {
     if (label) {
-      return <Label />;
+      return (
+        <OptionLabel ref={labelRef}>
+          <LabelContent />
+        </OptionLabel>
+      );
     }
     if (column) {
-      return <ColumnOption />;
+      return (
+        <OptionLabel>
+          <ColumnOption />
+        </OptionLabel>
+      );
     }
     return null;
   };
@@ -173,9 +180,7 @@ export default function OptionWrapper(
         isExtra={isExtra}
         canDelete={canDelete}
       >
-        <OptionLabel ref={label ? labelRef : undefined}>
-          <LabelContent />
-        </OptionLabel>
+        <Label />
       </Option>
     </DragContainer>
   );
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index c7f8361bb0b33..906b34eb7a912 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -259,25 +259,23 @@ export const OptionControlLabel = ({
     }),
   });
 
-  const shouldShowTooltip = () => {
-    if (labelRef && labelRef.current) {
-      return labelRef.current.scrollWidth > labelRef.current.clientWidth;
-    }
-    return false;
-  };
-
   const getLabelContent = () => {
-    const showTooltip = !isDragging && shouldShowTooltip();
+    const shouldShowTooltip =
+      !isDragging &&
+      labelRef &&
+      labelRef.current &&
+      labelRef.current.scrollWidth > labelRef.current.clientWidth;
+
     if (savedMetric && hasMetricName) {
       return (
         <StyledMetricOption
           metric={savedMetric}
           labelRef={labelRef}
-          showTooltip={showTooltip}
+          showTooltip={!!shouldShowTooltip}
         />
       );
     }
-    if (!showTooltip) {
+    if (!shouldShowTooltip) {
       return <LabelText ref={labelRef}>{label}</LabelText>;
     }
     return (

From c2527010dceeab94c9514b7601f0374cb3af0153 Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Wed, 4 Aug 2021 17:15:36 +0200
Subject: [PATCH 05/11] Remove unnecessary var

---
 .../DndColumnSelectControl/OptionWrapper.tsx  | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
index 72859138fbae9..138d09364c1e4 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
@@ -139,17 +139,14 @@ export default function OptionWrapper(
     );
   };
 
-  const ColumnOption = () => {
-    const showTooltip = !isDragging && shouldShowTooltip;
-    return (
-      <StyledColumnOption
-        column={column as ColumnMeta}
-        labelRef={labelRef}
-        showTooltip={!!showTooltip}
-        showType
-      />
-    );
-  };
+  const ColumnOption = () => (
+    <StyledColumnOption
+      column={column as ColumnMeta}
+      labelRef={labelRef}
+      showTooltip={!!shouldShowTooltip}
+      showType
+    />
+  );
 
   const Label = () => {
     if (label) {

From 937dc04da9a6f2c73a469f75a1407480b228bfa9 Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Wed, 4 Aug 2021 17:22:25 +0200
Subject: [PATCH 06/11] Fix type import

---
 .../controls/DndColumnSelectControl/OptionWrapper.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
index 138d09364c1e4..61b414ddfd477 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
@@ -31,7 +31,7 @@ import {
 import { Tooltip } from 'src/components/Tooltip';
 import { StyledColumnOption } from 'src/explore/components/optionRenderers';
 import { styled } from '@superset-ui/core';
-import { ColumnMeta } from '@superset-ui/chart-controls/src';
+import { ColumnMeta } from '@superset-ui/chart-controls';
 import Option from './Option';
 
 export const OptionLabel = styled.div`

From 0c61289a2b9ef6d61404a91800788d3c15d3612c Mon Sep 17 00:00:00 2001
From: Geido <60598000+geido@users.noreply.github.com>
Date: Thu, 5 Aug 2021 15:55:36 +0200
Subject: [PATCH 07/11] Update
 superset-frontend/src/explore/components/controls/OptionControls/index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
---
 .../src/explore/components/controls/OptionControls/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 906b34eb7a912..7e1ec07a86c06 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -201,7 +201,7 @@ export const OptionControlLabel = ({
   const ref = useRef<HTMLDivElement>(null);
   const labelRef = useRef<HTMLDivElement>(null);
   const hasMetricName = savedMetric?.metric_name;
-  const [_, drop] = useDrop({
+  const [, drop] = useDrop({
     accept: type,
     drop() {
       onDropLabel?.();

From b842fbd9b787dfd021680b0d15943a9286b0934a Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Thu, 5 Aug 2021 15:57:42 +0200
Subject: [PATCH 08/11] Remove unnecessary styled span

---
 .../controls/DndColumnSelectControl/OptionWrapper.tsx       | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
index 61b414ddfd477..398cee0816402 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
@@ -41,8 +41,6 @@ export const OptionLabel = styled.div`
   white-space: nowrap;
 `;
 
-const LabelText = styled.span``;
-
 export default function OptionWrapper(
   props: OptionProps & {
     type: string;
@@ -130,11 +128,11 @@ export default function OptionWrapper(
 
   const LabelContent = () => {
     if (!shouldShowTooltip) {
-      return <LabelText>{label}</LabelText>;
+      return <span>{label}</span>;
     }
     return (
       <Tooltip title={label}>
-        <LabelText>{label}</LabelText>
+        <span>{label}</span>
       </Tooltip>
     );
   };

From 93e04fdeaab749974fa9750ba74b8a0e07bad2bf Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Fri, 6 Aug 2021 10:53:23 +0200
Subject: [PATCH 09/11] Show full tooltip title

---
 .../controls/DndColumnSelectControl/DndFilterSelect.tsx        | 2 ++
 .../controls/DndColumnSelectControl/OptionWrapper.tsx          | 3 ++-
 .../components/controls/DndColumnSelectControl/types.ts        | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
index 33cc72a1db947..6a6d88c670662 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
@@ -298,6 +298,7 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => {
     () =>
       values.map((adhocFilter: AdhocFilter, index: number) => {
         const label = adhocFilter.getDefaultLabel();
+        const tooltipTitle = adhocFilter.getTooltipTitle();
         return (
           <AdhocFilterPopoverTrigger
             key={index}
@@ -311,6 +312,7 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => {
               key={index}
               index={index}
               label={label}
+              tooltipTitle={tooltipTitle}
               clickClose={onClickClose}
               onShiftOptions={onShiftOptions}
               type={DndItemType.FilterOption}
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
index 398cee0816402..05943d12ff0fd 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
@@ -50,6 +50,7 @@ export default function OptionWrapper(
   const {
     index,
     label,
+    tooltipTitle,
     column,
     type,
     onShiftOptions,
@@ -131,7 +132,7 @@ export default function OptionWrapper(
       return <span>{label}</span>;
     }
     return (
-      <Tooltip title={label}>
+      <Tooltip title={tooltipTitle || label}>
         <span>{label}</span>
       </Tooltip>
     );
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts
index 2ac03f4b9aa7b..24cf70e06cca4 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts
@@ -26,6 +26,7 @@ export interface OptionProps {
   children?: ReactNode;
   index: number;
   label?: string;
+  tooltipTitle?: string;
   column?: ColumnMeta;
   clickClose: (index: number) => void;
   withCaret?: boolean;

From d17b7ee8400a2048b4cb69c2f5d64ad905221481 Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Fri, 6 Aug 2021 11:10:04 +0200
Subject: [PATCH 10/11] Force show tooltip

---
 .../DndColumnSelectControl/OptionWrapper.tsx         | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
index 05943d12ff0fd..2710f7ebd18f9 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
@@ -122,10 +122,14 @@ export default function OptionWrapper(
   });
 
   const shouldShowTooltip =
-    !isDragging &&
-    labelRef &&
-    labelRef.current &&
-    labelRef.current.scrollWidth > labelRef.current.clientWidth;
+    (!isDragging &&
+      tooltipTitle &&
+      label &&
+      tooltipTitle.length > label.length) ||
+    (!isDragging &&
+      labelRef &&
+      labelRef.current &&
+      labelRef.current.scrollWidth > labelRef.current.clientWidth);
 
   const LabelContent = () => {
     if (!shouldShowTooltip) {

From 2398c7b98c1814817152557948c9e1201c7e15cf Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Fri, 6 Aug 2021 11:24:06 +0200
Subject: [PATCH 11/11] Force show tooltip D&D off

---
 .../DndColumnSelectControl/OptionWrapper.tsx        |  5 +----
 .../components/controls/OptionControls/index.tsx    | 13 +++++++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
index 2710f7ebd18f9..485919099069d 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
@@ -122,10 +122,7 @@ export default function OptionWrapper(
   });
 
   const shouldShowTooltip =
-    (!isDragging &&
-      tooltipTitle &&
-      label &&
-      tooltipTitle.length > label.length) ||
+    (!isDragging && tooltipTitle && label && tooltipTitle !== label) ||
     (!isDragging &&
       labelRef &&
       labelRef.current &&
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 7e1ec07a86c06..c68b3685c0121 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -261,10 +261,15 @@ export const OptionControlLabel = ({
 
   const getLabelContent = () => {
     const shouldShowTooltip =
-      !isDragging &&
-      labelRef &&
-      labelRef.current &&
-      labelRef.current.scrollWidth > labelRef.current.clientWidth;
+      (!isDragging &&
+        typeof label === 'string' &&
+        tooltipTitle &&
+        label &&
+        tooltipTitle !== label) ||
+      (!isDragging &&
+        labelRef &&
+        labelRef.current &&
+        labelRef.current.scrollWidth > labelRef.current.clientWidth);
 
     if (savedMetric && hasMetricName) {
       return (