From e7c468bd679066d5336a899e47af56d7cdcd2343 Mon Sep 17 00:00:00 2001
From: Julien Touchais <5978-julien.touchais@users.noreply.forgemia.inra.fr>
Date: Tue, 28 May 2024 14:28:59 +0200
Subject: [PATCH 1/3] fix(linear-sequence): :bug: conditional ref not working
in built app
using v-if/v-else directives instead to produce a clearly different element when referencing is needed
---
src/components/SequenceBoard.vue | 64 ++++++++++++++++++++------------
1 file changed, 41 insertions(+), 23 deletions(-)
diff --git a/src/components/SequenceBoard.vue b/src/components/SequenceBoard.vue
index 284c027..4bb8ace 100644
--- a/src/components/SequenceBoard.vue
+++ b/src/components/SequenceBoard.vue
@@ -700,33 +700,51 @@ const deleteHoveredHighlightedGroup = (
class="relative z-10 mr-4 mt-8 whitespace-nowrap"
:style="{ width: `${nucleotideGroupsSize * 1.5}rem` }"
>
- <span
+ <template
v-for="(nucleotide, nucleotideIndex) in sequenceGroup"
:key="nucleotideIndex"
- :ref="
- isHighlightedGroupBoundary(
- nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
- )
- ? 'boxBoundaryElements'
- : ''
- "
- :data-position="
- nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
- "
- :class="[
- 'mx-[.0625rem] border-2 border-transparent px-0.5 pt-0.5',
- isInAnyHighlightedGroup(
+ >
+ <span
+ v-if="
+ isHighlightedGroupBoundary(
+ nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
+ )
+ "
+ ref="boxBoundaryElements"
+ :data-position="
nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
- ) && [
- `text-${composeHighlightedPositionColor(
+ "
+ :class="[
+ 'mx-[.0625rem] border-2 border-transparent px-0.5 pt-0.5',
+ isInAnyHighlightedGroup(
nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
- )}-600`,
- 'modification font-semibold'
- ]
- ]"
- >
- {{ nucleotide }}
- </span>
+ ) && [
+ `text-${composeHighlightedPositionColor(
+ nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
+ )}-600`,
+ 'modification font-semibold'
+ ]
+ ]"
+ >
+ {{ nucleotide }}
+ </span>
+ <span
+ v-else
+ :class="[
+ 'mx-[.0625rem] border-2 border-transparent px-0.5 pt-0.5',
+ isInAnyHighlightedGroup(
+ nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
+ ) && [
+ `text-${composeHighlightedPositionColor(
+ nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
+ )}-600`,
+ 'modification font-semibold'
+ ]
+ ]"
+ >
+ {{ nucleotide }}
+ </span>
+ </template>
</span>
<span
--
GitLab
From 442e27eacc752ecb80a7f5890b3c0e78d753ea3b Mon Sep 17 00:00:00 2001
From: Julien Touchais <5978-julien.touchais@users.noreply.forgemia.inra.fr>
Date: Tue, 28 May 2024 14:33:37 +0200
Subject: [PATCH 2/3] fix(interaction-viz): :bug: conditional ref not working
in built app
use same strategy as in SequenceBoard (e7c468bd), + remove useless id
---
src/components/InteractionCardCD.vue | 30 +++++++++++----------
src/components/InteractionCardHACA.vue | 37 +++++++++++---------------
2 files changed, 32 insertions(+), 35 deletions(-)
diff --git a/src/components/InteractionCardCD.vue b/src/components/InteractionCardCD.vue
index d8bbf9f..3bc3374 100644
--- a/src/components/InteractionCardCD.vue
+++ b/src/components/InteractionCardCD.vue
@@ -988,21 +988,23 @@ const SVGDimensions = computed(() => ({
:textLength="textsDesc.duplex.seq2.length"
style="transform: translateY(0.5rem)"
>
- <tspan
- v-for="(nucleotide, index) in paddedFragments.target.split('')"
- :id="index === modificationPositionInDuplex ? 'modif-letter' : ''"
- :ref="
- index === modificationPositionInDuplex
- ? 'modificationElement'
- : ''
- "
- :key="index"
- :class="{
- 'fill-transparent': index === modificationPositionInDuplex
- }"
+ <template
+ v-for="(
+ nucleotide, nucleotideIndex
+ ) in paddedFragments.target.split('')"
+ :key="nucleotideIndex"
>
- {{ nucleotide }}
- </tspan>
+ <tspan
+ v-if="nucleotideIndex === modificationPositionInDuplex"
+ ref="modificationElement"
+ class="fill-transparent"
+ >
+ {{ nucleotide }}
+ </tspan>
+ <tspan v-else>
+ {{ nucleotide }}
+ </tspan>
+ </template>
</text>
</g>
diff --git a/src/components/InteractionCardHACA.vue b/src/components/InteractionCardHACA.vue
index a5d7631..ee74ab4 100644
--- a/src/components/InteractionCardHACA.vue
+++ b/src/components/InteractionCardHACA.vue
@@ -1766,31 +1766,26 @@ const SVGDimensions = computed(() => ({
:textLength="textsDesc.unbound.modification.length"
class="whitespace-pre"
>
- <tspan
+ <template
v-for="(nucleotide, nucleotideIndex) in splitPaddedFragments.target
.modification"
- :id="
- nucleotideIndex === modificationPositionInUnbound
- ? 'modif-letter'
- : ''
- "
- :ref="
- nucleotideIndex === modificationPositionInUnbound
- ? 'modificationElement'
- : ''
- "
:key="nucleotideIndex"
- :class="[
- nucleotideIndex === modificationPositionInUnbound &&
- `fill-${getModificationColor(ModifType.Psi)}-600`
- ]"
>
- {{
- nucleotideIndex === modificationPositionInUnbound
- ? 'Ψ'
- : nucleotide
- }}
- </tspan>
+ <tspan
+ v-if="nucleotideIndex === modificationPositionInUnbound"
+ ref="modificationElement"
+ :class="`fill-${getModificationColor(ModifType.Psi)}-600`"
+ >
+ {{
+ /* Wrapping the letter in "mustache" syntax here to prevent
+ whitespace insertion around it */
+ 'Ψ'
+ }}
+ </tspan>
+ <tspan v-else>
+ {{ nucleotide }}
+ </tspan>
+ </template>
</text>
<text
:x="textsDesc.duplexes.after.target.x"
--
GitLab
From ac422726e95c9391fabd16eda7e0e0e8125b5824 Mon Sep 17 00:00:00 2001
From: Julien Touchais <5978-julien.touchais@users.noreply.forgemia.inra.fr>
Date: Tue, 28 May 2024 14:35:48 +0200
Subject: [PATCH 3/3] fix(base-components): :bug: conditional ref not working
in built app in link list
include every item in ref (hover enabling check is already done before setting up events)
---
src/components/BaseLinkListCard.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/BaseLinkListCard.vue b/src/components/BaseLinkListCard.vue
index 8c9c450..547b9ff 100644
--- a/src/components/BaseLinkListCard.vue
+++ b/src/components/BaseLinkListCard.vue
@@ -132,7 +132,7 @@ defineExpose({ scrollToListTop })
}"
>
<div
- :ref="hoverEvent ? 'linkItemWrappers' : ''"
+ ref="linkItemWrappers"
:data-link-item-id="linkItem.id"
:class="[
'grid p-2',
--
GitLab