From 4313bedd8c4173a5e3176ec539d27adc429f3a77 Mon Sep 17 00:00:00 2001
From: Julien Touchais <5978-julien.touchais@users.noreply.forgemia.inra.fr>
Date: Mon, 25 Nov 2024 17:17:49 +0100
Subject: [PATCH 1/3] fix(linear-sequence): :bug: only one modification
displayed in tooltip on hover
---
src/components/SequenceBoard.vue | 115 ++++++++++++++++++++++++-------
1 file changed, 89 insertions(+), 26 deletions(-)
diff --git a/src/components/SequenceBoard.vue b/src/components/SequenceBoard.vue
index a46b891..f8c3592 100644
--- a/src/components/SequenceBoard.vue
+++ b/src/components/SequenceBoard.vue
@@ -183,6 +183,21 @@ const highlightedGroupIdsContaining = (position: number): string[] =>
)
: []
+/**
+ * Gets the highlighted groups containing a nucleotide.
+ * @param position The position of the nucleotide for which to get group.
+ * @returns A list of tuples, `[group ID, group]` for each of the highlighted
+ * groups containing the nucleotide.
+ */
+const highlightedGroupsContaining = (
+ position: number
+): [string, highlightGroupModel][] =>
+ props.highlightedGroups
+ ? Object.entries(props.highlightedGroups).filter(([groupId]) =>
+ isInHighlightedGroup(position, groupId)
+ )
+ : []
+
/**
* Whether a nucleotide is in any highlighted group.
* @param position The position of the nucleotide to check.
@@ -578,17 +593,6 @@ const lockTooltip = () => {
lockedTooltipHighlightedGroups.value = new Set(hoveredHighlightedGroups.value)
tooltipComponent.value?.lockTooltipIfUnlocked()
}
-
-const deleteHoveredHighlightedGroup = (
- highlightedGroupTuple: [string, highlightGroupModel]
-) => {
- const hoveredHighlightedGroupTuple = [...hoveredHighlightedGroups.value].find(
- ([hoveredHighlightedGroupId]) =>
- hoveredHighlightedGroupId === highlightedGroupTuple[0]
- )
- hoveredHighlightedGroupTuple &&
- hoveredHighlightedGroups.value.delete(hoveredHighlightedGroupTuple)
-}
</script>
<template>
@@ -689,7 +693,7 @@ const deleteHoveredHighlightedGroup = (
nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
"
:class="[
- 'mx-[.0625rem] border-2 border-transparent px-0.5 pt-0.5',
+ 'relative mx-[.0625rem] border-2 border-transparent px-0.5 pt-0.5',
isInAnyHighlightedGroup(
nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
) && [
@@ -700,12 +704,46 @@ const deleteHoveredHighlightedGroup = (
]
]"
>
- {{ nucleotide }}
+ <span
+ v-if="
+ highlightedGroupsContaining(
+ nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
+ ).find(
+ ([_highlightedGroupId, highlightedGroup]) =>
+ highlightedGroup.shouldTooltip
+ )
+ "
+ :class="[
+ 'absolute -bottom-0.5 -left-[0.1875rem] -right-[0.1875rem] -top-0.5',
+ highlightedGroupsContaining(
+ nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
+ ).find(
+ ([_highlightedGroupId, highlightedGroup]) =>
+ highlightedGroup.link
+ )
+ ? 'cursor-pointer'
+ : 'cursor-help'
+ ]"
+ @mouseenter="
+ highlightedGroupsContaining(
+ nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
+ ).forEach(
+ ([highlightedGroupId, highlightedGroup]) =>
+ highlightedGroup.shouldTooltip &&
+ hoveredHighlightedGroups.add([
+ highlightedGroupId,
+ highlightedGroup
+ ])
+ )
+ "
+ @mouseleave="hoveredHighlightedGroups.clear()"
+ @click="lockTooltip"
+ />{{ nucleotide }}
</span>
<span
v-else
:class="[
- 'mx-[.0625rem] border-2 border-transparent px-0.5 pt-0.5',
+ 'relative mx-[.0625rem] border-2 border-transparent px-0.5 pt-0.5',
isInAnyHighlightedGroup(
nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
) && [
@@ -716,7 +754,41 @@ const deleteHoveredHighlightedGroup = (
]
]"
>
- {{ nucleotide }}
+ <span
+ v-if="
+ highlightedGroupsContaining(
+ nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
+ ).find(
+ ([_highlightedGroupId, highlightedGroup]) =>
+ highlightedGroup.shouldTooltip
+ )
+ "
+ :class="[
+ 'absolute -bottom-0.5 -left-[0.1875rem] -right-[0.1875rem] -top-0.5',
+ highlightedGroupsContaining(
+ nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
+ ).find(
+ ([_highlightedGroupId, highlightedGroup]) =>
+ highlightedGroup.link
+ )
+ ? 'cursor-pointer'
+ : 'cursor-help'
+ ]"
+ @mouseenter="
+ highlightedGroupsContaining(
+ nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
+ ).forEach(
+ ([highlightedGroupId, highlightedGroup]) =>
+ highlightedGroup.shouldTooltip &&
+ hoveredHighlightedGroups.add([
+ highlightedGroupId,
+ highlightedGroup
+ ])
+ )
+ "
+ @mouseleave="hoveredHighlightedGroups.clear()"
+ @click="lockTooltip"
+ />{{ nucleotide }}
</span>
</template>
</span>
@@ -740,14 +812,6 @@ const deleteHoveredHighlightedGroup = (
:data-start="highlightedGroup.start"
:data-end="highlightedGroup.end"
class="highlight-group"
- @mouseenter="
- highlightedGroup.shouldTooltip &&
- hoveredHighlightedGroups.add([highlightedGroupId, highlightedGroup])
- "
- @mouseleave="
- deleteHoveredHighlightedGroup([highlightedGroupId, highlightedGroup])
- "
- @click="lockTooltip"
>
<span
v-for="highlightedGroupLine in range(
@@ -765,8 +829,7 @@ const deleteHoveredHighlightedGroup = (
'rounded-r-xl border-r-2':
highlightedGroupsLineCount &&
highlightedGroupLine + 1 ===
- highlightedGroupsLineCount[highlightedGroupId],
- 'z-10': highlightedGroup.shouldTooltip
+ highlightedGroupsLineCount[highlightedGroupId]
},
highlightedGroup.shouldTooltip &&
(highlightedGroup.link ? 'cursor-pointer' : 'cursor-help')
@@ -780,7 +843,7 @@ const deleteHoveredHighlightedGroup = (
class="z-20 max-w-min font-sans text-base shadow-xl"
@unlock="lockedTooltipHighlightedGroups = undefined"
>
- <ul>
+ <ul class="flex flex-col gap-1">
<li
v-for="(highlightedGroup, index) in tooltipHighlightedGroups"
:key="index"
--
GitLab
From c99778d0aad6056631c0499d4f010f212ed30c50 Mon Sep 17 00:00:00 2001
From: Julien Touchais <5978-julien.touchais@users.noreply.forgemia.inra.fr>
Date: Mon, 25 Nov 2024 17:17:49 +0100
Subject: [PATCH 2/3] feat(linear-sequence): :sparkles: add a note to explain
how to lock tooltip
---
src/components/SequenceBoard.vue | 33 ++++++++++++++++++--------------
1 file changed, 19 insertions(+), 14 deletions(-)
diff --git a/src/components/SequenceBoard.vue b/src/components/SequenceBoard.vue
index f8c3592..1e859f7 100644
--- a/src/components/SequenceBoard.vue
+++ b/src/components/SequenceBoard.vue
@@ -613,20 +613,25 @@ const lockTooltip = () => {
</template>
<template v-if="legendItems" #center>
- <BaseLegendButtonOverlay button-text="Legend" :items="legendItems">
- <template #item="{ item }">
- <slot name="legend-item" :item="item" />
- </template>
- <template #item-icon="{ item }">
- <slot name="legend-item-icon" :item="item" />
- </template>
- <template #item-title="{ item }">
- <slot name="legend-item-title" :item="item" />
- </template>
- <template #item-description="{ item }">
- <slot name="legend-item-description" :item="item" />
- </template>
- </BaseLegendButtonOverlay>
+ <div class="flex flex-col items-center gap-2">
+ <BaseLegendButtonOverlay button-text="Legend" :items="legendItems">
+ <template #item="{ item }">
+ <slot name="legend-item" :item="item" />
+ </template>
+ <template #item-icon="{ item }">
+ <slot name="legend-item-icon" :item="item" />
+ </template>
+ <template #item-title="{ item }">
+ <slot name="legend-item-title" :item="item" />
+ </template>
+ <template #item-description="{ item }">
+ <slot name="legend-item-description" :item="item" />
+ </template>
+ </BaseLegendButtonOverlay>
+ <span class="text-sm italic text-slate-600">
+ Click on an object to lock its tooltip in place.
+ </span>
+ </div>
</template>
<template #end>
--
GitLab
From 2463d39ddb0fd3224c8a0993f774d1f31693643e Mon Sep 17 00:00:00 2001
From: Julien Touchais <5978-julien.touchais@users.noreply.forgemia.inra.fr>
Date: Mon, 25 Nov 2024 17:17:49 +0100
Subject: [PATCH 3/3] feat(linear-sequence): :sparkles: help for tooltip in an
hover icon on non-phone screens
---
src/components/SequenceBoard.vue | 14 ++++++++++++--
1 file changed, 12 insertions(+), 2 deletions(-)
diff --git a/src/components/SequenceBoard.vue b/src/components/SequenceBoard.vue
index 1e859f7..6c338a1 100644
--- a/src/components/SequenceBoard.vue
+++ b/src/components/SequenceBoard.vue
@@ -14,6 +14,7 @@ import Toolbar from 'primevue/toolbar'
import IconFa6SolidDna from '~icons/fa6-solid/dna'
import IconFa6SolidCircleCheck from '~icons/fa6-solid/circle-check'
import IconFa6RegularCopy from '~icons/fa6-regular/copy'
+import IconFa6SolidCircleInfo from '~icons/fa6-solid/circle-info'
/**
* Other 3rd-party imports
*/
@@ -613,7 +614,7 @@ const lockTooltip = () => {
</template>
<template v-if="legendItems" #center>
- <div class="flex flex-col items-center gap-2">
+ <div class="relative flex flex-col items-center gap-2">
<BaseLegendButtonOverlay button-text="Legend" :items="legendItems">
<template #item="{ item }">
<slot name="legend-item" :item="item" />
@@ -628,9 +629,18 @@ const lockTooltip = () => {
<slot name="legend-item-description" :item="item" />
</template>
</BaseLegendButtonOverlay>
- <span class="text-sm italic text-slate-600">
+ <span class="text-sm italic text-slate-600 md:hidden">
Click on an object to lock its tooltip in place.
</span>
+ <span
+ v-tooltip.right="{
+ value: 'Click on an object to lock its tooltip in place.',
+ pt: { text: 'text-xs' }
+ }"
+ class="absolute -right-2 -top-2 hidden text-base text-slate-600 md:inline"
+ >
+ <icon-fa6-solid-circle-info />
+ </span>
</div>
</template>
--
GitLab