From afd372e2360767ba5058b4aba1d00bc852a574a5 Mon Sep 17 00:00:00 2001
From: Julien Touchais <5978-julien.touchais@users.noreply.forgemia.inra.fr>
Date: Mon, 16 Oct 2023 15:43:47 +0200
Subject: [PATCH 1/5] fix: :construction: beginnning of a solution for #16
---
src/components/SequenceBoard.vue | 42 +++++++++++++++++++++++---------
1 file changed, 30 insertions(+), 12 deletions(-)
diff --git a/src/components/SequenceBoard.vue b/src/components/SequenceBoard.vue
index b3c0205..4d09d5d 100644
--- a/src/components/SequenceBoard.vue
+++ b/src/components/SequenceBoard.vue
@@ -76,22 +76,13 @@ const sequenceToClipboard = () => {
</Button>
</div>
<div
- class="sequence-parent grid justify-between gap-x-4 gap-y-2 font-mono text-2xl"
- :style="{
- // Highly-dynamic style which can't be handled by Tailwind safelisting
- // Grid columns width: (1ch + .25rem + 4px) * # of nucleotides in a group
- gridTemplateColumns: `repeat(auto-fill, min(100%, calc(${nucleotideGroupsSize}ch + ${
- 0.25 * nucleotideGroupsSize
- }rem + ${4 * nucleotideGroupsSize}px)))`
- }"
+ class="sequence-parent relative overflow-x-auto overflow-y-hidden pt-4 font-mono text-2xl leading-[4.25rem]"
>
- <div
+ <span
v-for="(sequenceGroup, groupIndex) in splittedSequence"
:key="groupIndex"
+ class="relative z-10 mr-4 mt-8 whitespace-nowrap"
>
- <div class="select-none text-sm text-slate-400">
- {{ groupIndex * nucleotideGroupsSize + 1 }}
- </div>
<span
v-for="(nucleotide, nucleotideIndex) in sequenceGroup"
:key="nucleotideIndex"
@@ -113,6 +104,16 @@ const sequenceToClipboard = () => {
>
{{ nucleotide }}
</span>
+ </span>
+ <div class="absolute -top-3 left-0 z-0">
+ <span
+ v-for="(sequenceGroup, groupIndex) in splittedSequence"
+ :key="groupIndex"
+ class="mt-5 inline-block select-none text-lg text-slate-400"
+ :style="{ width: `${nucleotideGroupsSize * 1.5}rem` }"
+ >
+ {{ groupIndex * nucleotideGroupsSize + 1 }}
+ </span>
</div>
</div>
</template>
@@ -126,4 +127,21 @@ const sequenceToClipboard = () => {
background-color: var(--gray-100);
}
}
+
+@-moz-document url-prefix() {
+ .sequence-parent {
+ line-height: normal;
+ padding-top: 0;
+ > span {
+ display: inline-block;
+ }
+
+ > div {
+ top: -1rem;
+ span {
+ margin-bottom: 0.75rem;
+ }
+ }
+ }
+}
</style>
--
GitLab
From 6c8990ee9eb5b6e445fd9743911c665b29cc7c9c Mon Sep 17 00:00:00 2001
From: Julien Touchais <5978-julien.touchais@users.noreply.forgemia.inra.fr>
Date: Mon, 16 Oct 2023 15:43:47 +0200
Subject: [PATCH 2/5] feat: :lipstick: add margin around nucleotides & more
consistent size
---
src/components/SequenceBoard.vue | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/src/components/SequenceBoard.vue b/src/components/SequenceBoard.vue
index 4d09d5d..8cf835a 100644
--- a/src/components/SequenceBoard.vue
+++ b/src/components/SequenceBoard.vue
@@ -87,7 +87,7 @@ const sequenceToClipboard = () => {
v-for="(nucleotide, nucleotideIndex) in sequenceGroup"
:key="nucleotideIndex"
:class="[
- 'border-2 border-transparent px-[.125rem] pt-0.5',
+ 'mx-[.0625rem] border-2 border-transparent px-[.125rem] pt-0.5',
highlightedPositions.includes(
nucleotideIndex + groupIndex * nucleotideGroupsSize + 1
) && [
@@ -110,7 +110,11 @@ const sequenceToClipboard = () => {
v-for="(sequenceGroup, groupIndex) in splittedSequence"
:key="groupIndex"
class="mt-5 inline-block select-none text-lg text-slate-400"
- :style="{ width: `${nucleotideGroupsSize * 1.5}rem` }"
+ :style="{
+ width: `calc(${nucleotideGroupsSize * 0.375}rem + ${
+ nucleotideGroupsSize * 4
+ }px + ${(nucleotideGroupsSize * 4) / 3}ch + 1rem)`
+ }"
>
{{ groupIndex * nucleotideGroupsSize + 1 }}
</span>
--
GitLab
From 1014bd3a079cd1c44981aee0777427da1cb96c66 Mon Sep 17 00:00:00 2001
From: Julien Touchais <5978-julien.touchais@users.noreply.forgemia.inra.fr>
Date: Mon, 16 Oct 2023 15:43:47 +0200
Subject: [PATCH 3/5] fix: :lipstick: add padding under the sequence to avoid
truncation
---
src/components/SequenceBoard.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/SequenceBoard.vue b/src/components/SequenceBoard.vue
index 8cf835a..3e2426c 100644
--- a/src/components/SequenceBoard.vue
+++ b/src/components/SequenceBoard.vue
@@ -76,7 +76,7 @@ const sequenceToClipboard = () => {
</Button>
</div>
<div
- class="sequence-parent relative overflow-x-auto overflow-y-hidden pt-4 font-mono text-2xl leading-[4.25rem]"
+ class="sequence-parent relative overflow-x-auto overflow-y-hidden pb-2 pt-4 font-mono text-2xl leading-[4.25rem]"
>
<span
v-for="(sequenceGroup, groupIndex) in splittedSequence"
--
GitLab
From 7ef7e1a68241c96331becf38f031b976b5e78513 Mon Sep 17 00:00:00 2001
From: Julien Touchais <5978-julien.touchais@users.noreply.forgemia.inra.fr>
Date: Mon, 16 Oct 2023 15:43:47 +0200
Subject: [PATCH 4/5] fix: :recycle: use a ResizeObserver with individual
number absolute positionning
---
src/components/SequenceBoard.vue | 71 +++++++++++++++++++++-----------
1 file changed, 48 insertions(+), 23 deletions(-)
diff --git a/src/components/SequenceBoard.vue b/src/components/SequenceBoard.vue
index 3e2426c..46c1537 100644
--- a/src/components/SequenceBoard.vue
+++ b/src/components/SequenceBoard.vue
@@ -39,6 +39,37 @@ const sequenceToClipboard = () => {
}, 400)
)
}
+
+const sequenceContainerElement = ref<HTMLElement>()
+const sequenceGroupElements = ref<HTMLElement[]>([])
+const groupNumberElements = ref<HTMLElement[]>([])
+
+const redrawGroupNumbers = () => {
+ document.body.offsetHeight
+ groupNumberElements.value.forEach((groupNumberElement) => {
+ const matchingSequenceGroupElement = sequenceGroupElements.value.find(
+ (element) => {
+ console.log(element)
+ return (
+ element.dataset.groupIndex === groupNumberElement.dataset.groupIndex
+ )
+ }
+ )
+
+ console.log(matchingSequenceGroupElement)
+
+ groupNumberElement.style.left = `${
+ matchingSequenceGroupElement?.offsetLeft || 0
+ }px`
+ groupNumberElement.style.top = `calc(${
+ matchingSequenceGroupElement?.offsetTop || 0
+ }px - 1.25rem)`
+ })
+}
+
+useResizeObserver(sequenceContainerElement, () => {
+ redrawGroupNumbers()
+})
</script>
<template>
@@ -49,6 +80,7 @@ const sequenceToClipboard = () => {
v-model="nucleotideGroupsSize"
:options="[5, 10, 20, 50, 100]"
class="mt-2 w-52"
+ @hide="redrawGroupNumbers"
>
<template #option="{ option }">{{ option }} nucleotides</template>
<template #value="{ value }">{{ value }} nucleotides</template>
@@ -76,12 +108,16 @@ const sequenceToClipboard = () => {
</Button>
</div>
<div
- class="sequence-parent relative overflow-x-auto overflow-y-hidden pb-2 pt-4 font-mono text-2xl leading-[4.25rem]"
+ ref="sequenceContainerElement"
+ class="sequence-parent relative overflow-x-auto pb-2 pt-4 font-mono text-2xl leading-[4.25rem]"
>
<span
v-for="(sequenceGroup, groupIndex) in splittedSequence"
+ ref="sequenceGroupElements"
:key="groupIndex"
- class="relative z-10 mr-4 mt-8 whitespace-nowrap"
+ :data-group-index="groupIndex"
+ class="mr-4 mt-8 whitespace-nowrap"
+ :style="{ width: `${nucleotideGroupsSize * 1.5}rem` }"
>
<span
v-for="(nucleotide, nucleotideIndex) in sequenceGroup"
@@ -105,20 +141,16 @@ const sequenceToClipboard = () => {
{{ nucleotide }}
</span>
</span>
- <div class="absolute -top-3 left-0 z-0">
- <span
- v-for="(sequenceGroup, groupIndex) in splittedSequence"
- :key="groupIndex"
- class="mt-5 inline-block select-none text-lg text-slate-400"
- :style="{
- width: `calc(${nucleotideGroupsSize * 0.375}rem + ${
- nucleotideGroupsSize * 4
- }px + ${(nucleotideGroupsSize * 4) / 3}ch + 1rem)`
- }"
- >
- {{ groupIndex * nucleotideGroupsSize + 1 }}
- </span>
- </div>
+
+ <span
+ v-for="(sequenceGroup, groupIndex) in splittedSequence"
+ :key="groupIndex"
+ ref="groupNumberElements"
+ class="absolute select-none text-sm text-slate-400"
+ :data-group-index="groupIndex"
+ >
+ {{ groupIndex * nucleotideGroupsSize + 1 }}
+ </span>
</div>
</template>
@@ -139,13 +171,6 @@ const sequenceToClipboard = () => {
> span {
display: inline-block;
}
-
- > div {
- top: -1rem;
- span {
- margin-bottom: 0.75rem;
- }
- }
}
}
</style>
--
GitLab
From dd8e51479d12227a230b770cde01dc7de4c8c498 Mon Sep 17 00:00:00 2001
From: Julien Touchais <5978-julien.touchais@users.noreply.forgemia.inra.fr>
Date: Mon, 16 Oct 2023 15:43:47 +0200
Subject: [PATCH 5/5] fix: :mute: remove logs
---
src/components/SequenceBoard.vue | 3 ---
1 file changed, 3 deletions(-)
diff --git a/src/components/SequenceBoard.vue b/src/components/SequenceBoard.vue
index 46c1537..d7060c4 100644
--- a/src/components/SequenceBoard.vue
+++ b/src/components/SequenceBoard.vue
@@ -49,15 +49,12 @@ const redrawGroupNumbers = () => {
groupNumberElements.value.forEach((groupNumberElement) => {
const matchingSequenceGroupElement = sequenceGroupElements.value.find(
(element) => {
- console.log(element)
return (
element.dataset.groupIndex === groupNumberElement.dataset.groupIndex
)
}
)
- console.log(matchingSequenceGroupElement)
-
groupNumberElement.style.left = `${
matchingSequenceGroupElement?.offsetLeft || 0
}px`
--
GitLab