From 94e74b5cabe3d4df4600fc13b3cff93034c6bc32 Mon Sep 17 00:00:00 2001
From: Alessio Crea <alessio.crea98@gmail.com>
Date: Wed, 13 Nov 2024 15:44:27 +0100
Subject: [PATCH 1/6] feat: replace tooltip with popover

---
 .../src/components/list/ListWithMore.vue      | 28 ++++--
 .../src/components/popover/PopoverCustom.vue  | 44 +++++++--
 .../popover/PopoverCustomButton.vue           | 65 +++++++++++++-
 .../components/popover/PopoverCustomPanel.vue | 12 +--
 .../components/popover/PopoverTransition.vue  | 12 +++
 .../src/components/tooltip/TooltipCustom.vue  | 82 -----------------
 .../src/components/utils/useFloatingUi.ts     |  3 +-
 .../ui/tableView/SortAndFilterHeader.vue      | 89 +++++++++++--------
 .../overview/DisclaimerCloseHeroPopup.vue     | 45 ++++++++++
 .../overview/OverviewListPageHero.vue         | 15 +---
 10 files changed, 235 insertions(+), 160 deletions(-)
 create mode 100644 databrowser/src/components/popover/PopoverTransition.vue
 delete mode 100644 databrowser/src/components/tooltip/TooltipCustom.vue
 create mode 100644 databrowser/src/pages/datasets/overview/DisclaimerCloseHeroPopup.vue

diff --git a/databrowser/src/components/list/ListWithMore.vue b/databrowser/src/components/list/ListWithMore.vue
index 654797e32..87b4da1fe 100644
--- a/databrowser/src/components/list/ListWithMore.vue
+++ b/databrowser/src/components/list/ListWithMore.vue
@@ -7,24 +7,34 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <template>
   <div class="flex">
     {{ dataset.sources[0] }}
-    <TooltipCustom v-if="dataset.sources.length > 0">
-      <template #default>
-        <button v-if="dataset.sources.length > 1" class="ml-1 text-green-700">
+    <PopoverCustom v-if="dataset.sources.length > 0" has-arrow>
+      <template #trigger>
+        <PopoverCustomButton
+          v-if="dataset.sources.length > 1"
+          class="ml-1 text-green-700"
+        >
           +{{ dataset.sources.length - 1 }} others
-        </button>
+        </PopoverCustomButton>
       </template>
       <template #container>
-        <span class="text-sm text-dialog">
-          {{ dataset.sources.slice(1).join(', ') }}
-        </span>
+        <PopoverCustomPanel>
+          <PopoverContent class="text-sm text-dialog">
+            <span>
+              {{ dataset.sources.slice(1).join(', ') }}
+            </span>
+          </PopoverContent>
+        </PopoverCustomPanel>
       </template>
-    </TooltipCustom>
+    </PopoverCustom>
   </div>
 </template>
 
 <script setup lang="ts">
 import { TourismMetaData } from '../../domain/metaDataConfig/tourism/types';
-import TooltipCustom from '../tooltip/TooltipCustom.vue';
+import PopoverCustom from '../popover/PopoverCustom.vue';
+import PopoverCustomPanel from '../popover/PopoverCustomPanel.vue';
+import PopoverContent from '../popover/PopoverContent.vue';
+import PopoverCustomButton from '../popover/PopoverCustomButton.vue';
 
 defineProps<{ dataset: TourismMetaData }>();
 </script>
diff --git a/databrowser/src/components/popover/PopoverCustom.vue b/databrowser/src/components/popover/PopoverCustom.vue
index 92e4f1a4c..722be6b32 100644
--- a/databrowser/src/components/popover/PopoverCustom.vue
+++ b/databrowser/src/components/popover/PopoverCustom.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
 <template>
   <PopoverGroup>
-    <Popover>
+    <Popover v-slot="{ open }">
       <span ref="trigger">
         <slot name="trigger"></slot>
       </span>
@@ -21,6 +21,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           }"
         >
           <slot name="container"></slot>
+
+          <PopoverTransition v-if="hasArrow">
+            <div
+              v-show="open"
+              ref="arrow"
+              class="absolute size-4 rotate-45 border-gray-400 bg-white"
+              :class="arrowClasses"
+            ></div>
+          </PopoverTransition>
         </div>
       </Teleport>
     </Popover>
@@ -30,14 +39,37 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <script setup lang="ts">
 import { Popover, PopoverGroup } from '@headlessui/vue';
 import { useFloatingUi } from '../utils/useFloatingUi';
+import { computed, ref } from 'vue';
+import PopoverTransition from './PopoverTransition.vue';
 
-withDefaults(defineProps<{ fullScreenWidth?: boolean; zIndex?: number }>(), {
-  fullScreenWidth: true,
-  zIndex: undefined,
-});
+withDefaults(
+  defineProps<{
+    fullScreenWidth?: boolean;
+    zIndex?: number;
+    hasArrow?: boolean;
+  }>(),
+  {
+    fullScreenWidth: true,
+    zIndex: undefined,
+    hasArrow: false,
+  }
+);
 
-const [trigger, container] = useFloatingUi({
+const arrow = ref();
+
+const [trigger, container, placement] = useFloatingUi({
   placement: 'bottom-start',
   offset: 8,
+  arrow,
 });
+
+const arrowClasses = computed(() =>
+  placement.value.startsWith(`bottom`)
+    ? `border-t border-l`
+    : placement.value.startsWith(`top`)
+    ? `border-b border-r`
+    : placement.value.startsWith(`left`)
+    ? `border-t border-r`
+    : `border-b border-l`
+);
 </script>
diff --git a/databrowser/src/components/popover/PopoverCustomButton.vue b/databrowser/src/components/popover/PopoverCustomButton.vue
index 33efe01c5..9167e83df 100644
--- a/databrowser/src/components/popover/PopoverCustomButton.vue
+++ b/databrowser/src/components/popover/PopoverCustomButton.vue
@@ -5,13 +5,74 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <PopoverButton v-slot="{ open, close }" :disabled="disabled">
+  <PopoverButton
+    ref="popoverButtonRef"
+    v-slot="{ open, close }"
+    :disabled="disabled"
+    :class="{
+      relative: triggerOnHover,
+    }"
+    @click="onPopoverButtonClick"
+  >
     <slot :open="open" :close="close"></slot>
+    <span
+      v-if="triggerOnHover"
+      ref="triggerHoverRef"
+      class="absolute left-0 top-0 h-full w-full"
+      @click="onTriggerHoverClick()"
+      @mouseover="onTriggerMouseHover(open)"
+      @mouseleave="onTriggerMouseLeave(close)"
+    >
+    </span>
   </PopoverButton>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import { PopoverButton } from '@headlessui/vue';
+import { useTimeoutFn } from '@vueuse/core';
 
-defineProps<{ disabled?: boolean }>();
+const props = defineProps<{ disabled?: boolean; triggerOnHover?: boolean }>();
+
+const emit = defineEmits(['triggerClick']);
+
+const popoverButtonRef = ref();
+const triggerHoverRef = ref();
+
+const onTriggerMouseHover = (isOpen: boolean) => {
+  if (isOpen || isPopoverButtonClickPending.value) return;
+
+  startPopoverButtonClick();
+};
+
+const onTriggerMouseLeave = (isClose: boolean) => {
+  if (isClose) return;
+
+  stopPopoverButtonClick();
+  startPopoverButtonClick();
+};
+
+const onTriggerHoverClick = () => {
+  emit('triggerClick');
+};
+
+const onPopoverButtonClick = (e: PointerEvent) => {
+  if (!e.pointerType || !props.triggerOnHover) {
+    return;
+  }
+
+  e.preventDefault();
+};
+
+const {
+  isPending: isPopoverButtonClickPending,
+  start: startPopoverButtonClick,
+  stop: stopPopoverButtonClick,
+} = useTimeoutFn(
+  () => {
+    popoverButtonRef.value.$el.click();
+  },
+  100,
+  { immediate: false }
+);
 </script>
diff --git a/databrowser/src/components/popover/PopoverCustomPanel.vue b/databrowser/src/components/popover/PopoverCustomPanel.vue
index 8afd96ddf..4523663d4 100644
--- a/databrowser/src/components/popover/PopoverCustomPanel.vue
+++ b/databrowser/src/components/popover/PopoverCustomPanel.vue
@@ -5,14 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <transition
-    enter-active-class="transition duration-100 ease-out"
-    enter-from-class="transform scale-95 opacity-0"
-    enter-to-class="transform scale-100 opacity-100"
-    leave-active-class="transition duration-75 ease-out"
-    leave-from-class="transform scale-100 opacity-100"
-    leave-to-class="transform scale-95 opacity-0"
-  >
+  <PopoverTransition>
     <PopoverPanel v-slot="{ open, close }" class="z-20">
       <div class="rounded bg-white shadow-md ring-1 ring-gray-400">
         <ButtonCustom
@@ -28,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         <slot :open="open" :close="close"></slot>
       </div>
     </PopoverPanel>
-  </transition>
+  </PopoverTransition>
 </template>
 
 <script setup lang="ts">
@@ -36,6 +29,7 @@ import { PopoverPanel } from '@headlessui/vue';
 import IconClose from '../svg/IconClose.vue';
 import ButtonCustom from '../button/ButtonCustom.vue';
 import { Size, Variant } from '../button/types';
+import PopoverTransition from './PopoverTransition.vue';
 
 withDefaults(defineProps<{ hasCloseButton?: boolean }>(), {
   hasCloseButton: true,
diff --git a/databrowser/src/components/popover/PopoverTransition.vue b/databrowser/src/components/popover/PopoverTransition.vue
new file mode 100644
index 000000000..711b3ca45
--- /dev/null
+++ b/databrowser/src/components/popover/PopoverTransition.vue
@@ -0,0 +1,12 @@
+<template>
+  <transition
+    enter-active-class="transition duration-100 ease-out"
+    enter-from-class="transform scale-95 opacity-0"
+    enter-to-class="transform scale-100 opacity-100"
+    leave-active-class="transition duration-75 ease-out"
+    leave-from-class="transform scale-100 opacity-100"
+    leave-to-class="transform scale-95 opacity-0"
+  >
+    <slot />
+  </transition>
+</template>
diff --git a/databrowser/src/components/tooltip/TooltipCustom.vue b/databrowser/src/components/tooltip/TooltipCustom.vue
deleted file mode 100644
index 7b49cc0a0..000000000
--- a/databrowser/src/components/tooltip/TooltipCustom.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
-SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
-
-SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-  <div
-    ref="trigger"
-    class="w-fit"
-    @click="visible = hover ? visible : !visible"
-  >
-    <slot></slot>
-  </div>
-  <Teleport to="#popper-root">
-    <div
-      ref="tooltip"
-      class="absolute z-20 flex rounded border border-gray-250 bg-white p-1.5 shadow-xl"
-      :class="[{ hidden: !visible }, containerClasses]"
-    >
-      <!-- Tooltip arrow -->
-      <div
-        ref="arrow"
-        class="absolute size-4 rotate-45 bg-white"
-        :class="arrowClasses"
-      ></div>
-
-      <!-- Tooltip -->
-      <div class="p-2.5 px-3">
-        <slot name="container"></slot>
-      </div>
-
-      <!-- Close button -->
-      <button v-if="showCloseButton" class="flex w-4" @click="visible = false">
-        <IconClose class="text-hint-info" />
-      </button>
-    </div>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import IconClose from '../svg/IconClose.vue';
-import { useFloatingUi } from '../utils/useFloatingUi';
-import { useElementHover } from '@vueuse/core';
-
-const props = withDefaults(
-  defineProps<{
-    containerClasses?: string;
-    showCloseButton?: boolean;
-    hover?: boolean;
-  }>(),
-  {
-    containerClasses: 'max-w-md',
-    showCloseButton: true,
-  }
-);
-
-const visible = ref(false);
-const arrow = ref();
-
-const [trigger, tooltip, placement] = useFloatingUi({
-  placement: 'bottom-start',
-  offset: 12,
-  arrow,
-});
-
-const hoverTrigger = useElementHover(trigger, { delayLeave: 100 });
-const hoverTooltip = useElementHover(tooltip);
-
-watch([hoverTrigger, hoverTooltip], ([triggerNew, tooltipNew]) => {
-  if (props.hover) {
-    visible.value = triggerNew || tooltipNew;
-  }
-});
-
-const isBottomPlacement = computed(() => placement.value.startsWith('bottom'));
-
-const arrowClasses = computed(() =>
-  isBottomPlacement.value ? 'border-t-2 border-l-2' : 'border-b-2 border-r-2'
-);
-</script>
diff --git a/databrowser/src/components/utils/useFloatingUi.ts b/databrowser/src/components/utils/useFloatingUi.ts
index 535ae79dd..8266adecf 100644
--- a/databrowser/src/components/utils/useFloatingUi.ts
+++ b/databrowser/src/components/utils/useFloatingUi.ts
@@ -67,6 +67,7 @@ export const useFloatingUi = (
           if (middlewareData.arrow != null) {
             const { x: arrowX, y: arrowY } = middlewareData.arrow;
             const splittedPlacement = currentPlacement.split('-')[0];
+            const leftOffset = 5;
 
             const staticSide = {
               top: 'bottom',
@@ -76,7 +77,7 @@ export const useFloatingUi = (
             }[splittedPlacement]!;
 
             Object.assign(arrowEl.style, {
-              left: arrowX != null ? `${arrowX}px` : '',
+              left: arrowX != null ? `${arrowX + leftOffset}px` : '',
               top: arrowY != null ? `${arrowY}px` : '',
               right: '',
               bottom: '',
diff --git a/databrowser/src/domain/datasets/ui/tableView/SortAndFilterHeader.vue b/databrowser/src/domain/datasets/ui/tableView/SortAndFilterHeader.vue
index f2196827a..c95737f99 100644
--- a/databrowser/src/domain/datasets/ui/tableView/SortAndFilterHeader.vue
+++ b/databrowser/src/domain/datasets/ui/tableView/SortAndFilterHeader.vue
@@ -8,50 +8,63 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   <div class="flex items-center justify-between gap-1">
     {{ title }}
     <div class="flex items-center justify-end gap-1">
-      <TooltipCustom v-if="isDeprecated">
-        <template #default>
-          <div class="size-2 rounded-full bg-deprecated"></div>
+      <PopoverCustom v-if="isDeprecated" has-arrow>
+        <template #trigger>
+          <PopoverCustomButton class="flex">
+            <div class="size-2 rounded-full bg-deprecated"></div>
+          </PopoverCustomButton>
         </template>
         <template #container>
-          <h4 class="mb-2 font-semibold">Attribute is deprecated.</h4>
-
-          <p class="mb-5 text-sm">
-            A deprecated attribute is one that is phasing out and will not be
-            available anymore in the future. It is not recommended to use it.
-          </p>
-
-          <ButtonExternalLink
-            variant="ghost"
-            class="flex w-full justify-center"
-            href="https://github.com/noi-techpark/odh-docs/wiki/What-does-%22deprecated%22-mean%3F"
-            target="_blank"
-            >More info
-          </ButtonExternalLink>
+          <PopoverCustomPanel>
+            <PopoverContent class="max-w-md">
+              <h4 class="mb-2 font-semibold">Attribute is deprecated.</h4>
+
+              <p class="mb-5 text-sm">
+                A deprecated attribute is one that is phasing out and will not
+                be available anymore in the future. It is not recommended to use
+                it.
+              </p>
+
+              <ButtonExternalLink
+                variant="ghost"
+                class="flex w-full justify-center"
+                href="https://github.com/noi-techpark/odh-docs/wiki/What-does-%22deprecated%22-mean%3F"
+                target="_blank"
+                >More info
+              </ButtonExternalLink>
+            </PopoverContent>
+          </PopoverCustomPanel>
         </template>
-      </TooltipCustom>
+      </PopoverCustom>
 
-      <TooltipCustom v-if="isReference">
-        <template #default>
-          <div class="size-2 rounded-full bg-reference"></div>
+      <PopoverCustom v-if="isReference" has-arrow>
+        <template #trigger>
+          <PopoverCustomButton class="flex">
+            <div class="size-2 rounded-full bg-reference"></div>
+          </PopoverCustomButton>
         </template>
         <template #container>
-          <h4 class="mb-2 font-semibold">
-            Attribute is referenced from other dataset.
-          </h4>
-
-          <p class="mb-5 text-sm">
-            This attribute has its origin in another dataset and is added to
-            this view.
-          </p>
-
-          <ButtonCustom
-            variant="ghost"
-            class="w-full"
-            @click="onGoToReference()"
-            >View original dataset ({{ referenceName }})
-          </ButtonCustom>
+          <PopoverCustomPanel>
+            <PopoverContent class="max-w-md">
+              <h4 class="mb-2 font-semibold">
+                Attribute is referenced from other dataset.
+              </h4>
+
+              <p class="mb-5 text-sm">
+                This attribute has its origin in another dataset and is added to
+                this view.
+              </p>
+
+              <ButtonCustom
+                variant="ghost"
+                class="w-full"
+                @click="onGoToReference()"
+                >View original dataset ({{ referenceName }})
+              </ButtonCustom>
+            </PopoverContent></PopoverCustomPanel
+          >
         </template>
-      </TooltipCustom>
+      </PopoverCustom>
 
       <div v-if="!canSort && !canFilter">
         <IconStrokedArrowDown class="size-5 stroke-current" />
@@ -106,6 +119,7 @@ import PopoverContentHeader from '../../../../components/popover/PopoverContentH
 import PopoverCustom from '../../../../components/popover/PopoverCustom.vue';
 import PopoverCustomButton from '../../../../components/popover/PopoverCustomButton.vue';
 import PopoverCustomPanel from '../../../../components/popover/PopoverCustomPanel.vue';
+import PopoverContent from '../../../../components/popover/PopoverContent.vue';
 import IconFilter from '../../../../components/svg/IconFilter.vue';
 import IconSortAsc from '../../../../components/svg/IconSortAsc.vue';
 import IconSortDesc from '../../../../components/svg/IconSortDesc.vue';
@@ -114,7 +128,6 @@ import { PropertyPath } from '../../../datasets/config/types';
 import FilterPopoverContent from './filter/FilterPopoverContent.vue';
 import SortPopoverContent from './sort/SortPopoverContent.vue';
 import { useTableSortForPropertyPath } from './sort/useTableSort';
-import TooltipCustom from '../../../../components/tooltip/TooltipCustom.vue';
 import { useTableFilterStore } from './filter/tableFilterStore';
 import ButtonCustom from '../../../../components/button/ButtonCustom.vue';
 import ButtonExternalLink from '../../../../components/button/ButtonExternalLink.vue';
diff --git a/databrowser/src/pages/datasets/overview/DisclaimerCloseHeroPopup.vue b/databrowser/src/pages/datasets/overview/DisclaimerCloseHeroPopup.vue
new file mode 100644
index 000000000..d31e0ecb7
--- /dev/null
+++ b/databrowser/src/pages/datasets/overview/DisclaimerCloseHeroPopup.vue
@@ -0,0 +1,45 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <PopoverCustom has-arrow>
+    <template #trigger>
+      <PopoverCustomButton
+        trigger-on-hover
+        @trigger-click="onPopoverButtonClick()"
+      >
+        <IconClose class="relative size-6 cursor-pointer text-green-500" />
+      </PopoverCustomButton>
+    </template>
+
+    <template #container>
+      <PopoverCustomPanel
+        :has-close-button="false"
+        class="max-w-[200px] text-xs text-dialog"
+      >
+        <PopoverContent>
+          <p>
+            {{ $t('overview.listPage.heroCloseText') }}
+          </p>
+        </PopoverContent>
+      </PopoverCustomPanel>
+    </template>
+  </PopoverCustom>
+</template>
+
+<script setup lang="ts">
+import PopoverCustom from '../../../components/popover/PopoverCustom.vue';
+import PopoverCustomButton from '../../../components/popover/PopoverCustomButton.vue';
+import PopoverCustomPanel from '../../../components/popover/PopoverCustomPanel.vue';
+import PopoverContent from '../../../components/popover/PopoverContent.vue';
+import IconClose from '../../../components/svg/IconClose.vue';
+
+const emit = defineEmits(['close']);
+
+const onPopoverButtonClick = () => {
+  emit('close');
+};
+</script>
diff --git a/databrowser/src/pages/datasets/overview/OverviewListPageHero.vue b/databrowser/src/pages/datasets/overview/OverviewListPageHero.vue
index 00b46639b..d894129a9 100644
--- a/databrowser/src/pages/datasets/overview/OverviewListPageHero.vue
+++ b/databrowser/src/pages/datasets/overview/OverviewListPageHero.vue
@@ -15,17 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             <h1 class="text-2xl font-semibold leading-tight md:text-3xl">
               {{ $t('overview.listPage.heroTitle') }}
             </h1>
-            <TooltipCustom :show-close-button="false" hover>
-              <IconClose
-                class="size-6 cursor-pointer text-green-500"
-                @click="onHide"
-              />
-              <template #container>
-                <p class="max-w-[200px] text-xs text-dialog">
-                  {{ $t('overview.listPage.heroCloseText') }}
-                </p>
-              </template>
-            </TooltipCustom>
+            <DisclaimerCloseHeroPopup @close="onHide" />
           </div>
           <h2 class="text-base font-normal text-dialog md:text-xl">
             {{ $t('overview.listPage.heroSubtitle') }}
@@ -42,9 +32,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <script setup lang="ts">
 import ButtonLink from '../../../components/button/ButtonLink.vue';
 import ContentAlignmentX from '../../../components/content/ContentAlignmentX.vue';
-import IconClose from '../../../components/svg/IconClose.vue';
-import TooltipCustom from '../../../components/tooltip/TooltipCustom.vue';
 import { useLocalStorage } from '@vueuse/core';
+import DisclaimerCloseHeroPopup from './DisclaimerCloseHeroPopup.vue';
 
 const hide = useLocalStorage('opendatahub-hide-hero', false);
 

From b6915315ea0faa1f156fa5a8098da00807192cd8 Mon Sep 17 00:00:00 2001
From: Alessio Crea <alessio.crea98@gmail.com>
Date: Wed, 13 Nov 2024 15:50:30 +0100
Subject: [PATCH 2/6] fix: remove extra offset arrow

---
 databrowser/src/components/utils/useFloatingUi.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/databrowser/src/components/utils/useFloatingUi.ts b/databrowser/src/components/utils/useFloatingUi.ts
index 8266adecf..535ae79dd 100644
--- a/databrowser/src/components/utils/useFloatingUi.ts
+++ b/databrowser/src/components/utils/useFloatingUi.ts
@@ -67,7 +67,6 @@ export const useFloatingUi = (
           if (middlewareData.arrow != null) {
             const { x: arrowX, y: arrowY } = middlewareData.arrow;
             const splittedPlacement = currentPlacement.split('-')[0];
-            const leftOffset = 5;
 
             const staticSide = {
               top: 'bottom',
@@ -77,7 +76,7 @@ export const useFloatingUi = (
             }[splittedPlacement]!;
 
             Object.assign(arrowEl.style, {
-              left: arrowX != null ? `${arrowX + leftOffset}px` : '',
+              left: arrowX != null ? `${arrowX}px` : '',
               top: arrowY != null ? `${arrowY}px` : '',
               right: '',
               bottom: '',

From 52091b68b8a0d2db2fe077e6cdcdc74b38637a48 Mon Sep 17 00:00:00 2001
From: Alessio Crea <alessio.crea98@gmail.com>
Date: Wed, 13 Nov 2024 16:05:55 +0100
Subject: [PATCH 3/6] feat: add left offset arrow

---
 databrowser/src/components/utils/useFloatingUi.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/databrowser/src/components/utils/useFloatingUi.ts b/databrowser/src/components/utils/useFloatingUi.ts
index 535ae79dd..902839d74 100644
--- a/databrowser/src/components/utils/useFloatingUi.ts
+++ b/databrowser/src/components/utils/useFloatingUi.ts
@@ -68,6 +68,11 @@ export const useFloatingUi = (
             const { x: arrowX, y: arrowY } = middlewareData.arrow;
             const splittedPlacement = currentPlacement.split('-')[0];
 
+            const { x: tooltipX } = tooltipEl.getBoundingClientRect();
+            const { x: arrowWindowX } = arrowEl.getBoundingClientRect();
+
+            const leftOffset = tooltipX > arrowWindowX ? 5 : -5;
+
             const staticSide = {
               top: 'bottom',
               right: 'left',
@@ -76,7 +81,7 @@ export const useFloatingUi = (
             }[splittedPlacement]!;
 
             Object.assign(arrowEl.style, {
-              left: arrowX != null ? `${arrowX}px` : '',
+              left: arrowX != null ? `${arrowX + leftOffset}px` : '',
               top: arrowY != null ? `${arrowY}px` : '',
               right: '',
               bottom: '',

From b275c35c93faccae63341fb4deedae6f2f2f2996 Mon Sep 17 00:00:00 2001
From: Alessio Crea <alessio.crea98@gmail.com>
Date: Wed, 13 Nov 2024 16:07:54 +0100
Subject: [PATCH 4/6] fix: missing reuse

---
 databrowser/src/components/popover/PopoverTransition.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/databrowser/src/components/popover/PopoverTransition.vue b/databrowser/src/components/popover/PopoverTransition.vue
index 711b3ca45..40fc744f2 100644
--- a/databrowser/src/components/popover/PopoverTransition.vue
+++ b/databrowser/src/components/popover/PopoverTransition.vue
@@ -1,3 +1,9 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
 <template>
   <transition
     enter-active-class="transition duration-100 ease-out"

From f814fadc1d5389a32ef6745957f9613e9cae3191 Mon Sep 17 00:00:00 2001
From: Alessio Crea <alessio.crea98@gmail.com>
Date: Tue, 10 Dec 2024 10:58:34 +0100
Subject: [PATCH 5/6] fix: code formatting and arrow positioning

---
 .../src/components/popover/PopoverCustom.vue  |  5 ++++-
 .../popover/PopoverCustomButton.vue           | 13 ++-----------
 .../src/components/utils/useFloatingUi.ts     | 19 ++++++++++---------
 .../ui/tableView/SortAndFilterHeader.vue      |  8 ++++----
 4 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/databrowser/src/components/popover/PopoverCustom.vue b/databrowser/src/components/popover/PopoverCustom.vue
index 722be6b32..d788d755e 100644
--- a/databrowser/src/components/popover/PopoverCustom.vue
+++ b/databrowser/src/components/popover/PopoverCustom.vue
@@ -42,16 +42,18 @@ import { useFloatingUi } from '../utils/useFloatingUi';
 import { computed, ref } from 'vue';
 import PopoverTransition from './PopoverTransition.vue';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     fullScreenWidth?: boolean;
     zIndex?: number;
     hasArrow?: boolean;
+    leftOffset?: number;
   }>(),
   {
     fullScreenWidth: true,
     zIndex: undefined,
     hasArrow: false,
+    leftOffset: undefined,
   }
 );
 
@@ -61,6 +63,7 @@ const [trigger, container, placement] = useFloatingUi({
   placement: 'bottom-start',
   offset: 8,
   arrow,
+  leftOffset: props.leftOffset,
 });
 
 const arrowClasses = computed(() =>
diff --git a/databrowser/src/components/popover/PopoverCustomButton.vue b/databrowser/src/components/popover/PopoverCustomButton.vue
index 9167e83df..b08c38a0f 100644
--- a/databrowser/src/components/popover/PopoverCustomButton.vue
+++ b/databrowser/src/components/popover/PopoverCustomButton.vue
@@ -12,14 +12,13 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     :class="{
       relative: triggerOnHover,
     }"
-    @click="onPopoverButtonClick"
   >
     <slot :open="open" :close="close"></slot>
     <span
       v-if="triggerOnHover"
       ref="triggerHoverRef"
       class="absolute left-0 top-0 h-full w-full"
-      @click="onTriggerHoverClick()"
+      @click.stop="onTriggerHoverClick()"
       @mouseover="onTriggerMouseHover(open)"
       @mouseleave="onTriggerMouseLeave(close)"
     >
@@ -32,7 +31,7 @@ import { ref } from 'vue';
 import { PopoverButton } from '@headlessui/vue';
 import { useTimeoutFn } from '@vueuse/core';
 
-const props = defineProps<{ disabled?: boolean; triggerOnHover?: boolean }>();
+defineProps<{ disabled?: boolean; triggerOnHover?: boolean }>();
 
 const emit = defineEmits(['triggerClick']);
 
@@ -56,14 +55,6 @@ const onTriggerHoverClick = () => {
   emit('triggerClick');
 };
 
-const onPopoverButtonClick = (e: PointerEvent) => {
-  if (!e.pointerType || !props.triggerOnHover) {
-    return;
-  }
-
-  e.preventDefault();
-};
-
 const {
   isPending: isPopoverButtonClickPending,
   start: startPopoverButtonClick,
diff --git a/databrowser/src/components/utils/useFloatingUi.ts b/databrowser/src/components/utils/useFloatingUi.ts
index 902839d74..2f3bd7ee4 100644
--- a/databrowser/src/components/utils/useFloatingUi.ts
+++ b/databrowser/src/components/utils/useFloatingUi.ts
@@ -17,6 +17,7 @@ export interface UseFloatingUi {
   placement: Placement;
   matchReferenceWidth?: boolean;
   offset?: number;
+  leftOffset?: number;
   arrow?: Ref<any>;
 }
 
@@ -55,8 +56,14 @@ export const useFloatingUi = (
           middleware,
         }).then(({ x, y, placement: currentPlacement, middlewareData }) => {
           // Position tooltip
+          const [staticPlacement, dynamicPlacement] =
+            currentPlacement.split('-');
+
+          const leftOffset =
+            (options.leftOffset || 0) * (dynamicPlacement === 'end' ? 1 : -1);
+
           Object.assign(tooltipEl.style, {
-            left: `${x}px`,
+            left: `${x + leftOffset}px`,
             top: `${y}px`,
           });
 
@@ -66,22 +73,16 @@ export const useFloatingUi = (
           // If arrow element is provided, handle its positioning
           if (middlewareData.arrow != null) {
             const { x: arrowX, y: arrowY } = middlewareData.arrow;
-            const splittedPlacement = currentPlacement.split('-')[0];
-
-            const { x: tooltipX } = tooltipEl.getBoundingClientRect();
-            const { x: arrowWindowX } = arrowEl.getBoundingClientRect();
-
-            const leftOffset = tooltipX > arrowWindowX ? 5 : -5;
 
             const staticSide = {
               top: 'bottom',
               right: 'left',
               bottom: 'top',
               left: 'right',
-            }[splittedPlacement]!;
+            }[staticPlacement]!;
 
             Object.assign(arrowEl.style, {
-              left: arrowX != null ? `${arrowX + leftOffset}px` : '',
+              left: arrowX != null ? `${arrowX - leftOffset}px` : '',
               top: arrowY != null ? `${arrowY}px` : '',
               right: '',
               bottom: '',
diff --git a/databrowser/src/domain/datasets/ui/tableView/SortAndFilterHeader.vue b/databrowser/src/domain/datasets/ui/tableView/SortAndFilterHeader.vue
index c95737f99..fff6a2032 100644
--- a/databrowser/src/domain/datasets/ui/tableView/SortAndFilterHeader.vue
+++ b/databrowser/src/domain/datasets/ui/tableView/SortAndFilterHeader.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   <div class="flex items-center justify-between gap-1">
     {{ title }}
     <div class="flex items-center justify-end gap-1">
-      <PopoverCustom v-if="isDeprecated" has-arrow>
+      <PopoverCustom v-if="isDeprecated" has-arrow :left-offset="5">
         <template #trigger>
           <PopoverCustomButton class="flex">
             <div class="size-2 rounded-full bg-deprecated"></div>
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         </template>
       </PopoverCustom>
 
-      <PopoverCustom v-if="isReference" has-arrow>
+      <PopoverCustom v-if="isReference" has-arrow :left-offset="5">
         <template #trigger>
           <PopoverCustomButton class="flex">
             <div class="size-2 rounded-full bg-reference"></div>
@@ -61,8 +61,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 @click="onGoToReference()"
                 >View original dataset ({{ referenceName }})
               </ButtonCustom>
-            </PopoverContent></PopoverCustomPanel
-          >
+            </PopoverContent>
+          </PopoverCustomPanel>
         </template>
       </PopoverCustom>
 

From 220516325832031894df6832ae07ba4eb02fcfbe Mon Sep 17 00:00:00 2001
From: Alessio Crea <alessio.crea98@gmail.com>
Date: Thu, 16 Jan 2025 12:13:04 +0100
Subject: [PATCH 6/6] fix: check for arrowEl value and set correct type arrow
 ref

---
 .../src/components/utils/useFloatingUi.ts     | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/databrowser/src/components/utils/useFloatingUi.ts b/databrowser/src/components/utils/useFloatingUi.ts
index 1c09c0583..70b03977d 100644
--- a/databrowser/src/components/utils/useFloatingUi.ts
+++ b/databrowser/src/components/utils/useFloatingUi.ts
@@ -18,7 +18,7 @@ export interface UseFloatingUi {
   matchReferenceWidth?: boolean;
   offset?: number;
   leftOffset?: number;
-  arrow?: Ref<any>;
+  arrow?: Ref<HTMLElement>;
 
 }
 
@@ -77,13 +77,16 @@ export const useFloatingUi = (
               left: 'right',
             }[staticPlacement]!;
 
-            Object.assign(arrowEl.style, {
-              left: arrowX != null ? `${arrowX - leftOffset}px` : '',
-              top: arrowY != null ? `${arrowY}px` : '',
-              right: '',
-              bottom: '',
-              [staticSide]: '-8px',
-            });
+            if(arrowEl){
+              Object.assign(arrowEl.style, {
+                left: arrowX != null ? `${arrowX - leftOffset}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+                right: '',
+                bottom: '',
+                [staticSide]: '-8px',
+              });
+            }
+     
           }
         });
       });