From 6d65e6b66a33e78a67c37f7434e08aa04e6e975c Mon Sep 17 00:00:00 2001
From: Ilya Bogdanov <fumlead@gmail.com>
Date: Fri, 17 Jan 2025 00:36:12 +0400
Subject: [PATCH 1/6] Fix tooltips behavior

---
 .../project-view/components/MenuButton.vue    |  7 +-
 .../components/TooltipDisplayer.vue           | 93 +++++++++++++++----
 .../components/TooltipTrigger.vue             | 14 ++-
 .../project-view/providers/tooltipRegistry.ts | 42 ++++++---
 app/gui/src/project-view/util/equals.ts       |  2 +-
 5 files changed, 122 insertions(+), 36 deletions(-)

diff --git a/app/gui/src/project-view/components/MenuButton.vue b/app/gui/src/project-view/components/MenuButton.vue
index 1f769f8366d1..6ff02ba926de 100644
--- a/app/gui/src/project-view/components/MenuButton.vue
+++ b/app/gui/src/project-view/components/MenuButton.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import TooltipTrigger from '@/components/TooltipTrigger.vue'
+import { ref } from 'vue'
 
 /**
  * A button. Supports toggling and disabled state.
@@ -13,14 +14,18 @@ import TooltipTrigger from '@/components/TooltipTrigger.vue'
 
 const toggledOn = defineModel<boolean>({ default: undefined })
 const props = defineProps<{ disabled?: boolean | undefined; title?: string | undefined }>()
+const tooltipTrigger = ref<typeof TooltipTrigger>()
 
 function onClick() {
   if (!props.disabled && toggledOn.value != null) toggledOn.value = !toggledOn.value
+  if (tooltipTrigger.value) {
+    tooltipTrigger.value.hideTooltip()
+  }
 }
 </script>
 
 <template>
-  <TooltipTrigger>
+  <TooltipTrigger ref="tooltipTrigger">
     <template #default="triggerProps">
       <button
         class="MenuButton clickable"
diff --git a/app/gui/src/project-view/components/TooltipDisplayer.vue b/app/gui/src/project-view/components/TooltipDisplayer.vue
index a04ba2cc209d..f14d101d2850 100644
--- a/app/gui/src/project-view/components/TooltipDisplayer.vue
+++ b/app/gui/src/project-view/components/TooltipDisplayer.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { type TooltipRegistry } from '@/providers/tooltipRegistry'
-import { debouncedGetter } from '@/util/reactivity'
-import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
-import { computed, ref } from 'vue'
+import { HoveredElement, type TooltipRegistry } from '@/providers/tooltipRegistry'
+import { autoUpdate, flip, FloatingElement, offset, shift, useFloating } from '@floating-ui/vue'
+import { computed, ref, shallowRef, toValue, watch } from 'vue'
 
 const props = defineProps<{ registry: TooltipRegistry }>()
 
@@ -11,37 +10,91 @@ const TOOLTIP_SHOW_DELAY_MS = 1500
 // Time after which tooltip will disappear once an element is no longer hovered.
 const TOOLTIP_HIDE_DELAY_MS = 300
 
-const activeTooltip = computed(() => {
-  const element = props.registry.lastHoveredElement.value
-  return { element, entry: props.registry.getElementEntry(element) }
+const activeTooltip = props.registry.lastHoveredElement
+const previousTooltip = shallowRef<HoveredElement>()
+const show = ref(false)
+
+type Timeout = ReturnType<typeof setTimeout> | null
+let hideTimeout: Timeout
+let showTimeout: Timeout
+
+function resetTimeout(timeout: Timeout) {
+  if (timeout != null) {
+    clearTimeout(timeout)
+    timeout = null
+  }
+}
+
+watch(activeTooltip, (newValue, oldValue) => {
+  if (oldValue == null && newValue != null) {
+    // Show tooltip because we are hovering a new element.
+    resetTimeout(showTimeout)
+    resetTimeout(hideTimeout)
+    showTimeout = setTimeout(() => {
+      show.value = true
+      showTimeout = null
+    }, TOOLTIP_SHOW_DELAY_MS)
+    previousTooltip.value = toValue(newValue)
+  } else if (oldValue != null && newValue == null) {
+    // Hide tooltip because we are no longer hovering any element.
+    resetTimeout(showTimeout)
+    resetTimeout(hideTimeout)
+    hideTimeout = setTimeout(() => {
+      show.value = false
+      hideTimeout = null
+    }, TOOLTIP_HIDE_DELAY_MS)
+  }
 })
-const doShow = debouncedGetter(
-  () => activeTooltip.value.element != null && activeTooltip.value.entry != null,
-  TOOLTIP_SHOW_DELAY_MS,
-)
-const displayedEntry = debouncedGetter(activeTooltip, TOOLTIP_HIDE_DELAY_MS)
-const floatTarget = computed(() => {
-  return doShow.value && displayedEntry.value.element?.isConnected ?
-      displayedEntry.value.element
-    : undefined
+
+const displayedTooltip = computed(() => {
+  if (!show.value) return undefined
+  if (
+    activeTooltip.value != null &&
+    !activeTooltip.value.entry.isHidden &&
+    activeTooltip.value.element.isConnected
+  ) {
+    return activeTooltip.value
+  }
+  if (
+    previousTooltip.value != null &&
+    !previousTooltip.value.entry.isHidden &&
+    previousTooltip.value.element.isConnected
+  ) {
+    return previousTooltip.value
+  }
+  return undefined
 })
+const floatTarget = computed(() => displayedTooltip.value?.element)
+const tooltipContents = computed(() => displayedTooltip.value?.entry.contents.value)
+
+// Default implementation of autoUpdate ignores cases when the reference is being unmounted while in animation.
+// This is a hotfix for that.
+function whileElementsMounted(
+  reference: HTMLElement,
+  floating: FloatingElement,
+  update: () => void,
+): () => void {
+  return autoUpdate(reference, floating, () => {
+    if (reference.isConnected) {
+      update()
+    }
+  })
+}
 
 const tooltip = ref<HTMLDivElement>()
 const floating = useFloating(floatTarget, tooltip, {
   placement: 'top',
   transform: false,
   middleware: [offset(5), flip(), shift()],
-  whileElementsMounted: autoUpdate,
+  whileElementsMounted,
 })
-
-const tooltipContents = computed(() => displayedEntry.value.entry?.contents.value)
 </script>
 
 <template>
   <Transition>
     <div
       v-if="floatTarget != null && tooltipContents != null"
-      :key="displayedEntry.entry?.key ?? 0"
+      :key="displayedTooltip?.entry.key ?? 0"
       ref="tooltip"
       class="Tooltip"
       :style="floating.floatingStyles.value"
diff --git a/app/gui/src/project-view/components/TooltipTrigger.vue b/app/gui/src/project-view/components/TooltipTrigger.vue
index 4d0d5ce38bb6..5659115ea083 100644
--- a/app/gui/src/project-view/components/TooltipTrigger.vue
+++ b/app/gui/src/project-view/components/TooltipTrigger.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { useTooltipRegistry } from '@/providers/tooltipRegistry'
 import { usePropagateScopesToAllRoots } from '@/util/patching'
-import { toRef, useSlots } from 'vue'
+import { toRef } from 'vue'
 
 usePropagateScopesToAllRoots()
 
 const registry = useTooltipRegistry()
-const slots = useSlots()
+const slots = defineSlots<{
+  default(props: any): any
+  tooltip(): any
+}>()
+
 const tooltipSlot = toRef(slots, 'tooltip')
 const registered = registry.registerTooltip(tooltipSlot)
 function onEnter(e: PointerEvent) {
@@ -20,6 +24,12 @@ function onLeave(e: PointerEvent) {
     registered.onTargetLeave(e.target)
   }
 }
+
+defineExpose({
+  hideTooltip() {
+    registered.forceHide()
+  },
+})
 </script>
 
 <template>
diff --git a/app/gui/src/project-view/providers/tooltipRegistry.ts b/app/gui/src/project-view/providers/tooltipRegistry.ts
index 960a5f5431bb..2989318da03e 100644
--- a/app/gui/src/project-view/providers/tooltipRegistry.ts
+++ b/app/gui/src/project-view/providers/tooltipRegistry.ts
@@ -8,12 +8,19 @@ import {
   type ShallowReactive,
   type Slot,
 } from 'vue'
+import { assert } from 'ydoc-shared/util/assert'
 
 interface TooltipEntry {
   contents: Ref<Slot | undefined>
+  isHidden: boolean
   key: symbol
 }
 
+export interface HoveredElement {
+  element: HTMLElement
+  entry: TooltipEntry
+}
+
 export type TooltipRegistry = ReturnType<typeof useTooltipRegistry>
 export const [provideTooltipRegistry, useTooltipRegistry] = createContextStore(
   'tooltip registry',
@@ -21,21 +28,20 @@ export const [provideTooltipRegistry, useTooltipRegistry] = createContextStore(
     type EntriesSet = ShallowReactive<Set<TooltipEntry>>
     const hoveredElements = shallowReactive<Map<HTMLElement, EntriesSet>>(new Map())
 
-    const lastHoveredElement = computed(() => {
-      return iter.last(hoveredElements.keys())
+    const lastHoveredElement = computed<HoveredElement | undefined>(() => {
+      const lastKey = iter.last(hoveredElements.keys())
+      if (lastKey == null) return undefined
+      const entries = hoveredElements.get(lastKey)
+      assert(entries != null, 'entries is never null if lastKey is not null')
+      const lastEntry = iter.last(entries)
+      if (lastEntry == null) return undefined
+      return { element: lastKey, entry: lastEntry }
     })
 
     return {
       lastHoveredElement,
-      getElementEntry(el: HTMLElement | undefined): TooltipEntry | undefined {
-        const set = el && hoveredElements.get(el)
-        return set ? iter.last(set) : undefined
-      },
       registerTooltip(slot: Ref<Slot | undefined>) {
-        const entry: TooltipEntry = {
-          contents: slot,
-          key: Symbol(),
-        }
+        const key = Symbol()
         const registeredElements = new Set<HTMLElement>()
         onUnmounted(() => {
           for (const el of registeredElements) {
@@ -46,7 +52,7 @@ export const [provideTooltipRegistry, useTooltipRegistry] = createContextStore(
         const methods = {
           onTargetEnter(target: HTMLElement) {
             const entriesSet: EntriesSet = hoveredElements.get(target) ?? shallowReactive(new Set())
-            entriesSet.add(entry)
+            entriesSet.add({ contents: slot, isHidden: false, key })
             // make sure that the newly entered target is on top of the map
             hoveredElements.delete(target)
             hoveredElements.set(target, entriesSet)
@@ -54,12 +60,24 @@ export const [provideTooltipRegistry, useTooltipRegistry] = createContextStore(
           },
           onTargetLeave(target: HTMLElement) {
             const entriesSet = hoveredElements.get(target)
-            entriesSet?.delete(entry)
+            if (entriesSet) {
+              for (const e of entriesSet) {
+                if (e.key === key) entriesSet.delete(e)
+              }
+            }
             registeredElements.delete(target)
             if (entriesSet?.size === 0) {
               hoveredElements.delete(target)
             }
           },
+          forceHide() {
+            for (const el of registeredElements) {
+              const entriesSet = hoveredElements.get(el)
+              const newSet = new Set(entriesSet)
+              newSet.forEach((entry) => (entry.isHidden = true))
+              hoveredElements.set(el, newSet)
+            }
+          },
         }
         return methods
       },
diff --git a/app/gui/src/project-view/util/equals.ts b/app/gui/src/project-view/util/equals.ts
index f4acf3a5fe45..ef7240805a5a 100644
--- a/app/gui/src/project-view/util/equals.ts
+++ b/app/gui/src/project-view/util/equals.ts
@@ -1,4 +1,4 @@
-/** Same as `===` operator - used as functino parameter, */
+/** Same as `===` operator - used as function parameter. */
 export function defaultEquality(a: unknown, b: unknown): boolean {
   return a === b
 }

From 2d0eb3d42a0912800b495581e1ef3b67a8a1625a Mon Sep 17 00:00:00 2001
From: Ilya Bogdanov <fumlead@gmail.com>
Date: Fri, 17 Jan 2025 00:58:37 +0400
Subject: [PATCH 2/6] =?UTF-8?q?Ignore=20elements=20that=20don=E2=80=99t=20?=
 =?UTF-8?q?have=20tooltips?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/gui/src/project-view/components/TooltipTrigger.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/gui/src/project-view/components/TooltipTrigger.vue b/app/gui/src/project-view/components/TooltipTrigger.vue
index 5659115ea083..7331dabfb2cd 100644
--- a/app/gui/src/project-view/components/TooltipTrigger.vue
+++ b/app/gui/src/project-view/components/TooltipTrigger.vue
@@ -14,13 +14,13 @@ const slots = defineSlots<{
 const tooltipSlot = toRef(slots, 'tooltip')
 const registered = registry.registerTooltip(tooltipSlot)
 function onEnter(e: PointerEvent) {
-  if (e.target instanceof HTMLElement) {
+  if (e.target instanceof HTMLElement && tooltipSlot.value != null) {
     registered.onTargetEnter(e.target)
   }
 }
 
 function onLeave(e: PointerEvent) {
-  if (e.target instanceof HTMLElement) {
+  if (e.target instanceof HTMLElement && tooltipSlot.value != null) {
     registered.onTargetLeave(e.target)
   }
 }

From 8477b74c90bc91249bae0a686e9d0c746410cab5 Mon Sep 17 00:00:00 2001
From: Ilya Bogdanov <fumlead@gmail.com>
Date: Fri, 17 Jan 2025 01:04:19 +0400
Subject: [PATCH 3/6] update changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7a85d9cec513..03ed1c107d8c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,11 +8,13 @@
   button protruding from the output port.][11836].
 - [Fixed nodes being selected after deleting other nodes or connections.][11902]
 - [Redo stack is no longer lost when interacting with text literals][11908].
+- [Tooltips are hidden when clicking on a button][12067].
 
 [11889]: https://github.com/enso-org/enso/pull/11889
 [11836]: https://github.com/enso-org/enso/pull/11836
 [11902]: https://github.com/enso-org/enso/pull/11902
 [11908]: https://github.com/enso-org/enso/pull/11908
+[12067]: https://github.com/enso-org/enso/pull/12067
 
 #### Enso Standard Library
 

From d0d85b892c45fae660f129ac4503f0ca7504f420 Mon Sep 17 00:00:00 2001
From: Ilya Bogdanov <fumlead@gmail.com>
Date: Fri, 17 Jan 2025 16:19:57 +0400
Subject: [PATCH 4/6] Use ComponentExposed

---
 app/gui/src/project-view/components/MenuButton.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/gui/src/project-view/components/MenuButton.vue b/app/gui/src/project-view/components/MenuButton.vue
index 6ff02ba926de..67c70fb67d4b 100644
--- a/app/gui/src/project-view/components/MenuButton.vue
+++ b/app/gui/src/project-view/components/MenuButton.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import TooltipTrigger from '@/components/TooltipTrigger.vue'
 import { ref } from 'vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
 
 /**
  * A button. Supports toggling and disabled state.
@@ -14,7 +15,7 @@ import { ref } from 'vue'
 
 const toggledOn = defineModel<boolean>({ default: undefined })
 const props = defineProps<{ disabled?: boolean | undefined; title?: string | undefined }>()
-const tooltipTrigger = ref<typeof TooltipTrigger>()
+const tooltipTrigger = ref<ComponentExposed<typeof TooltipTrigger>>()
 
 function onClick() {
   if (!props.disabled && toggledOn.value != null) toggledOn.value = !toggledOn.value

From e693d57e9e7fdd1714b19995f2fb1a213a2b25f4 Mon Sep 17 00:00:00 2001
From: Ilya Bogdanov <fumlead@gmail.com>
Date: Fri, 17 Jan 2025 18:35:48 +0400
Subject: [PATCH 5/6] adding additional docs

---
 .../src/project-view/components/TooltipDisplayer.vue  | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/gui/src/project-view/components/TooltipDisplayer.vue b/app/gui/src/project-view/components/TooltipDisplayer.vue
index f14d101d2850..ec347220940f 100644
--- a/app/gui/src/project-view/components/TooltipDisplayer.vue
+++ b/app/gui/src/project-view/components/TooltipDisplayer.vue
@@ -10,7 +10,9 @@ const TOOLTIP_SHOW_DELAY_MS = 1500
 // Time after which tooltip will disappear once an element is no longer hovered.
 const TOOLTIP_HIDE_DELAY_MS = 300
 
+// Currently hovered element and its tooltip entry.
 const activeTooltip = props.registry.lastHoveredElement
+// Previously hovered element and its tooltip entry.
 const previousTooltip = shallowRef<HoveredElement>()
 const show = ref(false)
 
@@ -27,7 +29,7 @@ function resetTimeout(timeout: Timeout) {
 
 watch(activeTooltip, (newValue, oldValue) => {
   if (oldValue == null && newValue != null) {
-    // Show tooltip because we are hovering a new element.
+    // We are hovering some element, show its tooltip after delay.
     resetTimeout(showTimeout)
     resetTimeout(hideTimeout)
     showTimeout = setTimeout(() => {
@@ -36,7 +38,7 @@ watch(activeTooltip, (newValue, oldValue) => {
     }, TOOLTIP_SHOW_DELAY_MS)
     previousTooltip.value = toValue(newValue)
   } else if (oldValue != null && newValue == null) {
-    // Hide tooltip because we are no longer hovering any element.
+    // We no longer hover any element, hide the tooltip after delay.
     resetTimeout(showTimeout)
     resetTimeout(hideTimeout)
     hideTimeout = setTimeout(() => {
@@ -44,10 +46,13 @@ watch(activeTooltip, (newValue, oldValue) => {
       hideTimeout = null
     }, TOOLTIP_HIDE_DELAY_MS)
   }
+  // There is no need to check if both `oldValue` and `newValue` are not null, because
+  // `activeTooltip` is always set to null intermitently when switching between elements.
 })
 
 const displayedTooltip = computed(() => {
   if (!show.value) return undefined
+  // When hovering the element, display its tooltip.
   if (
     activeTooltip.value != null &&
     !activeTooltip.value.entry.isHidden &&
@@ -55,6 +60,8 @@ const displayedTooltip = computed(() => {
   ) {
     return activeTooltip.value
   }
+  // If no element with the tooltip is being hovered, display the tooltip of the previously hovered element.
+  // (until it will be hidden after timeout, by changing the `show` ref)
   if (
     previousTooltip.value != null &&
     !previousTooltip.value.entry.isHidden &&

From e13329e76020ad8db23c0275fdb6dd4b0076546e Mon Sep 17 00:00:00 2001
From: Ilya Bogdanov <fumlead@gmail.com>
Date: Fri, 24 Jan 2025 15:11:57 +0400
Subject: [PATCH 6/6] more documentation

---
 .../project-view/providers/tooltipRegistry.ts    | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/app/gui/src/project-view/providers/tooltipRegistry.ts b/app/gui/src/project-view/providers/tooltipRegistry.ts
index 2989318da03e..cd4c0bdb6237 100644
--- a/app/gui/src/project-view/providers/tooltipRegistry.ts
+++ b/app/gui/src/project-view/providers/tooltipRegistry.ts
@@ -16,6 +16,7 @@ interface TooltipEntry {
   key: symbol
 }
 
+/** A hovered element with its corresponding tooltip. */
 export interface HoveredElement {
   element: HTMLElement
   entry: TooltipEntry
@@ -26,8 +27,13 @@ export const [provideTooltipRegistry, useTooltipRegistry] = createContextStore(
   'tooltip registry',
   () => {
     type EntriesSet = ShallowReactive<Set<TooltipEntry>>
+    // A map of hovered elements to their corresponding tooltips.
+    // There can be multiple tooltips for the same element, because we can have
+    // multiple nested tooltip triggers (components calling `registerTooltip`).
+    // The last hovered element is always on top of the map.
     const hoveredElements = shallowReactive<Map<HTMLElement, EntriesSet>>(new Map())
 
+    /** The last hovered element with its corresponding tooltip. Undefined if no element with tooltip is hovered. */
     const lastHoveredElement = computed<HoveredElement | undefined>(() => {
       const lastKey = iter.last(hoveredElements.keys())
       if (lastKey == null) return undefined
@@ -40,6 +46,7 @@ export const [provideTooltipRegistry, useTooltipRegistry] = createContextStore(
 
     return {
       lastHoveredElement,
+      /** Registers a tooltip and returns methods to control it. See `TooltipTrigger` component for usage. */
       registerTooltip(slot: Ref<Slot | undefined>) {
         const key = Symbol()
         const registeredElements = new Set<HTMLElement>()
@@ -50,6 +57,7 @@ export const [provideTooltipRegistry, useTooltipRegistry] = createContextStore(
         })
 
         const methods = {
+          /** The registered tooltip must be shown when hovering this element. */
           onTargetEnter(target: HTMLElement) {
             const entriesSet: EntriesSet = hoveredElements.get(target) ?? shallowReactive(new Set())
             entriesSet.add({ contents: slot, isHidden: false, key })
@@ -58,6 +66,7 @@ export const [provideTooltipRegistry, useTooltipRegistry] = createContextStore(
             hoveredElements.set(target, entriesSet)
             registeredElements.add(target)
           },
+          /** The registered tooltip must be hidden when finishing hovering this element. */
           onTargetLeave(target: HTMLElement) {
             const entriesSet = hoveredElements.get(target)
             if (entriesSet) {
@@ -70,6 +79,13 @@ export const [provideTooltipRegistry, useTooltipRegistry] = createContextStore(
               hoveredElements.delete(target)
             }
           },
+          /**
+           * Forcefully hides the registered tooltip.
+           * Useful when we need to hide the tooltip without moving the mouse out of the element,
+           * like when clicking on a button.
+           *
+           * If several tooltips are registered for the same element, all of them will hide.
+           */
           forceHide() {
             for (const el of registeredElements) {
               const entriesSet = hoveredElements.get(el)