show separate line between annotations referring to different targets

* feat: add a separate line between annotations of different targets * refactor: move some functions to annotations utils.js * refactor: reuse function 'generateTargetSelector' * refactor: remove an unnecessary line * refactor: move showLineSeparator function to VariantsList component --------- Co-authored-by: malkja <[email protected]>
subugoe · Sep 9, 2024 · f6354c7 · f6354c7
1 parent c9c8677
commit f6354c7
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git 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': showSeparator}]"
     :data-annotation-id="annotation.id"
     @click="handleClick"
   >
@@ -39,12 +40,14 @@ export interface Props {
   isActive: boolean,
   toggle: (annotation: Annotation) => void,
   witnessColor: string
+  showSeparator: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   annotation: () => <Annotation>{},
   isActive: () => true,
   toggle: () => null,
+  showSeparator: () => false,
 })
 
 const emit = defineEmits(['select', 'unselect', 'show-details'])

diff --git a/src/components/annotations/variants/VariantsList.vue b/src/components/annotations/variants/VariantsList.vue
@@ -4,12 +4,13 @@
     class="annotations-list t-overflow-visible"
   >
     <VariantItem
-      v-for="annotation in filteredAnnotations"
+      v-for="(annotation, i) in filteredAnnotations"
       :key="annotation.id"
       :annotation="annotation"
       :is-active="isActive(annotation)"
       :toggle="toggle"
       :witness-color="getWitnessColor(annotation.body.value.witness)"
+      :show-separator="showLineSeparator(filteredAnnotations, i)"
       @select="addAnnotation(annotation.id)"
       @unselect="removeAnnotation(annotation.id)"
       @show-details="openDetailsDialog"
@@ -29,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();
 
@@ -61,4 +63,11 @@ function getWitnessColor(witness: string) {
   return annotationStore.variantItemsColors[witness];
 }
 
+
+function showLineSeparator(filteredAnnotations, i) {
+  if (filteredAnnotations[i+1]) {
+   return Utils.generateTargetSelector(filteredAnnotations[i]) !== Utils.generateTargetSelector(filteredAnnotations[i+1])
+  }
+}
+
 </script>
diff --git 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;
-
   const selector = annotation.target.length > 0 ? annotation.target[0].selector : undefined;
 
   if (!selector) {
@@ -356,3 +355,4 @@ export function getAnnotationListElement(id, container) {
     return annotationItem.getAttribute('data-annotation-id') === id;
   });
 }
+