fix: update witness design

src/components/annotations/variants/ActiveVariantsDetails.vue

@@ -1,6 +1,7 @@
-<script setup>
+<script setup lang="ts">
   import { useAnnotationsStore } from "@/stores/annotations";
   import {computed} from "vue";
+  import colors from "tailwindcss/colors";
 
   const annotationStore = useAnnotationsStore();
 
@@ -10,25 +11,37 @@
       .filter(id => activeAnnotations[id].body['x-content-type'] === 'Variant')
       .map(id => activeAnnotations[id])
   });
+
+  function getWitnessColor(witness: string) {
+    return annotationStore.variantItemsColors[witness];
+  }
 </script>
 
 <template>
-  <div class="t-flex t-space-x-2 t-min-h-[200px]">
+  <div class="t-flex t-space-x-2 t-min-h-[200px] t-overflow-x-auto">
     <div
       v-if="activeVariants.length > 0"
-      class="t-border t-rounded-md t-flex-1 t-p-2"
+      class="t-border t-rounded-md t-min-w-[16rem] t-p-4"
     >
-      <h3 class="t-font-semibold mb-2">
+      <h3 class="t-font-semibold t-mb-2">
         {{ $t('original') }}
       </h3>
-      <p>{{ activeVariants[0].target.source }}</p>
+      <p>{{ activeVariants[0].target[0].source }}</p>
     </div>
     <div
       v-for="(variant, i) in activeVariants"
       :key="i"
-      class="t-border t-rounded-md t-flex-1 t-p-2"
+      class="t-border t-rounded-md t-min-w-[16rem] t-p-4"
     >
-      <h3 class="t-font-semibold mb-2">{{ variant.body.value.witness }}</h3>
+      <h3 class="t-font-semibold t-mb-2 t-flex t-whitespace-nowrap">
+        <span
+          class="t-rounded-full t-h-3 t-w-3 t-mt-2 t-mr-2 t-flex-shrink-0"
+          :style="{
+          'background': colors[getWitnessColor(variant.body.value.witness)]['500'],
+        }"
+        ></span>
+        {{ variant.body.value.witness }}
+      </h3>
       <p>{{ variant.body.value.entry }}</p>
     </div>
   </div>

src/components/annotations/variants/VariantItem.vue

@@ -2,16 +2,19 @@
   <div
     class="t-items-center t-flex t-mb-1 t-relative"
     :class="[
-      't-py-1 t-px-2 t-mb-1 t-space-x-2 t-rounded-md',
+      't-py-2 t-px-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}]"
     :data-annotation-id="annotation.id"
     @click="handleClick"
   >
     <div class="t-w-4/12 t-flex">
       <div
-        class="t-relative t-rounded-3xl t-box-border t-border-2 t-px-2 t-py-1 t-text-xs t-flex-grow-0"
-        :style="{'border-color': getWitnessColor(witness)}"
+        class="t-relative t-rounded-3xl t-box-border t-px-2 t-py-1 t-text-xs t-flex-grow-0 t-flex t-items-center t-font-semibold"
+        :style="{
+          'background': colors[witnessColor]['100'],
+          'color': colors[witnessColor]['600']
+        }"
       >
         {{ witness ?? '-' }}
       </div>
@@ -31,19 +34,18 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useAnnotationsStore } from '@/stores/annotations';
 import BaseButton from "@/components/base/BaseButton.vue";
+import colors from "tailwindcss/colors";
 
 
 const entry = computed(() => props.annotation.body.value.entry)
 const witness = computed(() => props.annotation.body.value.witness)
 
-const annotationStore = useAnnotationsStore();
-
 export interface Props {
   annotation: Annotation,
   isActive: boolean,
   toggle: (annotation: Annotation) => void,
+  witnessColor: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -67,7 +69,5 @@ function handleDetailsClick(event: Event) {
   emit('show-details')
 }
 
-function getWitnessColor(witness: string) {
-  return annotationStore.variantItemsColors[witness];
-}
+
 </script>

src/components/annotations/variants/VariantsList.vue

@@ -8,6 +8,7 @@
         :annotation="annotation"
         :is-active="isActive(annotation)"
         :toggle="toggle"
+        :witness-color="getWitnessColor(annotation.body.value.witness)"
         @select="addAnnotation(annotation.id)"
         @unselect="removeAnnotation(annotation.id)"
         @show-details="openDetailsDialog"
@@ -24,7 +25,7 @@
 
 
 <script setup lang="ts">
-import {computed, onMounted, ref} from 'vue';
+import {computed, ref} from 'vue';
 import VariantItem from "@/components/annotations/variants/VariantItem.vue";
 import {useAnnotationsStore} from "@/stores/annotations";
 import BaseDialog from "@/components/base/BaseDialog.vue";
@@ -46,9 +47,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const activeAnnotations = computed<ActiveAnnotation>(() => annotationStore.activeAnnotations);
 
-onMounted(() => {
-  allocateWitnessColorInVariantItem()
-})
+allocateWitnessColorInVariantItem()
+
 
 function allocateWitnessColorInVariantItem() {
   const colors = props.annotations.reduce((acc, cur: Annotation, i) => {
@@ -85,4 +85,8 @@ function openDetailsDialog() {
   variantsDetailsDialogOpen.value = true;
 }
 
+function getWitnessColor(witness: string) {
+  return annotationStore.variantItemsColors[witness];
+}
+
 </script>

src/components/base/BaseDialog.vue

@@ -24,7 +24,7 @@ const emit = defineEmits<{(event: 'update:modelValue', payload: boolean): void;
     :append-to="configStore.config.container + ' .tido > *'"
     :pt="{
       root: {
-        class: 't-relative t-bg-white dark:t-bg-gray-800 t-p-4 t-rounded-lg lg:t-min-w-[33%] t-max-h-[80%] t-shadow-lg dark:t-border dark:t-border-gray-700'
+        class: 't-relative t-bg-white dark:t-bg-gray-800 t-p-4 t-rounded-lg t-max-w-[90%] lg:t-min-w-[33%] t-max-h-[80%] t-shadow-lg dark:t-border dark:t-border-gray-700'
       },
       header: {
         class: 't-flex t-mb-4'

src/utils/annotations.js

@@ -1,6 +1,7 @@
 import * as Utils from '@/utils/index';
 import { getIcon } from '@/utils/icons';
 import { i18n } from '@/i18n';
+import colors from "tailwindcss/colors";
 
 
 // utility functions that we can use as generic way for perform tranformation on annotations.
@@ -262,12 +263,14 @@ export function addWitness(targetHtmlEl, witness, color) {
   }
 }
 
-function createCurrWitHtml(witness, borderColor) {
+function createCurrWitHtml(witness, witnessColor) {
   // create an html element of the selected witness
   const witHtml = document.createElement("span");
   witHtml.innerHTML = witness
-  witHtml.classList.add('t-rounded-3xl', 't-box-border', 't-w-75', 't-h-8', 't-border-2', 't-p-[2px]', 't-text-sm', 't-ml-[3px]')
-  witHtml.style.borderColor = borderColor
+  witHtml.classList.add('t-rounded-3xl', 't-box-border', 't-h-8', 't-py-0.5', 't-px-1.5', 't-text-xs', 't-font-semibold', 't-ml-[3px]')
+  witHtml.style.background = colors[witnessColor]['100']
+  witHtml.style.color = colors[witnessColor]['600']
+
 
   return witHtml
 }

src/utils/color.js

@@ -10,11 +10,9 @@ export const getRGBColor = (hex, type) => {
 
 
 export default function colors() {
-
-  const hexaDecimalColors = ['#FEF08A', '#BEF264', '#A8A29E', '#D8B4FE', '#A8A29E']
-  return hexaDecimalColors;
+  return ['rose', 'amber', 'violet' , 'lime', 'blue', 'teal',];
 }
 
 export function getItemColorBasedOnIndex(index){
   return colors()[index]
-}
+}