feat: Improvements in Literature highlighting (#427) (#431)

bihealth · Feb 2, 2024 · 2d64ddb · 2d64ddb
1 parent 0c0e1b6
commit 2d64ddb
Showing 1 changed file with 51 additions and 9 deletions.
diff --git a/frontend/src/components/GeneDetails/LiteratureCard.vue b/frontend/src/components/GeneDetails/LiteratureCard.vue
@@ -44,18 +44,18 @@ 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. */
 const TYPE_TO_RAW_COLOR_DARK: { [key: string]: string } = {
   [AnnotationType.Disease]: '#9c6b24',
-  [AnnotationType.Gene]: '#743d7d',
+  [AnnotationType.Gene]: '#7a4a82',
   [AnnotationType.Chemical]: '#5c7d5e',
   [AnnotationType.Species]: '#577c99',
   [AnnotationType.Variant]: '#853a3a',
@@ -68,6 +68,32 @@ 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+$/)) {
@@ -156,7 +182,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>')
@@ -184,6 +215,11 @@ 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>
@@ -252,7 +288,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>