diff --git a/frontend/src/components/GeneDetails/LiteratureCard.vue b/frontend/src/components/GeneDetails/LiteratureCard.vue index 254e5a47..ba5fc2fd 100644 --- 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( - `` + `` ) arr.push(text.slice(annoStart - baseOffset, annoEnd - baseOffset)) arr.push('') @@ -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 } } ) @@ -252,7 +288,13 @@ watch( /> -
+
{{ pubtatorStore.searchResults[pmid]?.abstract?.authors.join(', ') }}