feat: smart tooltip in datasourcepanel (#18080)

superset-frontend/src/explore/components/DatasourcePanel/index.tsx

@@ -45,6 +45,8 @@ export interface Props {
     datasource: DatasourceControl;
   };
   actions: Partial<ExploreActions> & Pick<ExploreActions, 'setControlValue'>;
+  // we use this props control force update when this panel resize
+  shouldForceUpdate?: number;
 }
 
 const Button = styled.button`
@@ -123,32 +125,11 @@ const LabelContainer = (props: {
   className: string;
 }) => {
   const labelRef = useRef<HTMLDivElement>(null);
-  const [showTooltip, setShowTooltip] = useState(true);
-  const isLabelTruncated = () =>
-    !!(
-      labelRef &&
-      labelRef.current &&
-      labelRef.current.scrollWidth > labelRef.current.clientWidth
-    );
-  const handleShowTooltip = () => {
-    const shouldShowTooltip = isLabelTruncated();
-    if (shouldShowTooltip !== showTooltip) {
-      setShowTooltip(shouldShowTooltip);
-    }
-  };
-  const handleResetTooltip = () => {
-    setShowTooltip(true);
-  };
   const extendedProps = {
     labelRef,
-    showTooltip,
   };
   return (
-    <LabelWrapper
-      onMouseEnter={handleShowTooltip}
-      onMouseLeave={handleResetTooltip}
-      className={props.className}
-    >
+    <LabelWrapper className={props.className}>
       {React.cloneElement(props.children, extendedProps)}
     </LabelWrapper>
   );
@@ -162,6 +143,7 @@ export default function DataSourcePanel({
   datasource,
   controls: { datasource: datasourceControl },
   actions,
+  shouldForceUpdate,
 }: Props) {
   const { columns: _columns, metrics } = datasource;
 
@@ -309,7 +291,10 @@ export default function DataSourcePanel({
                 )}
               </div>
               {metricSlice.map(m => (
-                <LabelContainer key={m.metric_name} className="column">
+                <LabelContainer
+                  key={m.metric_name + String(shouldForceUpdate)}
+                  className="column"
+                >
                   {enableExploreDnd ? (
                     <DatasourcePanelDragOption
                       value={m}
@@ -342,7 +327,10 @@ export default function DataSourcePanel({
                 )}
               </div>
               {columnSlice.map(col => (
-                <LabelContainer key={col.column_name} className="column">
+                <LabelContainer
+                  key={col.column_name + String(shouldForceUpdate)}
+                  className="column"
+                >
                   {enableExploreDnd ? (
                     <DatasourcePanelDragOption
                       value={col}
@@ -376,6 +364,7 @@ export default function DataSourcePanel({
       search,
       showAllColumns,
       showAllMetrics,
+      shouldForceUpdate,
     ],
   );