Added new variant page

src/main/webapp/app/Main.tsx

@@ -104,16 +104,12 @@ class Main extends React.Component<IMainPage> {
           routing={this.props.routing}
           appStore={this.props.appStore}
         />
-        <PageContainer
+        <AppRoutes
+          authenticationStore={this.props.authenticationStore}
+          appStore={this.props.appStore}
           routing={this.props.routing}
           windowStore={this.props.windowStore}
-        >
-          <AppRoutes
-            authenticationStore={this.props.authenticationStore}
-            appStore={this.props.appStore}
-            routing={this.props.routing}
-          />
-        </PageContainer>
+        />
         <FeedbackModal
           showModal={this.props.appStore.showFeedbackFormModal}
           feedback={this.feedbackAnnotation}

src/main/webapp/app/components/LevelWithDescription.tsx

@@ -8,7 +8,7 @@ import ReactHtmlParser from 'react-html-parser';
 import { LEVELS } from 'app/config/constants';
 
 export const LevelWithDescription: React.FunctionComponent<{
-  level: LEVELS;
+  level: LEVELS | undefined;
   appStore?: AppStore;
   description?: string;
 }> = inject('appStore')(props => {

src/main/webapp/app/components/PageContainer.tsx

@@ -1,42 +1,25 @@
 import React, { FunctionComponent } from 'react';
 import { Col, Row } from 'react-bootstrap';
 import WindowStore from 'app/store/WindowStore';
-import { RouterStore } from 'mobx-react-router';
-import { PAGE_ROUTE } from 'app/config/constants';
-import { GENETIC_TYPE } from 'app/components/geneticTypeTabs/GeneticTypeTabs';
-import { parseGenePagePath } from 'app/shared/utils/UrlUtils';
 
-const Container: FunctionComponent<{
-  inGenePage: boolean;
-}> = props => {
-  if (props.inGenePage) {
-    return <div>{props.children}</div>;
-  } else {
-    return (
-      <Row className={`justify-content-center`}>
-        <Col md={11}>{props.children}</Col>
-      </Row>
-    );
-  }
+const Container: FunctionComponent<{}> = props => {
+  return (
+    <Row className={`justify-content-center`}>
+      <Col md={11}>{props.children}</Col>
+    </Row>
+  );
 };
 const PageContainer: React.FunctionComponent<{
-  routing: RouterStore;
   windowStore: WindowStore;
 }> = props => {
-  const genePagePath = parseGenePagePath(props.routing.location.pathname);
-  const inGenePage = genePagePath.geneticType !== undefined;
   return (
     <div className={'view-wrapper'}>
       <div
         className={
-          inGenePage
-            ? ''
-            : props.windowStore.isXLscreen
-            ? 'container'
-            : 'container-fluid'
+          props.windowStore.isXLscreen ? 'container' : 'container-fluid'
         }
       >
-        <Container inGenePage={inGenePage}>{props.children}</Container>
+        <Container>{props.children}</Container>
       </div>
     </div>
   );

src/main/webapp/app/components/geneticTypeTag/GeneticTypeTag.tsx

@@ -5,19 +5,19 @@ import styles from './genetic-type-tag.module.scss';
 import { capitalize } from 'cbioportal-frontend-commons';
 
 const GeneticTypeTag: FunctionComponent<{
-  geneticType: GENETIC_TYPE;
+  isGermline: boolean;
   className?: string;
 }> = props => {
   return (
     <span
       className={classnames(
         props.className,
-        props.geneticType === GENETIC_TYPE.GERMLINE
-          ? styles.germlineTag
-          : styles.somaticTag
+        props.isGermline ? styles.germlineTag : styles.somaticTag
       )}
     >
-      {capitalize(props.geneticType)}
+      {capitalize(
+        props.isGermline ? GENETIC_TYPE.GERMLINE : GENETIC_TYPE.SOMATIC
+      )}
     </span>
   );
 };

src/main/webapp/app/components/searchOption/SearchOption.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { levelOfEvidence2Level, OncoKBAnnotationIcon } from 'app/shared/utils/Utils';
+import {
+  levelOfEvidence2Level,
+  OncoKBAnnotationIcon,
+} from 'app/shared/utils/Utils';
 import { Else, If, Then } from 'react-if';
 import Highlighter from 'react-highlight-words';
 import styles from './SearchOption.module.scss';
@@ -50,9 +53,15 @@ const GeneSearchOption: React.FunctionComponent<{
           searchWords={[props.search]}
           textToHighlight={`${props.data.gene.hugoSymbol} (Entrez Gene: ${props.data.gene.entrezGeneId})`}
         />
-        {props.data.annotation && Object.values(GENETIC_TYPE).includes(props.data.annotation.toLowerCase() as GENETIC_TYPE) && (
-          <GeneticTypeTag geneticType={props.data.annotation.toLowerCase() === 'germline' ? GENETIC_TYPE.GERMLINE : GENETIC_TYPE.SOMATIC} className={'ml-2'}/>
-        )}
+        {props.data.annotation &&
+          Object.values(GENETIC_TYPE).includes(
+            props.data.annotation.toLowerCase() as GENETIC_TYPE
+          ) && (
+            <GeneticTypeTag
+              isGermline={props.data.annotation.toLowerCase() === 'germline'}
+              className={'ml-2'}
+            />
+          )}
         {props.data.highestSensitiveLevel ||
         props.data.highestResistanceLevel ? (
           <span className={classnames(styles.subTitle, 'ml-2')}>

src/main/webapp/app/config/constants.tsx

@@ -605,6 +605,10 @@ export enum PAGE_ROUTE {
   SOMATIC_GENE = '/gene/:hugoSymbol/somatic',
   GERMLINE_GENE = '/gene/:hugoSymbol/germline',
   ALTERATION = '/gene/:hugoSymbol/:alteration',
+  SOMATIC_ALTERATION = '/gene/:hugoSymbol/somatic/:alteration',
+  GERMLINE_ALTERATION = '/gene/:hugoSymbol/germline/:alteration',
+  SOMATIC_TUMOR_TYPE = '/gene/:hugoSymbol/somatic/:alteration/:tumorType',
+  GERMLINE_TUMOR_TYPE = '/gene/:hugoSymbol/germline/:alteration/:tumorType',
   HGVSG = '/hgvsg',
   HGVSG_WITH_QUERY = '/hgvsg/:query',
   GENOMIC_CHANGE = '/genomic-change',

src/main/webapp/app/pages/annotationPage/AnnotatedAlterations.tsx

@@ -35,6 +35,7 @@ const getColumns = (germline: boolean, hugoSymbol: string) => {
             alterationRefGenomes={
               props.original.variant.referenceGenomes as REFERENCE_GENOME[]
             }
+            germline={germline}
           />
         </>
       );

src/main/webapp/app/pages/annotationPage/AnnotationBreadcrumbs.module.scss

@@ -0,0 +1,6 @@
+.breadcrumb {
+  max-width: 40ch;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+  overflow: hidden;
+}