Add precision oncology therapies page (#1022)

- Add precision oncology therapies page, but hide until paper is out - Update team page - Fix oncokb/oncokb#3549
oncokb · Sep 28, 2023 · 8a8f4c8 · 8a8f4c8
1 parent d055f74
commit 8a8f4c8
Show file tree

Hide file tree

Showing 17 changed files with 2,080 additions and 444 deletions.
diff --git a/src/main/webapp/app/components/Header.tsx b/src/main/webapp/app/components/Header.tsx
@@ -78,6 +78,7 @@ class Header extends React.Component<IHeaderProps> {
       ],
     },
     { title: 'Actionable Genes', link: PAGE_ROUTE.ACTIONABLE_GENE },
+    // { title: 'Precision Oncology Therapies', link: PAGE_ROUTE.PO_TX },
     { title: 'Cancer Genes', link: PAGE_ROUTE.CANCER_GENES },
     {
       title: 'API / License',

diff --git a/src/main/webapp/app/components/downloadButton/DownloadButton.tsx b/src/main/webapp/app/components/downloadButton/DownloadButton.tsx
@@ -4,19 +4,20 @@ import styles from './DownloadButton.module.scss';
 interface IDownloadButton {
   href: string;
   className?: string;
+  size?: 'sm' | 'lg';
   download?: string | boolean; // We can override the default filename by providing a string
 }
 
 // Naturally the Button component has href property which will convert the component to a A tag
 // But in the scenario downloading PDF file, we need to specify the download property
 export const DownloadButton: React.FunctionComponent<IDownloadButton> = props => {
-  const { href, download, className } = props;
-
+  const { href, download, className, size } = props;
+  const buttonSizeClassName = size ? `btn-${size}` : '';
   return (
     <a
       href={href}
       download={download || true}
-      className={`btn btn-primary ${className} ${styles.aTag}`}
+      className={`btn btn-primary ${buttonSizeClassName} ${className} ${styles.aTag}`}
     >
       <i className={'fa fa-cloud-download mr-1'} />
       {props.children}

diff --git a/src/main/webapp/app/components/oncokbSearch/OncoKBSearch.tsx b/src/main/webapp/app/components/oncokbSearch/OncoKBSearch.tsx
@@ -130,7 +130,10 @@ export default class OncoKBSearch extends React.Component<IOncoKBSearch, {}> {
               placeholder(styles) {
                 return {
                   ...styles,
-                  width: '100%',
+                  width: '90%',
+                  overflow: 'hidden',
+                  whiteSpace: 'nowrap',
+                  textOverflow: 'ellipsis',
                   lineHeight: '30px',
                   textAlign: 'center',
                 };

diff --git a/src/main/webapp/app/components/oncokbTable/OncoKBTable.tsx b/src/main/webapp/app/components/oncokbTable/OncoKBTable.tsx
@@ -17,6 +17,7 @@ interface ITableWithSearchBox<T> extends Partial<TableProps<T>> {
   columns: SearchColumn<T>[];
   loading?: boolean;
   filters?: React.FunctionComponent;
+  className?: string;
 }
 
 @observer
@@ -84,11 +85,11 @@ export default class OncoKBTable<T> extends React.Component<
         )}
         <div className="mt-2">
           <ReactTable
+            {...this.props}
             showPagination={this.props.showPagination}
             className={`-striped -highlight oncokbReactTable ${
               this.props.fixedHeight ? 'fixedHeight' : ''
-            }`}
-            {...this.props}
+            } ${this.props.className}`}
             data={this.filteredData}
           />
         </div>

diff --git a/src/main/webapp/app/config/constants.tsx b/src/main/webapp/app/config/constants.tsx
@@ -533,11 +533,16 @@ export enum PAGE_TITLE {
 export enum PAGE_ROUTE {
   LOGIN = '/login',
   LOGOUT = '/logout',
-  DATA_ACCESS = '/dataAccess',
-  API_ACCESS = '/apiAccess',
+  LEGACY_DATA_ACCESS = '/dataAccess',
+  DATA_ACCESS = '/data-access',
+  LEGACY_API_ACCESS = '/apiAccess',
+  API_ACCESS = '/api-access',
   FAQ_ACCESS = '/faq',
-  CANCER_GENES = '/cancerGenes',
-  ACTIONABLE_GENE = '/actionableGenes',
+  LEGACY_CANCER_GENES = '/cancerGenes',
+  CANCER_GENES = '/cancer-genes',
+  LEGACY_ACTIONABLE_GENE = '/actionableGenes',
+  ACTIONABLE_GENE = '/actionable-genes',
+  PO_TX = '/precision-oncology-therapies',
   GENE_HEADER = '/gene',
   GENE = '/gene/:hugoSymbol',
   ALTERATION = '/gene/:hugoSymbol/:alteration',

diff --git a/src/main/webapp/app/index.scss b/src/main/webapp/app/index.scss
@@ -65,8 +65,8 @@ b {
     .navbar-nav {
       & > .nav-item {
         color: white;
-        line-height: 2.75rem;
-        border-bottom: 0.3rem solid $nav-bg-color;
+        line-height: 1rem;
+        border-bottom: 0.5rem solid $nav-bg-color;
 
         &.active {
           border-bottom-color: $oncokb-darker-blue;
@@ -77,6 +77,10 @@ b {
         }
       }
 
+      & > .nav-item:first-line {
+        line-height: 2.75rem;
+      }
+
       & .nav-link {
         padding-left: $navbar-nav-link-padding-x;
         padding-right: $navbar-nav-link-padding-x;

diff --git a/src/main/webapp/app/pages/menus/menu-item.tsx b/src/main/webapp/app/pages/menus/menu-item.tsx
@@ -13,7 +13,7 @@ export default class MenuItem extends React.Component<IMenuItem> {
     const { to, icon, id, children } = this.props;
 
     return (
-      <DropdownItem as={Link} to={to} id={id}>
+      <DropdownItem as={Link} to={to} id={id} style={{ lineHeight: '2.75rem' }}>
         <i className={`fa fa-${icon} fa-fw mr-1`} /> {children}
       </DropdownItem>
     );