From 9e1a0c7eccae999f53e213c19d80c14417170c12 Mon Sep 17 00:00:00 2001
From: Hongxin <5400599+zhx828@users.noreply.github.com>
Date: Fri, 18 Oct 2024 14:22:00 -0400
Subject: [PATCH] Minor changes

---
 .../app/components/searchOption/SearchOption.tsx   | 13 +++++++++++++
 src/main/webapp/app/config/theme.ts                |  5 +++++
 .../app/pages/genePage/GenomicIndicatorTable.tsx   |  8 ++++++++
 .../app/pages/genePage/SomaticGermlineGenePage.tsx | 14 +++++++-------
 .../webapp/app/shared/nav/StickyMiniNavBar.tsx     |  2 +-
 5 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/main/webapp/app/components/searchOption/SearchOption.tsx b/src/main/webapp/app/components/searchOption/SearchOption.tsx
index 441845567..75a5ab3f3 100644
--- a/src/main/webapp/app/components/searchOption/SearchOption.tsx
+++ b/src/main/webapp/app/components/searchOption/SearchOption.tsx
@@ -18,6 +18,7 @@ import {
   sortByLevelWithLevels,
 } from 'app/shared/utils/ReactTableUtils';
 import WithSeparator from 'react-with-separator';
+import { COLOR_GERMLINE, COLOR_SOMATIC } from 'app/config/theme';
 
 export enum SearchOptionType {
   GENE = 'GENE',
@@ -50,6 +51,18 @@ const GeneSearchOption: React.FunctionComponent<{
   return (
     <>
       <div className={'d-flex'}>
+        {props.data.annotation && (
+          <b
+            style={{
+              color:
+                props.data.annotation.toLowerCase() === 'germline'
+                  ? COLOR_GERMLINE
+                  : COLOR_SOMATIC,
+            }}
+          >
+            {props.data.annotation}:{' '}
+          </b>
+        )}
         <Highlighter
           searchWords={[props.search]}
           textToHighlight={`${props.data.gene.hugoSymbol} (Entrez Gene: ${props.data.gene.entrezGeneId})`}
diff --git a/src/main/webapp/app/config/theme.ts b/src/main/webapp/app/config/theme.ts
index 5e3113a46..511495a0f 100644
--- a/src/main/webapp/app/config/theme.ts
+++ b/src/main/webapp/app/config/theme.ts
@@ -10,3 +10,8 @@ export const COLOR_ERROR = '#dc3545';
 
 export const COLOR_ICON_WITH_INFO = COLOR_BLACK;
 export const COLOR_ICON_WITHOUT_INFO = COLOR_LIGHT_GREY;
+
+export const COLOR_SOMATIC = COLOR_BLUE;
+export const COLOR_SOMATIC_SHADE = "#F0F5FF"
+export const COLOR_GERMLINE = "#D2A106"
+export const COLOR_GERMLINE_SHADE = "#FCF4D6"
diff --git a/src/main/webapp/app/pages/genePage/GenomicIndicatorTable.tsx b/src/main/webapp/app/pages/genePage/GenomicIndicatorTable.tsx
index 5f376b57f..7f84964fb 100644
--- a/src/main/webapp/app/pages/genePage/GenomicIndicatorTable.tsx
+++ b/src/main/webapp/app/pages/genePage/GenomicIndicatorTable.tsx
@@ -8,6 +8,7 @@ import {
 import React from 'react';
 import { Evidence } from 'app/shared/api/generated/OncoKbAPI';
 import { getAlterationName } from 'app/shared/utils/Utils';
+import { LongText } from 'app/oncokb-frontend-commons/src/components/LongText';
 
 export const GenomicIndicatorTable: React.FunctionComponent<{
   data: Evidence[];
@@ -17,13 +18,20 @@ export const GenomicIndicatorTable: React.FunctionComponent<{
     {
       Header: <span>Name</span>,
       accessor: 'knownEffect',
+      width: 400,
     },
     {
       Header: <span>Description</span>,
       accessor: 'description',
+      Cell(row: { original: Evidence }) {
+        return (
+          <LongText text={row.original.description} cutoff={180}/>
+        );
+      },
     },
     {
       Header: <span>Associated Variants</span>,
+      width: 200,
       Cell(row: { original: Evidence }) {
         return (
           <span>
diff --git a/src/main/webapp/app/pages/genePage/SomaticGermlineGenePage.tsx b/src/main/webapp/app/pages/genePage/SomaticGermlineGenePage.tsx
index a030f5d74..d693a3cf3 100644
--- a/src/main/webapp/app/pages/genePage/SomaticGermlineGenePage.tsx
+++ b/src/main/webapp/app/pages/genePage/SomaticGermlineGenePage.tsx
@@ -70,7 +70,7 @@ import { findLast } from 'app/shared/utils/LodashUtils';
 import { Helmet } from 'react-helmet-async';
 import { NcbiLink } from 'app/shared/links/NcbiLink';
 import GeneAliasesDescription from 'app/shared/texts/GeneAliasesDescription';
-import { COLOR_GREY } from 'app/config/theme';
+import { COLOR_GERMLINE, COLOR_GERMLINE_SHADE, COLOR_GREY, COLOR_SOMATIC, COLOR_SOMATIC_SHADE } from 'app/config/theme';
 import LoETile from 'app/components/infoTile/LoETile';
 import GeneticTypeTabs, {
   GENETIC_TYPE,
@@ -101,7 +101,7 @@ const NoContent: FunctionComponent<{
   geneticType: GENETIC_TYPE;
 }> = props => {
   return (
-    <div>
+    <div className={'my-5'}>
       <h4>
         There are no {props.geneticType} mutations annotated in this gene.
       </h4>
@@ -660,20 +660,20 @@ export default class SomaticGermlineGenePage extends React.Component<
                         hugoSymbol={this.store.hugoSymbol}
                         geneticType={this.selectedGeneticType}
                       />
-                      {this.hasContent ? (
+                      {this.hasContent && (
                         <StickyMiniNavBar
                           title={`${this.store.hugoSymbol} (${
                             this.isGermline ? 'Germline' : 'Somatic'
                           })`}
                           linkUnderlineColor={
-                            this.isGermline ? '#D2A106' : '#0968C3'
+                            this.isGermline ? COLOR_GERMLINE : COLOR_SOMATIC
                           }
                           stickyBackgroundColor={
-                            this.isGermline ? '#FCF4D6' : '#F0F5FF'
+                            this.isGermline
+                              ? COLOR_GERMLINE_SHADE
+                              : COLOR_SOMATIC_SHADE
                           }
                         />
-                      ) : (
-                        <div style={{ marginTop: '1rem' }}></div>
                       )}
                       <Container>
                         <Row className={`justify-content-center`}>
diff --git a/src/main/webapp/app/shared/nav/StickyMiniNavBar.tsx b/src/main/webapp/app/shared/nav/StickyMiniNavBar.tsx
index 0f37b3537..bf6e31d74 100644
--- a/src/main/webapp/app/shared/nav/StickyMiniNavBar.tsx
+++ b/src/main/webapp/app/shared/nav/StickyMiniNavBar.tsx
@@ -229,7 +229,7 @@ export default function StickyMiniNavBar({
                       borderBottomStyle: 'solid',
                       borderBottomWidth: '4px',
                       fontFamily: isInSection ? 'Gotham Bold' : 'Gotham Book',
-                      padding: '7px 0px',
+                      padding: '7px 0px 3px 0',
                     }}
                   >
                     {label}