Update based on feedbacks

oncokb · Oct 16, 2024 · 083de82 · 083de82
1 parent 4db33c0
commit 083de82
Show file tree

Hide file tree

Showing 11 changed files with 1,311 additions and 467 deletions.
diff --git a/src/main/webapp/app/components/PageContainer.tsx b/src/main/webapp/app/components/PageContainer.tsx
@@ -24,7 +24,7 @@ const PageContainer: React.FunctionComponent<{
   windowStore: WindowStore;
 }> = props => {
   const genePagePath = parseGenePagePath(props.routing.location.pathname);
-  const inGenePage = genePagePath.hugoSymbol !== undefined;
+  const inGenePage = genePagePath.geneticType !== undefined;
   return (
     <div className={'view-wrapper'}>
       <div

diff --git a/src/main/webapp/app/components/infoTile/InfoTile.tsx b/src/main/webapp/app/components/infoTile/InfoTile.tsx
@@ -11,6 +11,7 @@ export type Category = {
 export type InfoTile = {
   title: string;
   categories: Category[];
+  className?: string;
 };
 
 const Category: React.FunctionComponent<Category> = props => {
@@ -22,27 +23,29 @@ const Category: React.FunctionComponent<Category> = props => {
     style.fontFamily = 'Gotham Bold';
   }
   return (
-    <div className={props.className}>
+    <div className={classnames(props.className, 'flex-grow-1')}>
       <div style={{ color: COLOR_GREY }} className={'mb-1'}>
         {props.title}
       </div>
       <div className={classnames('d-flex align-items-center')} style={style}>
-        {isNa ? 'NA' : props.content}
+        {props.content}
       </div>
     </div>
   );
 };
 
 const InfoTile: React.FunctionComponent<InfoTile> = props => {
-  return (
-    <div className={classnames(styles.tile, 'mr-2')}>
+  return props.categories.length > 0 ? (
+    <div className={classnames(styles.tile, 'mr-2', props.className)}>
       <div className={'h6 font-bold mb-2'}>{props.title}</div>
       <div className={'d-flex'}>
         {props.categories.map(category => (
           <Category {...category} className={styles.category} />
         ))}
       </div>
     </div>
+  ) : (
+    <></>
   );
 };
 

diff --git a/src/main/webapp/app/components/infoTile/LoETile.tsx b/src/main/webapp/app/components/infoTile/LoETile.tsx
@@ -12,75 +12,88 @@ type LoETile = {
   highestDiagnosticImplicationLevel?: string | undefined;
   highestPrognosticImplicationLevel?: string | undefined;
   highestFdaLevel?: string | undefined;
+  className?: string;
 };
 
 const LoETile: React.FunctionComponent<LoETile> = props => {
   const categories: Category[] = [];
-  categories.push({
-    title: 'Therapeutic',
-    content: (props.highestSensitiveLevel || props.highestResistanceLevel) && (
-      <div>
-        {props.highestSensitiveLevel && (
+  if (props.highestSensitiveLevel || props.highestResistanceLevel) {
+    categories.push({
+      title: 'Therapeutic',
+      content: (
+        <div className={'d-flex'}>
+          {props.highestSensitiveLevel && (
+            <OncoKBLevelIcon
+              size={'s2'}
+              level={levelOfEvidence2Level(props.highestSensitiveLevel, false)}
+              withDescription
+            />
+          )}
+          {props.highestResistanceLevel && (
+            <OncoKBLevelIcon
+              size={'s2'}
+              level={levelOfEvidence2Level(props.highestResistanceLevel, false)}
+              withDescription
+            />
+          )}
+        </div>
+      ),
+    });
+  }
+  if (props.highestDiagnosticImplicationLevel) {
+    categories.push({
+      title: 'Diagnostic',
+      content: (
+        <div>
           <OncoKBLevelIcon
             size={'s2'}
-            level={levelOfEvidence2Level(props.highestSensitiveLevel, false)}
+            level={levelOfEvidence2Level(
+              props.highestDiagnosticImplicationLevel,
+              false
+            )}
             withDescription
           />
-        )}
-        {props.highestResistanceLevel && (
+        </div>
+      ),
+    });
+  }
+  if (props.highestPrognosticImplicationLevel) {
+    categories.push({
+      title: 'Prognostic',
+      content: (
+        <div>
           <OncoKBLevelIcon
             size={'s2'}
-            level={levelOfEvidence2Level(props.highestResistanceLevel, false)}
+            level={levelOfEvidence2Level(
+              props.highestPrognosticImplicationLevel,
+              false
+            )}
             withDescription
           />
-        )}
-      </div>
-    ),
-  });
-  categories.push({
-    title: 'Diagnostic',
-    content: props.highestDiagnosticImplicationLevel && (
-      <div>
-        <OncoKBLevelIcon
-          size={'s2'}
-          level={levelOfEvidence2Level(
-            props.highestDiagnosticImplicationLevel,
-            false
-          )}
-          withDescription
-        />
-      </div>
-    ),
-  });
-  categories.push({
-    title: 'Prognostic',
-    content: props.highestPrognosticImplicationLevel && (
-      <div>
-        <OncoKBLevelIcon
-          size={'s2'}
-          level={levelOfEvidence2Level(
-            props.highestPrognosticImplicationLevel,
-            false
-          )}
-          withDescription
-        />
-      </div>
-    ),
-  });
-  categories.push({
-    title: 'FDA',
-    content: props.highestFdaLevel && (
-      <div>
-        <FdaLevelIcon
-          size={'s2'}
-          level={levelOfEvidence2Level(props.highestFdaLevel, false)}
-        />
-      </div>
-    ),
-  });
+        </div>
+      ),
+    });
+  }
+  if (props.highestFdaLevel) {
+    categories.push({
+      title: 'FDA',
+      content: (
+        <div>
+          <FdaLevelIcon
+            size={'s2'}
+            level={levelOfEvidence2Level(props.highestFdaLevel, false)}
+          />
+        </div>
+      ),
+    });
+  }
 
   return (
-    <InfoTile title={'Highest level of evidence'} categories={categories} />
+    <InfoTile
+      title={'Highest level of evidence'}
+      categories={categories}
+      className={props.className}
+    />
   );
 };
 

diff --git a/src/main/webapp/app/config/constants.tsx b/src/main/webapp/app/config/constants.tsx
@@ -180,6 +180,7 @@ export enum LEVEL_TYPES {
 }
 
 export enum ANNOTATION_PAGE_TAB_KEYS {
+  BIOLOGICAL = 'Biological',
   TX = 'Tx',
   DX = 'Dx',
   PX = 'Px',
@@ -207,6 +208,7 @@ export const ACTIONABLE_GENES_LEVEL_TITLE: { [key in LEVEL_TYPES]: string } = {
 export const ANNOTATION_PAGE_TAB_NAMES: {
   [key in ANNOTATION_PAGE_TAB_KEYS]: string;
 } = {
+  [ANNOTATION_PAGE_TAB_KEYS.BIOLOGICAL]: 'Annotated Alterations',
   [ANNOTATION_PAGE_TAB_KEYS.TX]: 'Therapeutic',
   [ANNOTATION_PAGE_TAB_KEYS.DX]: 'Diagnostic',
   [ANNOTATION_PAGE_TAB_KEYS.PX]: 'Prognostic',

diff --git a/src/main/webapp/app/pages/annotationPage/AlterationTableTabs.tsx b/src/main/webapp/app/pages/annotationPage/AlterationTableTabs.tsx
@@ -52,6 +52,7 @@ export interface IEvidenceTableTabProps {
   hugoSymbol: string;
   alteration?: IAlteration;
   cancerType?: string;
+  biological: BiologicalVariant[];
   tx: TherapeuticImplication[];
   dx: TherapeuticImplication[];
   px: TherapeuticImplication[];
@@ -74,7 +75,7 @@ export default class AlterationTableTabs extends React.Component<
 > {
   @observable selectedTab: ANNOTATION_PAGE_TAB_KEYS;
   @observable defaultSelectedTab: ANNOTATION_PAGE_TAB_KEYS =
-    ANNOTATION_PAGE_TAB_KEYS.TX;
+    ANNOTATION_PAGE_TAB_KEYS.BIOLOGICAL;
 
   constructor(props: any) {
     super(props);
@@ -85,7 +86,26 @@ export default class AlterationTableTabs extends React.Component<
   }
 
   getTabDescription(key: ANNOTATION_PAGE_TAB_KEYS) {
-    if (key === ANNOTATION_PAGE_TAB_KEYS.TX) {
+    if (key === ANNOTATION_PAGE_TAB_KEYS.BIOLOGICAL) {
+      let content: JSX.Element;
+      if (this.props.alteration) {
+        content = (
+          <span>
+            A list of the oncogenic and mutation effects of {ONCOKB_TM} curated
+            alterations that related to {this.props.hugoSymbol}{' '}
+            {this.props.alteration.name}.
+          </span>
+        );
+      } else {
+        content = (
+          <span>
+            A list of the oncogenic and mutation effects of{' '}
+            <b>all {ONCOKB_TM} curated</b> {this.props.hugoSymbol} alterations.
+          </span>
+        );
+      }
+      return content;
+    } else if (key === ANNOTATION_PAGE_TAB_KEYS.TX) {
       return (
         <span>
           A list of the cancer type-specific {this.props.hugoSymbol} alterations
@@ -167,6 +187,14 @@ export default class AlterationTableTabs extends React.Component<
   @computed
   get tabs() {
     const tabs: { title: string; key: ANNOTATION_PAGE_TAB_KEYS }[] = [];
+    if (this.props.biological.length > 0) {
+      tabs.push({
+        key: ANNOTATION_PAGE_TAB_KEYS.BIOLOGICAL,
+        title: `${
+          ANNOTATION_PAGE_TAB_NAMES[ANNOTATION_PAGE_TAB_KEYS.BIOLOGICAL]
+        }`,
+      });
+    }
     if (this.props.tx.length > 0) {
       tabs.push({
         key: ANNOTATION_PAGE_TAB_KEYS.TX,
@@ -321,6 +349,69 @@ export default class AlterationTableTabs extends React.Component<
     return therapeuticTableColumns;
   }
 
+  @computed
+  get biologicalTableColumns(): SearchColumn<BiologicalVariant>[] {
+    return [
+      {
+        ...getDefaultColumnDefinition(TABLE_COLUMN_KEY.ALTERATION),
+        accessor: 'variant',
+        onFilter: (data: BiologicalVariant, keyword) =>
+          filterByKeyword(data.variant.name, keyword),
+        Cell: (props: { original: BiologicalVariant }) => {
+          return (
+            <>
+              <AlterationPageLink
+                hugoSymbol={this.props.hugoSymbol}
+                alteration={{
+                  alteration: props.original.variant.alteration,
+                  name: props.original.variant.name,
+                }}
+                alterationRefGenomes={
+                  props.original.variant.referenceGenomes as REFERENCE_GENOME[]
+                }
+              />
+            </>
+          );
+        },
+      },
+      {
+        ...getDefaultColumnDefinition(TABLE_COLUMN_KEY.ONCOGENICITY),
+        onFilter: (data: BiologicalVariant, keyword) =>
+          filterByKeyword(data.oncogenic, keyword),
+      },
+      {
+        ...getDefaultColumnDefinition(TABLE_COLUMN_KEY.MUTATION_EFFECT),
+        onFilter: (data: BiologicalVariant, keyword) =>
+          filterByKeyword(data.mutationEffect, keyword),
+      },
+      {
+        ...getDefaultColumnDefinition(TABLE_COLUMN_KEY.DESCRIPTION),
+        accessor(d) {
+          return {
+            abstracts: d.mutationEffectAbstracts,
+            pmids: d.mutationEffectPmids,
+          } as Citations;
+        },
+        Cell(props: { original: BiologicalVariant }) {
+          return (
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+              {props.original.mutationEffectDescription ? (
+                <DescriptionTooltip
+                  description={
+                    <SummaryWithRefs
+                      content={props.original.mutationEffectDescription}
+                      type="tooltip"
+                    />
+                  }
+                />
+              ) : undefined}
+            </div>
+          );
+        },
+      },
+    ];
+  }
+
   @computed
   get dxpxTableColumns(): SearchColumn<TherapeuticImplication>[] {
     return [
@@ -405,6 +496,14 @@ export default class AlterationTableTabs extends React.Component<
   @action
   getTable(key: ANNOTATION_PAGE_TAB_KEYS) {
     switch (key) {
+      case ANNOTATION_PAGE_TAB_KEYS.BIOLOGICAL:
+        return (
+          <GenePageTable
+            data={this.props.biological}
+            columns={this.biologicalTableColumns}
+            isPending={false}
+          />
+        );
       case ANNOTATION_PAGE_TAB_KEYS.TX:
         return (
           <GenePageTable

diff --git a/src/main/webapp/app/pages/genePage/GeneAdditionalInfoTable.tsx b/src/main/webapp/app/pages/genePage/GeneAdditionalInfoTable.tsx
@@ -148,6 +148,16 @@ const GeneAdditionalInfoTable: React.FunctionComponent<{
   grch38ensemblGene?: EnsemblGene;
 }> = props => {
   const content = [];
+  if (props.gene.entrezGeneId > 0) {
+    content.push([
+      'NCBI Gene',
+      <Linkout
+        link={`https://www.ncbi.nlm.nih.gov/gene/${props.gene.entrezGeneId}`}
+      >
+        {props.gene.entrezGeneId}
+      </Linkout>,
+    ]);
+  }
   if (props.grch37ensemblGene || props.grch38ensemblGene) {
     content.push([
       'Ensembl Gene',