feat: further improvements to literature highlighting (#93)

bihealth · Feb 6, 2024 · 538bfc0 · 538bfc0
1 parent ebde8e3
commit 538bfc0
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 9 deletions.
diff --git a/src/components/GeneConditionsCard/GeneConditionsCard.vue b/src/components/GeneConditionsCard/GeneConditionsCard.vue
@@ -297,7 +297,7 @@ const conditionsCols = computed<number>(() => {
                 >
                   <template #header>
                     <v-toolbar class="px-2 rounded-t-lg border" color="background">
-                      <div class="text-subtitle-1" :class="{ 'mt-3': geneInfo?.acmgSf }">
+                      <div class="text-subtitle-1" :class="{ 'mt-3': geneInfo?.hgnc }">
                         Associated Diseases
                         <small>
                           <template

diff --git a/src/components/GeneLiteratureCard/GeneLiteratureCard.vue b/src/components/GeneLiteratureCard/GeneLiteratureCard.vue
@@ -51,12 +51,12 @@ const TYPE_TO_CHIP_COLOR: { [key: string]: string } = {
 
 /** Mapping from annotation type to raw CSS color in light mode. */
 const TYPE_TO_RAW_COLOR_LIGHT: { [key: string]: string } = {
-  [AnnotationType.Disease]: '#FFF2E0',
-  [AnnotationType.Gene]: '#C9B7CB',
-  [AnnotationType.Chemical]: '#E9F5EA',
-  [AnnotationType.Species]: '#E4F2FE',
-  [AnnotationType.Variant]: '#FEE8E7',
-  [AnnotationType.CellLine]: '#E0FDFD'
+  [AnnotationType.Disease]: '#ffe0b2',
+  [AnnotationType.Gene]: '#e1bee7',
+  [AnnotationType.Chemical]: '#c8e6c9',
+  [AnnotationType.Species]: '#dcf1fc',
+  [AnnotationType.Variant]: '#d7ccc8',
+  [AnnotationType.CellLine]: '#b2ebf2'
 }
 
 /** Mapping from annotation type to raw CSS color in dark mode. */
@@ -75,6 +75,31 @@ let TYPE_TO_RAW_COLOR =
     ? { ...TYPE_TO_RAW_COLOR_DARK }
     : { ...TYPE_TO_RAW_COLOR_LIGHT }
 
+/** Mapping from annotation type to CSS font color in light mode. */
+const TYPE_TO_FONT_COLOR_LIGHT: { [key: string]: string } = {
+  [AnnotationType.Disease]: '#ff9800',
+  [AnnotationType.Gene]: '#673ab7',
+  [AnnotationType.Chemical]: '#4caf50',
+  [AnnotationType.Species]: '#2196f3',
+  [AnnotationType.Variant]: '#5d4037',
+  [AnnotationType.CellLine]: '#50b4b4'
+}
+/** Mapping from annotation type to CSS font color in dark mode. */
+const TYPE_TO_FONT_COLOR_DARK: { [key: string]: string } = {
+  [AnnotationType.Disease]: '#e8d4b7',
+  [AnnotationType.Gene]: '#edcef2',
+  [AnnotationType.Chemical]: '#caedcc',
+  [AnnotationType.Species]: '#bedef7',
+  [AnnotationType.Variant]: '#fcd7d7',
+  [AnnotationType.CellLine]: '#c1f1f7'
+}
+
+/** Mapping from annotation type to CSS font color. */
+let TYPE_TO_FONT_COLOR =
+  theme.global.current.value.dark === true
+    ? { ...TYPE_TO_FONT_COLOR_DARK }
+    : { ...TYPE_TO_FONT_COLOR_LIGHT }
+
 /** Helper that returns `Annotation.text` if name is just a number or empty. */
 const annotationName = (annotation: Annotation) => {
   if (!annotation?.name?.length || annotation.name.match(/^\d+$/)) {
@@ -166,7 +191,12 @@ const highlight = (text: string, annotations: Annotation[], baseOffset: number):
     const annoStart = locationAnnotation.location.offset
     const annoEnd = locationAnnotation.location.offset + locationAnnotation.location.length
     arr.push(
-      `<span style="background-color: ${TYPE_TO_RAW_COLOR[locationAnnotation.annotation.type]};">`
+      `<span style="
+        background-color: ${TYPE_TO_RAW_COLOR[locationAnnotation.annotation.type]};
+        color: ${TYPE_TO_FONT_COLOR[locationAnnotation.annotation.type]};
+        border-radius: 5px;
+        padding-left: 5px;
+        padding-right: 5px;">`
     )
     arr.push(text.slice(annoStart - baseOffset, annoEnd - baseOffset))
     arr.push('</span>')
@@ -194,6 +224,10 @@ watch(
       theme.global.current.value.dark === true
         ? { ...TYPE_TO_RAW_COLOR_DARK }
         : { ...TYPE_TO_RAW_COLOR_LIGHT }
+    TYPE_TO_FONT_COLOR =
+      theme.global.current.value.dark === true
+        ? { ...TYPE_TO_FONT_COLOR_DARK }
+        : { ...TYPE_TO_FONT_COLOR_LIGHT }
   }
 )
 </script>
@@ -262,7 +296,13 @@ watch(
                   />
                   <!-- eslint-enable -->
                 </div>
-                <div class="text-body-2 text-grey-darken-1">
+                <div
+                  class="text-body-2"
+                  :class="{
+                    'text-grey-lighten-1': theme.global.current.value.dark,
+                    'text-grey-darken-1': !theme.global.current.value.dark
+                  }"
+                >
                   {{ pubtatorStore.searchResults[pmid]?.abstract?.authors.join(', ') }}
                 </div>
               </div>