From 0e54468cccd22cf1cd7570a0aa400a0fa1444298 Mon Sep 17 00:00:00 2001 From: malkja Date: Mon, 9 Sep 2024 14:08:36 +0200 Subject: [PATCH 1/5] feat: add a separate line between annotations of different targets --- .../annotations/variants/VariantItem.vue | 5 ++++- .../annotations/variants/VariantsList.vue | 14 +++++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/annotations/variants/VariantItem.vue b/src/components/annotations/variants/VariantItem.vue index d2e24a3f..5a6b9a6e 100644 --- a/src/components/annotations/variants/VariantItem.vue +++ b/src/components/annotations/variants/VariantItem.vue @@ -4,7 +4,8 @@ :class="[ 't-py-2 t-px-2 -t-mx-2 t-mb-1 t-space-x-2 t-rounded-md', { 'hover:t-bg-gray-200 dark:hover:t-bg-gray-600 t-cursor-pointer': !isActive }, - { 't-bg-gray-300 dark:t-bg-gray-600 active': isActive}]" + { 't-bg-gray-300 dark:t-bg-gray-600 active': isActive}, + { 't-border-b t-border-slate-200 t-rounded-none': isLastVariantItemOfAnnot}]" :data-annotation-id="annotation.id" @click="handleClick" > @@ -39,12 +40,14 @@ export interface Props { isActive: boolean, toggle: (annotation: Annotation) => void, witnessColor: string + isLastVariantItemOfAnnot: boolean } const props = withDefaults(defineProps(), { annotation: () => {}, isActive: () => true, toggle: () => null, + isLastVariantItemOfAnnot: () => false, }) const emit = defineEmits(['select', 'unselect', 'show-details']) diff --git a/src/components/annotations/variants/VariantsList.vue b/src/components/annotations/variants/VariantsList.vue index 88ba8c13..4b4bbfb2 100644 --- a/src/components/annotations/variants/VariantsList.vue +++ b/src/components/annotations/variants/VariantsList.vue @@ -4,12 +4,13 @@ class="annotations-list t-overflow-visible" > From baa510976b15dd23ed623885e97adce5ef995b53 Mon Sep 17 00:00:00 2001 From: malkja Date: Mon, 9 Sep 2024 14:23:41 +0200 Subject: [PATCH 2/5] refactor: move some functions to annotations utils.js --- .../annotations/variants/VariantsList.vue | 14 ++------------ src/utils/annotations.js | 11 +++++++++++ 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/components/annotations/variants/VariantsList.vue b/src/components/annotations/variants/VariantsList.vue index 4b4bbfb2..6cc93315 100644 --- a/src/components/annotations/variants/VariantsList.vue +++ b/src/components/annotations/variants/VariantsList.vue @@ -10,7 +10,7 @@ :is-active="isActive(annotation)" :toggle="toggle" :witness-color="getWitnessColor(annotation.body.value.witness)" - :is-last-variant-item-of-annot="isLastVariantItemOfAnnot(i)" + :is-last-variant-item-of-annot="Utils.isLastVariantItemOfAnnot(filteredAnnotations, i)" @select="addAnnotation(annotation.id)" @unselect="removeAnnotation(annotation.id)" @show-details="openDetailsDialog" @@ -30,6 +30,7 @@ import { computed } from 'vue'; import VariantItem from "@/components/annotations/variants/VariantItem.vue"; import {useAnnotationsStore} from "@/stores/annotations"; import MessageBox from "@/components/MessageBox.vue"; +import * as Utils from '@/utils/annotations' const annotationStore = useAnnotationsStore(); @@ -62,15 +63,4 @@ function getWitnessColor(witness: string) { return annotationStore.variantItemsColors[witness]; } -function getTarget(i: number): AnnotationTarget { - if (filteredAnnotations.value[i]) { - return filteredAnnotations.value[i].target - } - } - -function isLastVariantItemOfAnnot(i: number ) { - // check if the variant item of this index is the last variant item of tannotation - return JSON.stringify(getTarget(i)) !== JSON.stringify(getTarget(i+1)) -} - diff --git a/src/utils/annotations.js b/src/utils/annotations.js index 56a7f57d..d7f66a42 100644 --- a/src/utils/annotations.js +++ b/src/utils/annotations.js @@ -356,3 +356,14 @@ export function getAnnotationListElement(id, container) { return annotationItem.getAttribute('data-annotation-id') === id; }); } + +export function getTarget(filteredAnnotations, i) { + if (filteredAnnotations[i]) { + return filteredAnnotations[i].target + } +} + +export function isLastVariantItemOfAnnot(filteredAnnotations, i) { + // check if the variant item of this index is the last variant item of the annotation + return JSON.stringify(Utils.getTarget(filteredAnnotations, i)) !== JSON.stringify(Utils.getTarget(filteredAnnotations, i+1)) +} \ No newline at end of file From 864d03aba9a8a8a8963eb3b389970e9e636ec190 Mon Sep 17 00:00:00 2001 From: malkja Date: Mon, 9 Sep 2024 16:44:26 +0200 Subject: [PATCH 3/5] refactor: reuse function 'generateTargetSelector' --- src/components/annotations/variants/VariantItem.vue | 7 ++++--- src/components/annotations/variants/VariantsList.vue | 2 +- src/utils/annotations.js | 9 +++++---- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/annotations/variants/VariantItem.vue b/src/components/annotations/variants/VariantItem.vue index 5a6b9a6e..fe505bd8 100644 --- a/src/components/annotations/variants/VariantItem.vue +++ b/src/components/annotations/variants/VariantItem.vue @@ -5,7 +5,7 @@ 't-py-2 t-px-2 -t-mx-2 t-mb-1 t-space-x-2 t-rounded-md', { 'hover:t-bg-gray-200 dark:hover:t-bg-gray-600 t-cursor-pointer': !isActive }, { 't-bg-gray-300 dark:t-bg-gray-600 active': isActive}, - { 't-border-b t-border-slate-200 t-rounded-none': isLastVariantItemOfAnnot}]" + { 't-border-b t-border-slate-200 t-rounded-none': showSeparator}]" :data-annotation-id="annotation.id" @click="handleClick" > @@ -31,6 +31,7 @@ diff --git a/src/utils/annotations.js b/src/utils/annotations.js index d2882823..c29ab9de 100644 --- a/src/utils/annotations.js +++ b/src/utils/annotations.js @@ -138,7 +138,6 @@ export function generateTargetSelector(annotation) { // If no selector object is present we try to generate a CSS selector from target id. let result = null; - console.log('annotation', annotation) const selector = annotation.target.length > 0 ? annotation.target[0].selector : undefined; if (!selector) { @@ -357,14 +356,3 @@ export function getAnnotationListElement(id, container) { }); } -export function getTarget(filteredAnnotations, i) { - if (filteredAnnotations[i]) { - return filteredAnnotations[i].target - } -} - -export function showLineSeparator(filteredAnnotations, i) { - if (filteredAnnotations[i+1]) { - return generateTargetSelector(filteredAnnotations[i]) !== generateTargetSelector(filteredAnnotations[i+1]) - } -} \ No newline at end of file