From 93aa9f454214feda9c0eba87fb7e780e2dc0d013 Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Fri, 7 Mar 2025 16:49:52 -0500
Subject: [PATCH] cleaned out unused files + fixed tooltip breakage due to
 quick toggle + added intent delay

---
 web/apps/labelstudio/src/utils/transition.js  | 36 -----------------
 web/libs/core/src/lib/utils/transition.ts     |  2 +
 web/libs/datamanager/src/utils/transition.js  | 36 -----------------
 .../editor/src/components/TopBar/TopBar.jsx   |  4 +-
 web/libs/editor/src/utils/transition.ts       | 39 -------------------
 .../ui/src/lib/Tooltip/Tooltip.module.scss    |  2 +
 6 files changed, 7 insertions(+), 112 deletions(-)
 delete mode 100644 web/apps/labelstudio/src/utils/transition.js
 delete mode 100644 web/libs/datamanager/src/utils/transition.js
 delete mode 100644 web/libs/editor/src/utils/transition.ts

diff --git a/web/apps/labelstudio/src/utils/transition.js b/web/apps/labelstudio/src/utils/transition.js
deleted file mode 100644
index b3f006d17de9..000000000000
--- a/web/apps/labelstudio/src/utils/transition.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Performs a transition on an element
- * @param {HTMLElement} element
- * @param {Function} transition
- * @param {{
- * init: (element: HTMLElement) => void,
- * transition: (element: HTMLElement) => void,
- * onStart: (element: HTMLElement) => void,
- * beforeTransition: (element: HTMLElement) => void,
- * afterTransition: (element: HTMLElement) => void
- * }} param2
- */
-export const aroundTransition = (element, { init, transition, onStart, beforeTransition, afterTransition } = {}) => {
-  return new Promise(async (resolve) => {
-    init?.(element);
-
-    const onTransitionStarted = () => {
-      onStart?.(element);
-    };
-
-    const onTransitionEnded = async () => {
-      await afterTransition?.(element);
-
-      element.removeEventListener("transitionstart", onTransitionStarted);
-      element.removeEventListener("transitionend", onTransitionEnded);
-      resolve();
-    };
-
-    element.addEventListener("transitionstart", onTransitionStarted);
-    element.addEventListener("transitionend", onTransitionEnded);
-
-    await beforeTransition?.();
-
-    setTimeout(() => transition(element), 30);
-  });
-};
diff --git a/web/libs/core/src/lib/utils/transition.ts b/web/libs/core/src/lib/utils/transition.ts
index 1438fa21d9ee..8619c91900da 100644
--- a/web/libs/core/src/lib/utils/transition.ts
+++ b/web/libs/core/src/lib/utils/transition.ts
@@ -25,12 +25,14 @@ export const aroundTransition = (
 
       element.removeEventListener("transitionstart", onTransitionStarted);
       element.removeEventListener("transitionend", onTransitionEnded);
+      element.removeEventListener("transitioncancel", onTransitionEnded);
       resolve();
     };
 
     if (element) {
       element.addEventListener("transitionstart", onTransitionStarted);
       element.addEventListener("transitionend", onTransitionEnded);
+      element.addEventListener("transitioncancel", onTransitionEnded);
     }
 
     await beforeTransition?.(element);
diff --git a/web/libs/datamanager/src/utils/transition.js b/web/libs/datamanager/src/utils/transition.js
deleted file mode 100644
index b3f006d17de9..000000000000
--- a/web/libs/datamanager/src/utils/transition.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Performs a transition on an element
- * @param {HTMLElement} element
- * @param {Function} transition
- * @param {{
- * init: (element: HTMLElement) => void,
- * transition: (element: HTMLElement) => void,
- * onStart: (element: HTMLElement) => void,
- * beforeTransition: (element: HTMLElement) => void,
- * afterTransition: (element: HTMLElement) => void
- * }} param2
- */
-export const aroundTransition = (element, { init, transition, onStart, beforeTransition, afterTransition } = {}) => {
-  return new Promise(async (resolve) => {
-    init?.(element);
-
-    const onTransitionStarted = () => {
-      onStart?.(element);
-    };
-
-    const onTransitionEnded = async () => {
-      await afterTransition?.(element);
-
-      element.removeEventListener("transitionstart", onTransitionStarted);
-      element.removeEventListener("transitionend", onTransitionEnded);
-      resolve();
-    };
-
-    element.addEventListener("transitionstart", onTransitionStarted);
-    element.addEventListener("transitionend", onTransitionEnded);
-
-    await beforeTransition?.();
-
-    setTimeout(() => transition(element), 30);
-  });
-};
diff --git a/web/libs/editor/src/components/TopBar/TopBar.jsx b/web/libs/editor/src/components/TopBar/TopBar.jsx
index 9716d65f1b4e..91d17a97d63f 100644
--- a/web/libs/editor/src/components/TopBar/TopBar.jsx
+++ b/web/libs/editor/src/components/TopBar/TopBar.jsx
@@ -49,7 +49,9 @@ export const TopBar = observer(({ store }) => {
             </Tooltip>
           )}
           {store.hasInterface("annotations:add-new") && (
-            <Tooltip alignment="top-left" title="Create a new annotation">
+            <Tooltip alignment="top-left" title="Create a new annotation"
+              style={{ "--offset-x": "11px" }}
+              >
               <Button
                 icon={<LsPlus />}
                 className={"topbar__button"}
diff --git a/web/libs/editor/src/utils/transition.ts b/web/libs/editor/src/utils/transition.ts
deleted file mode 100644
index 587177590624..000000000000
--- a/web/libs/editor/src/utils/transition.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-interface TransitionOptions {
-  init?: (element: HTMLElement) => void;
-  transition?: (element: HTMLElement) => void;
-  onStart?: (element: HTMLElement) => void;
-  beforeTransition?: (element: HTMLElement) => void | Promise<void>;
-  afterTransition?: (element: HTMLElement) => void | Promise<void>;
-}
-
-/**
- * Performs a transition on an element
- */
-export const aroundTransition = (
-  element: HTMLElement,
-  { init, transition, onStart, beforeTransition, afterTransition }: TransitionOptions = {},
-) => {
-  if (!element) return;
-  return new Promise<true>(async (resolve) => {
-    init?.(element);
-
-    const onTransitionStarted = () => {
-      onStart?.(element);
-    };
-
-    const onTransitionEnded = async () => {
-      await afterTransition?.(element);
-
-      element.removeEventListener("transitionstart", onTransitionStarted);
-      element.removeEventListener("transitionend", onTransitionEnded);
-      resolve(true);
-    };
-
-    element.addEventListener("transitionstart", onTransitionStarted);
-    element.addEventListener("transitionend", onTransitionEnded);
-
-    await beforeTransition?.(element);
-
-    setTimeout(() => transition?.(element), 0);
-  });
-};
diff --git a/web/libs/ui/src/lib/Tooltip/Tooltip.module.scss b/web/libs/ui/src/lib/Tooltip/Tooltip.module.scss
index bf4cbf4b301a..e44980b759a1 100644
--- a/web/libs/ui/src/lib/Tooltip/Tooltip.module.scss
+++ b/web/libs/ui/src/lib/Tooltip/Tooltip.module.scss
@@ -1,4 +1,5 @@
 .tooltip {
+  --transition-delay: 150ms;
   --animation-duration: 100ms;
   --animation-curve: cubic-bezier(0.21, 1.04, 0.68, 1);
   --animation-start: -10px;
@@ -32,6 +33,7 @@
 
   &.before-appear,
   &.before-disappear {
+    transition-delay: var(--transition-delay);
     transition-property: opacity, transform;
     transition-duration: var(--animation-duration);
     transition-timing-function: var(--animation-curve);