Added new variant page

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

@@ -4,7 +4,10 @@ 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';
+import {
+  parseGenePagePath,
+  parseAlterationPagePath,
+} from 'app/shared/utils/UrlUtils';
 
 const Container: FunctionComponent<{
   inGenePage: boolean;
@@ -25,18 +28,23 @@ const PageContainer: React.FunctionComponent<{
 }> = props => {
   const genePagePath = parseGenePagePath(props.routing.location.pathname);
   const inGenePage = genePagePath.geneticType !== undefined;
+  const inAlterationPage =
+    parseAlterationPagePath(props.routing.location.pathname).geneticType !==
+    undefined;
   return (
     <div className={'view-wrapper'}>
       <div
         className={
-          inGenePage
+          inGenePage || inAlterationPage
             ? ''
             : props.windowStore.isXLscreen
             ? 'container'
             : 'container-fluid'
         }
       >
-        <Container inGenePage={inGenePage}>{props.children}</Container>
+        <Container inGenePage={inGenePage || inAlterationPage}>
+          {props.children}
+        </Container>
       </div>
     </div>
   );

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

@@ -604,6 +604,8 @@ 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',
   HGVSG = '/hgvsg',
   HGVSG_WITH_QUERY = '/hgvsg/:query',
   GENOMIC_CHANGE = '/genomic-change',

src/main/webapp/app/pages/genePage/GeneInfo.tsx

@@ -16,7 +16,7 @@ enum GENE_TYPE_DESC {
   TUMOR_SUPPRESSOR = 'Tumor Suppressor',
 }
 
-const HighestLevelItem: React.FunctionComponent<{
+export const HighestLevelItem: React.FunctionComponent<{
   level: LEVELS;
   key?: string;
 }> = props => {

src/main/webapp/app/pages/somaticGermlineAlterationPage/AlterationTile.module.scss

@@ -0,0 +1,63 @@
+@import '../../variables.scss';
+
+.itemLink a {
+  justify-content: initial;
+}
+
+.itemHeader {
+  font-size: 1rem;
+  color: #878d96;
+}
+
+.alterationTileContainer {
+  container-type: inline-size;
+  width: 100%;
+  max-width: 600px;
+}
+
+.alterationTile {
+  padding: 16px;
+  padding-bottom: 24px;
+  width: 100%;
+  gap: 8px;
+  box-shadow: $default-box-shadow;
+  border-radius: 8px;
+  height: 200px;
+}
+
+.alterationTileColumnMerge {
+  grid-column: 1 / 3;
+}
+
+.alterationTileItems {
+  gap: 16px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: 1fr;
+  height: 100%;
+}
+
+.externalLinkContent {
+  color: $black;
+  margin-right: 10px;
+}
+
+@container (min-width: 550px) {
+  .alterationTile {
+    height: 140px;
+  }
+  .alterationTileItems {
+    display: flex;
+    gap: 16px;
+    flex-direction: row;
+  }
+  .alterationTileItems > * {
+    border-right: 1px solid #e5e0df;
+    padding-right: 16px;
+    flex-grow: 1;
+  }
+
+  .alterationTileItems > *:last-child {
+    border-right: none;
+  }
+}

src/main/webapp/app/pages/somaticGermlineAlterationPage/AlterationTile.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import styles from './AlterationTile.module.scss';
+import classNames from 'classnames';
+import ExternalLinkIcon from 'app/shared/icons/ExternalLinkIcon';
+import { Linkout } from 'app/shared/links/Linkout';
+
+type AlterationItemProps =
+  | {
+      title: string;
+      value: JSX.Element | string;
+      link?: undefined;
+    }
+  | {
+      title: string;
+      value: string;
+      link: string;
+    };
+
+function AlterationItem({
+  title: itemTitle,
+  value,
+  link,
+}: AlterationItemProps) {
+  return (
+    <div>
+      <h4 className={classNames(styles.itemHeader)}>{itemTitle}</h4>
+      <div>
+        {typeof value === 'string' ? (
+          <div className={classNames('h5')}>
+            {link ? (
+              <div className={classNames(styles.itemLink)}>
+                <Linkout link={link}>
+                  <span className={styles.externalLinkContent}>{value}</span>
+                  <i className="fa fa-external-link" />
+                </Linkout>
+              </div>
+            ) : (
+              value
+            )}
+          </div>
+        ) : (
+          value
+        )}
+      </div>
+    </div>
+  );
+}
+
+type AlterationTileProps = {
+  title: string;
+  items: (AlterationItemProps | [AlterationItemProps, AlterationItemProps])[];
+};
+
+export default function AlterationTile({
+  title,
+  items,
+}: AlterationTileProps): JSX.Element {
+  return (
+    <div className={classNames(styles.alterationTileContainer)}>
+      <div
+        className={classNames('d-flex', 'flex-column', styles.alterationTile)}
+      >
+        <h3 className="h6">{title}</h3>
+        <div className={classNames(styles.alterationTileItems)}>
+          {items.map((parent, i) => {
+            if (Array.isArray(parent)) {
+              return parent.map((child, j) => {
+                return <AlterationItem key={`${i}:${j}`} {...child} />;
+              });
+            } else {
+              return (
+                <div className={classNames(styles.alterationTileColumnMerge)}>
+                  <AlterationItem key={i} {...parent} />
+                </div>
+              );
+            }
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

src/main/webapp/app/pages/somaticGermlineAlterationPage/HighestLevelEvidence.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {
+  levelOfEvidence2Level,
+  OncoKBLevelIcon,
+  FdaLevelIcon,
+} from 'app/shared/utils/Utils';
+
+type HighestLevelEvidenceProp = {
+  type:
+    | 'Sensitive'
+    | 'Resistance'
+    | 'DiagnosticImplication'
+    | 'PrognosticImplication'
+    | 'Fda';
+  level: string | undefined;
+};
+
+export default function HighestLevelEvidence({
+  type,
+  level: rawLevel = '',
+}: HighestLevelEvidenceProp): JSX.Element {
+  if (type === 'Sensitive') {
+    const level = levelOfEvidence2Level(rawLevel, false);
+    return (
+      <OncoKBLevelIcon size="s2" level={level} key="highestSensitiveLevel" />
+    );
+  }
+  if (type === 'Resistance') {
+    const level = levelOfEvidence2Level(rawLevel, false);
+    return (
+      <OncoKBLevelIcon size="s2" level={level} key="highestResistanceLevel" />
+    );
+  }
+  if (type === 'DiagnosticImplication') {
+    const level = levelOfEvidence2Level(rawLevel, false);
+    return (
+      <OncoKBLevelIcon
+        size="s2"
+        level={level}
+        key={'highestDiagnosticImplicationLevel'}
+      />
+    );
+  }
+  if (type === 'PrognosticImplication') {
+    const level = levelOfEvidence2Level(rawLevel, false);
+    return (
+      <OncoKBLevelIcon
+        size="s2"
+        level={level}
+        key={'highestPrognosticImplicationLevel'}
+      />
+    );
+  }
+  if (type === 'Fda') {
+    const level = levelOfEvidence2Level(rawLevel, false);
+    return <FdaLevelIcon size="s2" level={level} key={'highestFdaLevel'} />;
+  }
+  return <></>;
+}

src/main/webapp/app/pages/somaticGermlineAlterationPage/SomaticGermlineAlterationPage.module.scss

@@ -0,0 +1,57 @@
+.backLink {
+  gap: 0.5rem;
+}
+
+.header {
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.headerContent {
+  gap: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.navBarTitle {
+  .pill {
+    font-size: 0.85rem;
+  }
+}
+
+.pill {
+  font-size: 1rem;
+  border: #0968c3;
+  color: #0968c3;
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 56px;
+  padding: 0px 8px;
+  background: #f0f5ff;
+}
+
+.alterationTiles {
+  gap: 8px;
+  padding: 32px 0px;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: row;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 600px) {
+  .alterationTiles {
+    flex-wrap: nowrap;
+  }
+  .headerContent {
+    align-items: center;
+    justify-content: flex-start;
+  }
+}
+
+.descriptionContainer {
+  margin-bottom: 1rem;
+}