Add revue icon for revue variants (#4589)

* Add revue icon for revue variants
* Show icon on results view page and mutation mapper tool
* Add revue icon to mutation type and protein change columns
* Only show reVUE icon when hover over protein change and mutation type column
* Add revue info into download
* Update e2e screnshot tests

packages/cbioportal-utils/src/mutation/ProteinChangeUtils.ts

@@ -474,3 +474,9 @@ export function calcProteinChangeSortValue(
         return null;
     }
 }
+
+export function isGermlineMutationStatus(mutationStatus: string | null) {
+    return (
+        mutationStatus && mutationStatus.toLowerCase().indexOf('germline') > -1
+    );
+}

packages/react-mutation-mapper/src/component/column/Annotation.tsx

@@ -2,6 +2,7 @@ import {
     getCivicEntry,
     getMyCancerGenomeLinks,
     getRemoteDataGroupStatus,
+    getVariantAnnotation,
     ICivicEntry,
     ICivicGeneIndex,
     ICivicVariantIndex,
@@ -38,13 +39,17 @@ import HotspotAnnotation, {
 } from './HotspotAnnotation';
 import { USE_DEFAULT_PUBLIC_INSTANCE_FOR_ONCOKB } from '../../util/DataFetcherUtils';
 import { CanonicalMutationType } from 'cbioportal-frontend-commons';
+import { VariantAnnotation, Vues as VUE } from 'genome-nexus-ts-api-client';
+import { RevueCell, sortValue as revueSortValue } from '../revue/Revue';
+import annotationStyles from './annotation.module.scss';
 
 export type AnnotationProps = {
     mutation?: Mutation;
     enableOncoKb: boolean;
     enableMyCancerGenome: boolean;
     enableHotspot: boolean;
     enableCivic: boolean;
+    enableRevue: boolean;
     hotspotData?: RemoteData<IHotspotIndex | undefined>;
     oncoKbData?: RemoteData<IOncoKbData | Error | undefined>;
     oncoKbCancerGenes?: RemoteData<CancerGene[] | Error | undefined>;
@@ -57,6 +62,9 @@ export type AnnotationProps = {
     myCancerGenomeData?: IMyCancerGenomeData;
     civicGenes?: RemoteData<ICivicGeneIndex | undefined>;
     civicVariants?: RemoteData<ICivicVariantIndex | undefined>;
+    indexedVariantAnnotations?: RemoteData<
+        { [genomicLocation: string]: VariantAnnotation } | undefined
+    >;
     userDisplayName?: string;
 };
 
@@ -66,6 +74,7 @@ export type GenericAnnotationProps = {
     enableHotspot: boolean;
     enableMyCancerGenome: boolean;
     enableOncoKb: boolean;
+    enableRevue: boolean;
     mergeOncoKbIcons?: boolean;
     oncoKbContentPadding?: number;
     pubMedCache?: MobxCache;
@@ -87,6 +96,7 @@ export interface IAnnotation {
     civicStatus: 'pending' | 'error' | 'complete';
     hasCivicVariants: boolean;
     hugoGeneSymbol: string;
+    vue?: VUE;
 }
 
 export const DEFAULT_ANNOTATION_DATA: IAnnotation = {
@@ -122,6 +132,9 @@ export function getAnnotationData(
     usingPublicOncoKbInstance?: boolean,
     civicGenes?: RemoteData<ICivicGeneIndex | undefined>,
     civicVariants?: RemoteData<ICivicVariantIndex | undefined>,
+    indexedVariantAnnotations?: RemoteData<
+        { [genomicLocation: string]: VariantAnnotation } | undefined
+    >,
     resolveTumorType: (mutation: Mutation) => string = getDefaultTumorType,
     resolveEntrezGeneId: (mutation: Mutation) => number = getDefaultEntrezGeneId
 ): IAnnotation {
@@ -130,17 +143,13 @@ export function getAnnotationData(
     if (mutation) {
         let key = '';
         const memoize =
-            !!oncoKbCancerGenes &&
             oncoKbCancerGenes?.isComplete &&
-            !!hotspotData &&
             hotspotData?.isComplete &&
             !!myCancerGenomeData &&
-            !!oncoKbData &&
             oncoKbData?.isComplete &&
-            !!civicGenes &&
             civicGenes?.isComplete &&
-            !!civicVariants &&
-            civicVariants?.isComplete;
+            civicVariants?.isComplete &&
+            indexedVariantAnnotations?.isComplete;
 
         if (memoize) {
             key = JSON.stringify(mutation) + !!usingPublicOncoKbInstance;
@@ -207,18 +216,22 @@ export function getAnnotationData(
                 ? getMyCancerGenomeLinks(mutation, myCancerGenomeData)
                 : [],
             isHotspot:
-                hotspotData &&
-                hotspotData.result &&
-                hotspotData.status === 'complete'
+                hotspotData?.isComplete && hotspotData.result
                     ? isLinearClusterHotspot(mutation, hotspotData.result)
                     : false,
             is3dHotspot:
-                hotspotData &&
-                hotspotData.result &&
-                hotspotData.status === 'complete'
+                hotspotData?.isComplete && hotspotData.result
                     ? is3dHotspot(mutation, hotspotData.result)
                     : false,
             hotspotStatus: hotspotData ? hotspotData.status : 'pending',
+            vue:
+                indexedVariantAnnotations?.isComplete &&
+                indexedVariantAnnotations.result
+                    ? getVariantAnnotation(
+                          mutation,
+                          indexedVariantAnnotations.result
+                      )?.annotation_summary.vues
+                    : undefined,
         };
 
         // oncoKbData may exist but it might be an instance of Error, in that case we flag the status as error
@@ -296,6 +309,7 @@ export function sortValue(annotation: IAnnotation): number[] {
         civicSortValue(annotation.civicEntry),
         myCancerGenomeSortValue(annotation.myCancerGenomeLinks),
         hotspotSortValue(annotation.isHotspot, annotation.is3dHotspot),
+        revueSortValue(annotation.vue),
         annotation.isOncoKbCancerGene ? 1 : 0,
     ]);
 }
@@ -307,6 +321,7 @@ export function GenericAnnotation(props: GenericAnnotationProps): JSX.Element {
         enableHotspot,
         enableMyCancerGenome,
         enableOncoKb,
+        enableRevue,
         pubMedCache,
         userDisplayName,
         mergeOncoKbIcons,
@@ -331,6 +346,11 @@ export function GenericAnnotation(props: GenericAnnotationProps): JSX.Element {
                     contentPadding={oncoKbContentPadding}
                 />
             )}
+            {enableRevue && annotation.vue ? (
+                <RevueCell vue={annotation.vue} />
+            ) : (
+                <span className={`${annotationStyles['annotation-item']}`} />
+            )}
             {enableCivic && (
                 <Civic
                     civicEntry={annotation.civicEntry}
@@ -356,7 +376,6 @@ export function GenericAnnotation(props: GenericAnnotationProps): JSX.Element {
 export default class Annotation extends React.Component<AnnotationProps, {}> {
     public render() {
         const annotation = this.getAnnotationData(this.props);
-
         return <GenericAnnotation {...this.props} annotation={annotation} />;
     }
 
@@ -372,6 +391,7 @@ export default class Annotation extends React.Component<AnnotationProps, {}> {
             resolveTumorType,
             civicGenes,
             civicVariants,
+            indexedVariantAnnotations,
         } = props;
 
         return getAnnotationData(
@@ -383,6 +403,7 @@ export default class Annotation extends React.Component<AnnotationProps, {}> {
             usingPublicOncoKbInstance,
             civicGenes,
             civicVariants,
+            indexedVariantAnnotations,
             resolveTumorType,
             resolveEntrezGeneId
         );

packages/react-mutation-mapper/src/component/mutationMapper/MutationMapper.tsx

@@ -76,6 +76,7 @@ export type MutationMapperProps = {
     oncoKbUrl?: string;
     enableOncoKb?: boolean;
     enableCivic?: boolean;
+    enableRevue?: boolean;
     cachePostMethodsOnClients?: boolean;
     apiCacheLimit?: number;
     showTranscriptDropDown?: boolean;
@@ -121,6 +122,7 @@ export function initDefaultMutationMapperStore(props: MutationMapperProps) {
             oncoKbUrl: props.oncoKbUrl,
             enableCivic: props.enableCivic,
             enableOncoKb: props.enableOncoKb,
+            enableRevue: props.enableRevue,
             cachePostMethodsOnClients: props.cachePostMethodsOnClients,
             apiCacheLimit: props.apiCacheLimit,
             getMutationCount: props.getMutationCount,
@@ -146,6 +148,7 @@ export default class MutationMapper<
         showTranscriptDropDown: false,
         enableCivic: true,
         enableOncoKb: true,
+        enableRevue: true,
         filterMutationsBySelectedTranscript: false,
         cachePostMethodsOnClients: true,
     };
@@ -302,6 +305,7 @@ export default class MutationMapper<
                     oncoKbCancerGenes={this.store.oncoKbCancerGenes}
                     myCancerGenomeData={this.store.myCancerGenomeData}
                     enableCivic={this.props.enableCivic}
+                    enableRevue={this.props.enableRevue}
                     civicGenes={this.store.civicGenes}
                     civicVariants={this.store.civicVariants}
                     indexedMyVariantInfoAnnotations={

packages/react-mutation-mapper/src/component/mutationTable/DefaultMutationTable.tsx

@@ -56,6 +56,7 @@ export type DefaultMutationTableProps = {
     >;
     selectedTranscriptId?: string;
     enableCivic?: boolean;
+    enableRevue?: boolean;
     civicGenes?: RemoteData<ICivicGeneIndex | undefined>;
     civicVariants?: RemoteData<ICivicVariantIndex | undefined>;
     pubMedCache?: MobxCache;
@@ -124,7 +125,8 @@ export default class DefaultMutationTable extends React.Component<
                       this.props.oncoKbData,
                       this.props.usingPublicOncoKbInstance,
                       this.props.civicGenes,
-                      this.props.civicVariants
+                      this.props.civicVariants,
+                      this.props.indexedVariantAnnotations
                   );
     }
 
@@ -217,6 +219,7 @@ export default class DefaultMutationTable extends React.Component<
                         enableHotspot={true}
                         enableCivic={this.props.enableCivic || false}
                         enableMyCancerGenome={true}
+                        enableRevue={true}
                         hotspotData={this.props.hotspotData}
                         oncoKbData={this.props.oncoKbData}
                         oncoKbCancerGenes={this.props.oncoKbCancerGenes}
@@ -226,6 +229,9 @@ export default class DefaultMutationTable extends React.Component<
                         pubMedCache={this.props.pubMedCache}
                         civicGenes={this.props.civicGenes}
                         civicVariants={this.props.civicVariants}
+                        indexedVariantAnnotations={
+                            this.props.indexedVariantAnnotations
+                        }
                     />
                 );
             case MutationColumn.HGVSG:

packages/react-mutation-mapper/src/component/revue/Revue.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { DefaultTooltip } from 'cbioportal-frontend-commons';
+import { Vues as VUE } from 'genome-nexus-ts-api-client';
+import annotationStyles from '../column/annotation.module.scss';
+
+export const RevueTooltipContent: React.FunctionComponent<{
+    vue: VUE;
+}> = props => {
+    return (
+        <div>
+            {props.vue.comment}{' '}
+            <a
+                href={`https://pubmed.ncbi.nlm.nih.gov/${props.vue.pubmedIds[0]}/`}
+                rel="noopener noreferrer"
+                target="_blank"
+            >
+                ({props.vue.referenceText})
+            </a>
+            <ul>
+                <li>
+                    Predicted Effect: <strong>{props.vue.defaultEffect}</strong>
+                </li>
+                <li>
+                    Experimentally Validated Effect:{' '}
+                    <strong>{props.vue.variantClassification}</strong>
+                </li>
+                <li>
+                    Revised Protein Effect:{' '}
+                    <strong>{props.vue.revisedProteinEffect}</strong>
+                </li>
+            </ul>
+            <div>
+                Source:{' '}
+                <a
+                    href="https://cancerrevue.org"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    reVUE <i className="fa fa-external-link" />
+                </a>
+            </div>
+        </div>
+    );
+};
+
+export function sortValue(vue: VUE | undefined): number {
+    return vue ? 1 : 0;
+}
+
+export const RevueCell: React.FunctionComponent<{
+    vue: VUE;
+}> = props => {
+    return (
+        <DefaultTooltip
+            placement="bottom"
+            overlay={<RevueTooltipContent vue={props.vue} />}
+        >
+            <span
+                className={`${annotationStyles['annotation-item']}`}
+                style={{ display: 'inline-flex' }}
+            >
+                <img
+                    src={'../../images/vue_logo.png'}
+                    alt="reVUE logo"
+                    width={14}
+                    height={14}
+                />
+            </span>
+        </DefaultTooltip>
+    );
+};

packages/react-mutation-mapper/src/index.tsx

@@ -52,6 +52,7 @@ export {
     default as ProteinChange,
     proteinChangeSortMethod,
 } from './component/column/ProteinChange';
+export { RevueCell, RevueTooltipContent } from './component/revue/Revue';
 export {
     default as Signal,
     getSignalData,

packages/react-mutation-mapper/src/store/DefaultMutationMapperStore.ts

@@ -83,6 +83,7 @@ interface DefaultMutationMapperStoreConfig {
     oncoKbUrl?: string;
     enableCivic?: boolean;
     enableOncoKb?: boolean;
+    enableRevue?: boolean;
     cachePostMethodsOnClients?: boolean;
     apiCacheLimit?: number;
     getMutationCount?: (mutation: Partial<Mutation>) => number;

src/config/IAppConfig.ts

@@ -67,6 +67,7 @@ export interface IServerConfig {
     show_hotspot: boolean | undefined;
     show_oncokb: boolean;
     show_civic: boolean;
+    show_revue: boolean;
     show_genomenexus: boolean;
     show_genomenexus_annotation_sources: string;
     show_pathway_mapper: boolean;

src/config/serverConfigDefaults.ts

@@ -43,6 +43,7 @@ export const ServerConfigDefaults: Partial<IServerConfig> = {
     show_hotspot: true,
     show_oncokb: true,
     show_civic: false,
+    show_revue: true,
     show_pathway_mapper: true,
     show_mutation_mapper_tool_grch38: true,
     show_transcript_dropdown: false,

src/pages/patientView/copyNumberAlterations/CopyNumberTableWrapper.tsx

@@ -269,6 +269,7 @@ export default class CopyNumberTableWrapper extends React.Component<
                         enableCivic: getServerConfig().show_civic as boolean,
                         enableMyCancerGenome: false,
                         enableHotspot: false,
+                        enableRevue: false,
                         userDisplayName: getServerConfig().user_display_name,
                         studyIdToStudy: this.pageStore.studyIdToStudy.result,
                     })}

src/pages/patientView/structuralVariant/StructuralVariantTableWrapper.tsx

@@ -298,6 +298,7 @@ export default class StructuralVariantTableWrapper extends React.Component<
                             enableCivic: false,
                             enableMyCancerGenome: false,
                             enableHotspot: false,
+                            enableRevue: false,
                             userDisplayName: ServerConfigHelpers.getUserDisplayName(),
                             studyIdToStudy: this.props.store.studyIdToStudy
                                 .result,

src/pages/resultsView/mutation/ResultsViewMutationMapper.tsx

@@ -229,6 +229,7 @@ export default class ResultsViewMutationMapper extends MutationMapper<
                 enableHotspot={this.props.enableHotspot}
                 enableMyCancerGenome={this.props.enableMyCancerGenome}
                 enableCivic={this.props.enableCivic}
+                enableRevue={this.props.enableRevue}
                 totalNumberOfExons={this.totalExonNumber}
                 generateGenomeNexusHgvsgUrl={
                     this.props.store.generateGenomeNexusHgvsgUrl

src/shared/components/mutationMapper/MutationMapper.tsx

@@ -103,6 +103,7 @@ export interface IMutationMapperProps {
     enableHotspot?: boolean;
     enableMyCancerGenome?: boolean;
     enableCivic?: boolean;
+    enableRevue?: boolean;
     ptmSources?: string[];
 }