From fd3f70e404fd03566bec01c36cd81c444ffcd0f4 Mon Sep 17 00:00:00 2001
From: ArtsiomWB <artsiom.skarakhod@wandb.com>
Date: Wed, 11 Dec 2024 15:24:53 -0700
Subject: [PATCH 1/5] first commit for fixing tooltips not showing up

---
 weave-js/src/components/Tag/Tag.tsx        | 28 ++++++++++++++++++----
 weave-js/src/components/Tag/TagTooltip.tsx |  3 ++-
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/weave-js/src/components/Tag/Tag.tsx b/weave-js/src/components/Tag/Tag.tsx
index 1704585dafe..4ac2d07a9e8 100644
--- a/weave-js/src/components/Tag/Tag.tsx
+++ b/weave-js/src/components/Tag/Tag.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, {FC, ReactElement, useMemo, useRef} from 'react';
+import React, {FC, ReactElement, useMemo, useRef, useState, useEffect} from 'react';
 import {twMerge} from 'tailwind-merge';
 
 import {Icon, IconName} from '../Icon';
@@ -100,11 +100,30 @@ export const RemovableTag: FC<RemovableTagProps> = ({
   Wrapper = Tailwind,
 }) => {
   const labelRef = useRef<HTMLParagraphElement>(null);
-  const isTooltipEnabled = isTagLabelTruncated(labelRef);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    const checkTruncation = () => {
+      if (labelRef.current) {
+        setIsTruncated(isTagLabelTruncated(labelRef));
+      }
+    };
+
+    checkTruncation();
+    window.addEventListener('resize', checkTruncation);
+    
+    const timer = setTimeout(checkTruncation, 100);
+
+    return () => {
+      window.removeEventListener('resize', checkTruncation);
+      clearTimeout(timer);
+    };
+  }, [label]);
+
   const classes = useTagClasses({color, isInteractive: true, label});
 
   const nakedTag = (
-    <TagTooltip value={label} disabled={!isTooltipEnabled}>
+    <TagTooltip value={label} disabled={!isTruncated}>
       <div
         key={`tag-${label}`}
         className={twMerge(classes, showIcon ? 'px-4' : 'pl-6 pr-4')}>
@@ -129,6 +148,5 @@ export const RemovableTag: FC<RemovableTagProps> = ({
   if (Wrapper) {
     return <Wrapper>{nakedTag}</Wrapper>;
   }
-
   return nakedTag;
-};
+};
\ No newline at end of file
diff --git a/weave-js/src/components/Tag/TagTooltip.tsx b/weave-js/src/components/Tag/TagTooltip.tsx
index e4d562cf6ed..cb2cac4f319 100644
--- a/weave-js/src/components/Tag/TagTooltip.tsx
+++ b/weave-js/src/components/Tag/TagTooltip.tsx
@@ -15,6 +15,7 @@ export const TagTooltip = React.forwardRef<HTMLElement, TagTooltipProps>(
       <Tooltip
         ref={ref}
         position="top center"
+        open={passThroughProps.disabled ? false : undefined}
         content={
           <span
             style={{
@@ -31,4 +32,4 @@ export const TagTooltip = React.forwardRef<HTMLElement, TagTooltipProps>(
       />
     );
   }
-);
+);
\ No newline at end of file

From 3264abf1902001f9b75dd486f9693ec583d386f5 Mon Sep 17 00:00:00 2001
From: ArtsiomWB <artsiom.skarakhod@wandb.com>
Date: Tue, 24 Dec 2024 17:18:38 -0700
Subject: [PATCH 2/5] removed resize and timer because we do not change tag
 size based off of window size

---
 weave-js/src/components/Tag/Tag.tsx        | 9 ---------
 weave-js/src/components/Tag/TagTooltip.tsx | 1 -
 2 files changed, 10 deletions(-)

diff --git a/weave-js/src/components/Tag/Tag.tsx b/weave-js/src/components/Tag/Tag.tsx
index 3fcf8225916..3d7c843653a 100644
--- a/weave-js/src/components/Tag/Tag.tsx
+++ b/weave-js/src/components/Tag/Tag.tsx
@@ -111,16 +111,7 @@ export const RemovableTag: FC<RemovableTagProps> = ({
         setIsTruncated(isTagLabelTruncated(labelRef));
       }
     };
-
     checkTruncation();
-    window.addEventListener('resize', checkTruncation);
-    
-    const timer = setTimeout(checkTruncation, 100);
-
-    return () => {
-      window.removeEventListener('resize', checkTruncation);
-      clearTimeout(timer);
-    };
   }, [label]);
 
   const classes = useTagClasses({color, isInteractive: true, label});
diff --git a/weave-js/src/components/Tag/TagTooltip.tsx b/weave-js/src/components/Tag/TagTooltip.tsx
index cb2cac4f319..28ee2ebc074 100644
--- a/weave-js/src/components/Tag/TagTooltip.tsx
+++ b/weave-js/src/components/Tag/TagTooltip.tsx
@@ -15,7 +15,6 @@ export const TagTooltip = React.forwardRef<HTMLElement, TagTooltipProps>(
       <Tooltip
         ref={ref}
         position="top center"
-        open={passThroughProps.disabled ? false : undefined}
         content={
           <span
             style={{

From c6642461785e907c10bfe76c363b5ce665f960b3 Mon Sep 17 00:00:00 2001
From: ArtsiomWB <artsiom.skarakhod@wandb.com>
Date: Tue, 24 Dec 2024 17:49:01 -0700
Subject: [PATCH 3/5] linting imports

---
 weave-js/src/components/Tag/Tag.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/weave-js/src/components/Tag/Tag.tsx b/weave-js/src/components/Tag/Tag.tsx
index 3d7c843653a..dd02a1fa1a4 100644
--- a/weave-js/src/components/Tag/Tag.tsx
+++ b/weave-js/src/components/Tag/Tag.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, {FC, ReactElement, useMemo, useRef, useState, useEffect} from 'react';
+import React, {FC, ReactElement, useEffect,useMemo, useRef, useState} from 'react';
 import {twMerge} from 'tailwind-merge';
 
 import {Icon, IconName} from '../Icon';

From 9aedf546ae92a4069fec28797f2eba791f768e8f Mon Sep 17 00:00:00 2001
From: ArtsiomWB <artsiom.skarakhod@wandb.com>
Date: Thu, 26 Dec 2024 13:51:11 -0700
Subject: [PATCH 4/5] removing unnecesary function

---
 weave-js/src/components/Tag/Tag.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/weave-js/src/components/Tag/Tag.tsx b/weave-js/src/components/Tag/Tag.tsx
index dd02a1fa1a4..84f9356fb69 100644
--- a/weave-js/src/components/Tag/Tag.tsx
+++ b/weave-js/src/components/Tag/Tag.tsx
@@ -106,12 +106,9 @@ export const RemovableTag: FC<RemovableTagProps> = ({
   const [isTruncated, setIsTruncated] = useState(false);
 
   useEffect(() => {
-    const checkTruncation = () => {
-      if (labelRef.current) {
-        setIsTruncated(isTagLabelTruncated(labelRef));
-      }
-    };
-    checkTruncation();
+    if (labelRef.current) {
+      setIsTruncated(isTagLabelTruncated(labelRef));
+    }
   }, [label]);
 
   const classes = useTagClasses({color, isInteractive: true, label});

From abfd61229ac6984d718981c1e989ac017d5ac122 Mon Sep 17 00:00:00 2001
From: ArtsiomWB <artsiom.skarakhod@wandb.com>
Date: Fri, 27 Dec 2024 11:16:01 -0700
Subject: [PATCH 5/5] prettier

---
 weave-js/src/components/Tag/Tag.tsx        | 11 +++++++++--
 weave-js/src/components/Tag/TagTooltip.tsx |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/weave-js/src/components/Tag/Tag.tsx b/weave-js/src/components/Tag/Tag.tsx
index 84f9356fb69..b7ebe22123d 100644
--- a/weave-js/src/components/Tag/Tag.tsx
+++ b/weave-js/src/components/Tag/Tag.tsx
@@ -1,5 +1,12 @@
 import classNames from 'classnames';
-import React, {FC, ReactElement, useEffect,useMemo, useRef, useState} from 'react';
+import React, {
+  FC,
+  ReactElement,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {twMerge} from 'tailwind-merge';
 
 import {Icon, IconName} from '../Icon';
@@ -140,4 +147,4 @@ export const RemovableTag: FC<RemovableTagProps> = ({
     return <Wrapper>{nakedTag}</Wrapper>;
   }
   return nakedTag;
-};
\ No newline at end of file
+};
diff --git a/weave-js/src/components/Tag/TagTooltip.tsx b/weave-js/src/components/Tag/TagTooltip.tsx
index 28ee2ebc074..e4d562cf6ed 100644
--- a/weave-js/src/components/Tag/TagTooltip.tsx
+++ b/weave-js/src/components/Tag/TagTooltip.tsx
@@ -31,4 +31,4 @@ export const TagTooltip = React.forwardRef<HTMLElement, TagTooltipProps>(
       />
     );
   }
-);
\ No newline at end of file
+);