Add genomic indicators && Minor updates

oncokb · Oct 17, 2024 · 360f35e · 360f35e
1 parent 57fab39
commit 360f35e
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 57 deletions.
diff --git a/src/main/webapp/app/components/levelButton/LevelButton.tsx b/src/main/webapp/app/components/levelButton/LevelButton.tsx
@@ -63,7 +63,7 @@ export const LevelButton = inject('routing')((props: LevelButtonProps) => {
         >
           <div
             className={classnames(
-              `oncokb level-${props.level} d-flex justify-content-center align-items-center`,
+              `oncokb level-${props.level} d-flex justify-content-center align-items-center text-nowrap`,
               styles.levelName
             )}
           >

diff --git a/src/main/webapp/app/config/constants.tsx b/src/main/webapp/app/config/constants.tsx
@@ -365,6 +365,7 @@ export enum EVIDENCE_TYPES {
   STANDARD_THERAPEUTIC_IMPLICATIONS_FOR_DRUG_RESISTANCE = 'STANDARD_THERAPEUTIC_IMPLICATIONS_FOR_DRUG_RESISTANCE',
   INVESTIGATIONAL_THERAPEUTIC_IMPLICATIONS_DRUG_SENSITIVITY = 'INVESTIGATIONAL_THERAPEUTIC_IMPLICATIONS_DRUG_SENSITIVITY',
   INVESTIGATIONAL_THERAPEUTIC_IMPLICATIONS_DRUG_RESISTANCE = 'INVESTIGATIONAL_THERAPEUTIC_IMPLICATIONS_DRUG_RESISTANCE',
+  GENOMIC_INDICATOR = 'GENOMIC_INDICATOR',
 }
 
 export const TREATMENT_EVIDENCE_TYPES: EVIDENCE_TYPES[] = [

diff --git a/src/main/webapp/app/pages/HomePage.tsx b/src/main/webapp/app/pages/HomePage.tsx
@@ -225,7 +225,7 @@ class HomePage extends React.Component<IHomeProps, {}> {
           </Col>
         </Row>
         <Row className="mb-5">
-          <Col md={8} className={'mx-auto'}>
+          <Col md={9} className={'mx-auto'}>
             <Row>
               <Col xs={12} md={6} lg={3}>
                 <HomePageNumber
@@ -275,13 +275,13 @@ class HomePage extends React.Component<IHomeProps, {}> {
           </Col>
         </Row>
         <Row className="mb-5">
-          <Col md={8} className={'mx-auto'}>
+          <Col md={9} className={'mx-auto'}>
             <OncoKBSearch />
           </Col>
         </Row>
-        <Row className="mb-2">
-          <Col xs={0} lg={2}></Col>
-          <Col xs={12} lg={8}>
+        <Row className="mb-3">
+          <Col xs={0} lg={1}></Col>
+          <Col xs={12} lg={10}>
             <div
               className={classnames(
                 'd-flex justify-content-around',
@@ -292,13 +292,9 @@ class HomePage extends React.Component<IHomeProps, {}> {
               {levelTypeButtons}
             </div>
           </Col>
-          <Col xs={0} lg={2}></Col>
+          <Col xs={0} lg={1}></Col>
         </Row>
-        <Row className="my-3 d-flex d-flex justify-content-between">
-          <Col
-            xs={0}
-            lg={this.levelTypeSelected === LEVEL_TYPES.TX ? 1 : 1}
-          ></Col>
+        <Row className="mb-5 d-flex d-flex justify-content-around">
           {this.levelGadgets.map(
             levelGadget =>
               ((this.levelTypeSelected === LEVEL_TYPES.DX &&
@@ -310,48 +306,35 @@ class HomePage extends React.Component<IHomeProps, {}> {
                 (this.levelTypeSelected === LEVEL_TYPES.FDA &&
                   LEVEL_CLASSIFICATION[levelGadget.level] ===
                     LEVEL_TYPES.FDA)) && (
-                <Col
-                  xs={12}
-                  sm={6}
-                  lg={this.levelTypeSelected === LEVEL_TYPES.TX ? 2 : 3}
-                  key={levelGadget.level}
-                  style={{ minHeight: 125 }}
-                >
-                  <LevelButton
-                    key={`${levelGadget.level}-button`}
-                    level={levelGadget.level}
-                    disabledTooltip={
-                      levelGadget.level === LEVELS.Fda1
-                        ? FDA_L1_DISABLED_BTN_TOOLTIP
-                        : ''
-                    }
-                    numOfGenes={this.getLevelNumber(levelGadget.combinedLevels)}
-                    description={levelGadget.description}
-                    title={
-                      LEVEL_CLASSIFICATION[levelGadget.level] ===
-                      LEVEL_TYPES.FDA
-                        ? `FDA Level ${levelGadget.level
-                            .toString()
-                            .replace('Fda', '')}`
-                        : levelGadget.title
-                    }
-                    className="mb-2"
-                    style={{
-                      lineHeight:
-                        levelGadget.level === LEVELS.Px3 ? '35px' : undefined,
-                    }}
-                    href={`${PAGE_ROUTE.ACTIONABLE_GENE}#levels=${
-                      levelGadget.linkoutLevel
-                    }&sections=${LEVEL_CLASSIFICATION[levelGadget.level]}`}
-                    isLoading={this.levelNumbers.isPending}
-                  />
-                </Col>
+                <LevelButton
+                  key={`${levelGadget.level}-button`}
+                  level={levelGadget.level}
+                  disabledTooltip={
+                    levelGadget.level === LEVELS.Fda1
+                      ? FDA_L1_DISABLED_BTN_TOOLTIP
+                      : ''
+                  }
+                  numOfGenes={this.getLevelNumber(levelGadget.combinedLevels)}
+                  description={levelGadget.description}
+                  title={
+                    LEVEL_CLASSIFICATION[levelGadget.level] === LEVEL_TYPES.FDA
+                      ? `FDA Level ${levelGadget.level
+                          .toString()
+                          .replace('Fda', '')}`
+                      : levelGadget.title
+                  }
+                  className="mb-2"
+                  style={{
+                    lineHeight:
+                      levelGadget.level === LEVELS.Px3 ? '35px' : undefined,
+                  }}
+                  href={`${PAGE_ROUTE.ACTIONABLE_GENE}#levels=${
+                    levelGadget.linkoutLevel
+                  }&sections=${LEVEL_CLASSIFICATION[levelGadget.level]}`}
+                  isLoading={this.levelNumbers.isPending}
+                />
               )
           )}
-          <Col
-            xs={0}
-            lg={this.levelTypeSelected === LEVEL_TYPES.TX ? 1 : 1}
-          ></Col>
         </Row>
         <Row className="mb-3">
           <Col className={'text-center'}>

diff --git a/src/main/webapp/app/pages/annotationPage/AlterationView.tsx b/src/main/webapp/app/pages/annotationPage/AlterationView.tsx
@@ -194,6 +194,7 @@ export default class AlterationView extends React.Component<
                     }
               }
               cancerType={this.props.tumorType}
+              biological={[]}
               tx={this.props.therapeuticImplications}
               dx={this.props.diagnosticImplications}
               px={this.props.prognosticImplications}

diff --git a/src/main/webapp/app/pages/genePage/GenePage.tsx b/src/main/webapp/app/pages/genePage/GenePage.tsx
@@ -469,7 +469,7 @@ export default class GenePage extends React.Component<GenePageProps, any> {
                         </span>
                       </h2>
                       <Row>
-                        <Col md={8}>
+                        <Col md={7}>
                           <div className="">
                             <GeneInfo
                               gene={this.store.gene.result}
@@ -517,7 +517,7 @@ export default class GenePage extends React.Component<GenePageProps, any> {
                             )}
                           </div>
                         </Col>
-                        <Col md={4} style={{ fontSize: '0.8rem' }}>
+                        <Col md={5} style={{ fontSize: '0.8rem' }}>
                           <GeneAdditionalInfoTable
                             gene={this.store.gene.result}
                             grch37ensemblGene={findLast(

diff --git a/src/main/webapp/app/pages/genePage/GenomicIndicatorTable.tsx b/src/main/webapp/app/pages/genePage/GenomicIndicatorTable.tsx
@@ -0,0 +1,55 @@
+import OncoKBTable, {
+  SearchColumn,
+} from 'app/components/oncokbTable/OncoKBTable';
+import {
+  LG_TABLE_FIXED_HEIGHT,
+  THRESHOLD_TABLE_FIXED_HEIGHT,
+} from 'app/config/constants';
+import React from 'react';
+import { Evidence } from 'app/shared/api/generated/OncoKbAPI';
+import { getAlterationName } from 'app/shared/utils/Utils';
+
+export const GenomicIndicatorTable: React.FunctionComponent<{
+  data: Evidence[];
+  isPending: boolean;
+}> = props => {
+  const columns: SearchColumn<Evidence>[] = [
+    {
+      Header: <span>Name</span>,
+      accessor: 'knownEffect',
+    },
+    {
+      Header: <span>Description</span>,
+      accessor: 'description',
+    },
+    {
+      Header: <span>Associated Variants</span>,
+      Cell(row: { original: Evidence }) {
+        return (
+          <span>
+            {row.original.alterations
+              .map(alt => getAlterationName(alt))
+              .join(', ')}
+          </span>
+        );
+      },
+    },
+  ];
+  return (
+    <OncoKBTable
+      data={props.data}
+      columns={columns}
+      loading={props.isPending}
+      showPagination={false}
+      pageSize={props.data.length === 0 ? 1 : props.data.length}
+      disableSearch
+      style={
+        props.data.length > THRESHOLD_TABLE_FIXED_HEIGHT
+          ? {
+              height: LG_TABLE_FIXED_HEIGHT,
+            }
+          : undefined
+      }
+    />
+  );
+};
diff --git a/src/main/webapp/app/pages/genePage/SomaticGermlineGenePage.tsx b/src/main/webapp/app/pages/genePage/SomaticGermlineGenePage.tsx
@@ -83,6 +83,7 @@ import {
   UserGoogleGroupLink,
 } from 'app/shared/links/SocialMediaLinks';
 import styles from './GenePage.module.scss';
+import { GenomicIndicatorTable } from 'app/pages/genePage/GenomicIndicatorTable';
 
 interface MatchParams {
   hugoSymbol: string;
@@ -100,12 +101,11 @@ const NoContent: FunctionComponent<{
   return (
     <div>
       <h4>
-        There are no known {props.geneticType} mutations associated with this
-        gene.
+        There are no {props.geneticType} mutations annotated in this gene.
       </h4>
       <p>Data will be updated as new findings emerge.</p>
       <p className={'d-flex flex-column'}>
-        <div>Don't miss out on the latest data releases and new features. </div>
+        <div>Don’t miss out on the latest data releases and new features.</div>
         <div>
           Follow us on <LinkedInLink /> and <TwitterLink />, or subscribe to our
           low-volume email list!
@@ -838,6 +838,19 @@ export default class SomaticGermlineGenePage extends React.Component<
                                     )}
                                   </div>
                                 </If>
+                                {this.isGermline && (
+                                  <>
+                                    <h4 className={'mt-4'}>
+                                      Genomic Indicators
+                                    </h4>
+                                    <GenomicIndicatorTable
+                                      data={this.store.genomicIndicators.result}
+                                      isPending={
+                                        this.store.genomicIndicators.isPending
+                                      }
+                                    />
+                                  </>
+                                )}
                                 {this.hasClinicalImplications && (
                                   <>
                                     <h4 className={'mt-4'}>

diff --git a/src/main/webapp/app/store/AnnotationStore.ts b/src/main/webapp/app/store/AnnotationStore.ts
@@ -256,6 +256,28 @@ export class AnnotationStore {
     },
   });
 
+  readonly genomicIndicators = remoteData<Evidence[]>({
+    await: () => [this.gene],
+    invoke: async () => {
+      try {
+        const evidences = await apiClient.evidencesLookupGetUsingGET({
+          hugoSymbol: this.gene.result.hugoSymbol,
+          evidenceTypes: EVIDENCE_TYPES.GENOMIC_INDICATOR,
+          germline: true,
+        });
+        if (evidences.length > 0) {
+          return evidences;
+        } else {
+          return [];
+        }
+      } catch (e) {
+        notifyError(e, 'Error loading genomic indicators');
+        return [];
+      }
+    },
+    default: [],
+  });
+
   readonly geneNumber = remoteData<GeneNumber>({
     await: () => [this.gene],
     invoke: async () => {