Hide reVUE when there is no reVUE mutations in the query (cBioPortal#…

…4637) * Hide reVUE when no reVUE mutations in the query * Update screenshot tests
thehyve · Jun 2, 2023 · e4fef0c · e4fef0c
1 parent 6890ad8
commit e4fef0c
Show file tree

Hide file tree

Showing 30 changed files with 85 additions and 21 deletions.
diff --git a/.../local/screenshots/reference/displays_ascn_columns_element_chrome_1600x1000.png b/.../local/screenshots/reference/displays_ascn_columns_element_chrome_1600x1000.png
diff --git a/...display_ascn_columns_for_studies_with_no_ascn_data_element_chrome_1600x1000.png b/...display_ascn_columns_for_studies_with_no_ascn_data_element_chrome_1600x1000.png
diff --git a/...does_not_show_ascn_columns_study_with_no_ascn_data_element_chrome_1600x1000.png b/...does_not_show_ascn_columns_study_with_no_ascn_data_element_chrome_1600x1000.png
diff --git a/..._where_some_samples_have_ascn_data_and_some_do_not_element_chrome_1600x1000.png b/..._where_some_samples_have_ascn_data_and_some_do_not_element_chrome_1600x1000.png
diff --git a/...erence/shows_ascn_columns_for_study_with_ascn_data_element_chrome_1600x1000.png b/...erence/shows_ascn_columns_for_study_with_ascn_data_element_chrome_1600x1000.png
diff --git a/...eference/excluding_unprofiled_samples_mutation_tab_element_chrome_1600x1000.png b/...eference/excluding_unprofiled_samples_mutation_tab_element_chrome_1600x1000.png
diff --git a/...mote/screenshots/reference/no_session_mutation_tab_element_chrome_1600x1000.png b/...mote/screenshots/reference/no_session_mutation_tab_element_chrome_1600x1000.png
diff --git a/...ference/patient_page_valid_after_cohort_navigation_element_chrome_1600x1000.png b/...ference/patient_page_valid_after_cohort_navigation_element_chrome_1600x1000.png
diff --git a/...reenshots/reference/patient_view_lgg_ucsf_2014_p04_element_chrome_1600x1000.png b/...reenshots/reference/patient_view_lgg_ucsf_2014_p04_element_chrome_1600x1000.png
diff --git a/...with_0_mutations_msk_impact_2017_p-0000053-t01-im3_element_chrome_1600x1000.png b/...with_0_mutations_msk_impact_2017_p-0000053-t01-im3_element_chrome_1600x1000.png
diff --git a/...ge_heatmap_with_two_mutations_selected_from_before_element_chrome_1600x1000.png b/...ge_heatmap_with_two_mutations_selected_from_before_element_chrome_1600x1000.png
diff --git a/...shots/reference/pvge_hover_a_mutation_with_heatmap_element_chrome_1600x1000.png b/...shots/reference/pvge_hover_a_mutation_with_heatmap_element_chrome_1600x1000.png
diff --git a/...nshots/reference/pvge_initial_view_with_line_chart_element_chrome_1600x1000.png b/...nshots/reference/pvge_initial_view_with_line_chart_element_chrome_1600x1000.png
diff --git a/.../reference/pvge_one_mutation_selected_with_heatmap_element_chrome_1600x1000.png b/.../reference/pvge_one_mutation_selected_with_heatmap_element_chrome_1600x1000.png
diff --git a/...ference/pvge_one_mutation_selected_with_line_chart_element_chrome_1600x1000.png b/...ference/pvge_one_mutation_selected_with_line_chart_element_chrome_1600x1000.png
diff --git a/...st/remote/screenshots/reference/pvge_show_timeline_element_chrome_1600x1000.png b/...st/remote/screenshots/reference/pvge_show_timeline_element_chrome_1600x1000.png
diff --git a/.../remote/screenshots/reference/session_mutation_tab_element_chrome_1600x1000.png b/.../remote/screenshots/reference/session_mutation_tab_element_chrome_1600x1000.png
diff --git a/packages/react-mutation-mapper/src/component/column/Annotation.tsx b/packages/react-mutation-mapper/src/component/column/Annotation.tsx
@@ -346,10 +346,17 @@ export function GenericAnnotation(props: GenericAnnotationProps): JSX.Element {
                     contentPadding={oncoKbContentPadding}
                 />
             )}
-            {enableRevue && annotation.vue ? (
-                <RevueCell vue={annotation.vue} />
+            {/* only show reVUE when reVUE is enabled and there are reVUE mutations in the query */}
+            {enableRevue ? (
+                annotation.vue ? (
+                    <RevueCell vue={annotation.vue} />
+                ) : (
+                    <span
+                        className={`${annotationStyles['annotation-item']}`}
+                    />
+                )
             ) : (
-                <span className={`${annotationStyles['annotation-item']}`} />
+                <></>
             )}
             {enableCivic && (
                 <Civic

diff --git a/packages/react-mutation-mapper/src/images/vue_logo.png b/packages/react-mutation-mapper/src/images/vue_logo.png
diff --git a/src/pages/patientView/mutation/MutationTableWrapper.tsx b/src/pages/patientView/mutation/MutationTableWrapper.tsx
@@ -277,6 +277,7 @@ export default class MutationTableWrapper extends React.Component<
                                     getServerConfig().mycancergenome_show
                                 }
                                 enableCivic={getServerConfig().show_civic}
+                                enableRevue={getServerConfig().show_revue}
                                 columnVisibility={this.props.columnVisibility}
                                 showGeneFilterMenu={
                                     this.pageStore

diff --git a/src/pages/patientView/mutation/PatientViewMutationTable.tsx b/src/pages/patientView/mutation/PatientViewMutationTable.tsx
@@ -289,6 +289,9 @@ export default class PatientViewMutationTable extends MutationTable<
                     width={this.oncokbWidth}
                     mergeOncoKbIcons={this.props.mergeOncoKbIcons}
                     onOncoKbIconToggle={this.handleOncoKbIconModeToggle}
+                    showRevueIcon={
+                        this.props.enableRevue && this.shouldShowRevue
+                    }
                 />
             );
         };

diff --git a/src/pages/patientView/mutation/PatientViewMutationsTab.tsx b/src/pages/patientView/mutation/PatientViewMutationsTab.tsx
@@ -335,6 +335,7 @@ export default class PatientViewMutationsTab extends React.Component<
                     enableHotspot={getServerConfig().show_hotspot}
                     enableMyCancerGenome={getServerConfig().mycancergenome_show}
                     enableCivic={getServerConfig().show_civic}
+                    enableRevue={getServerConfig().show_revue}
                     columnVisibility={this.props.mutationTableColumnVisibility}
                     columnVisibilityProps={{
                         onColumnToggled: this.props

diff --git a/src/rootImages/vue_logo.png b/src/rootImages/vue_logo.png
diff --git a/src/shared/components/mutationMapper/MutationMapperServerConfig.ts b/src/shared/components/mutationMapper/MutationMapperServerConfig.ts
@@ -7,6 +7,7 @@ export interface IMutationMapperServerConfig {
     show_hotspot?: boolean;
     mycancergenome_show?: boolean;
     show_civic?: boolean;
+    show_revue?: boolean;
     ptmSources?: string[];
     mygene_info_url: string | null;
     uniprot_id_url: string | null;
@@ -30,5 +31,6 @@ export function convertToMutationMapperProps(
         enableHotspot: config.show_hotspot,
         enableMyCancerGenome: config.mycancergenome_show,
         enableCivic: config.show_civic,
+        enableRevue: config.show_revue,
     };
 }
diff --git a/src/shared/components/mutationMapper/MutationMapperStore.ts b/src/shared/components/mutationMapper/MutationMapperStore.ts
@@ -97,6 +97,7 @@ export default class MutationMapperStore extends DefaultMutationMapperStore<
                     mutationMapperStoreConfig.filterMutationsBySelectedTranscript,
                 enableCivic: mutationMapperServerConfig.show_civic,
                 enableOncoKb: mutationMapperServerConfig.show_oncokb,
+                enableRevue: mutationMapperServerConfig.show_revue,
                 filterAppliersOverride:
                     mutationMapperStoreConfig.filterAppliersOverride,
                 genomeBuild: mutationMapperStoreConfig.genomeBuild,

diff --git a/src/shared/components/mutationTable/MutationTable.tsx b/src/shared/components/mutationTable/MutationTable.tsx
@@ -63,6 +63,8 @@ import {
     IMyCancerGenomeData,
     RemoteData,
     IMyVariantInfoIndex,
+    extractGenomicLocation,
+    genomicLocationString,
 } from 'cbioportal-utils';
 import { generateQueryVariantId } from 'oncokb-frontend-commons';
 import { VariantAnnotation } from 'genome-nexus-ts-api-client';
@@ -353,6 +355,35 @@ export default class MutationTable<
         }
     }
 
+    // hide reVUE if there is no reVUE mutations in the query
+    @computed get shouldShowRevue() {
+        const genomicLocationStrings = _.chain(this.props.dataStore?.allData)
+            .filter(mutationList => mutationList.length > 0) // get all mutations and filter out empty mutation list
+            .map(mutationList => mutationList[0]) // get mutation object (it's a list but only has one mutation)
+            .map(mutation => extractGenomicLocation(mutation))
+            .compact() // filter out undefined
+            .map(genomicLocation => genomicLocationString(genomicLocation))
+            .value();
+        const genomicLocationStringSet = new Set(genomicLocationStrings);
+        if (this.props.indexedVariantAnnotations?.result) {
+            const filteredVariantAnnotations = _.values(
+                _.pickBy(
+                    this.props.indexedVariantAnnotations!.result,
+                    (annotation, genomicLocationString) =>
+                        genomicLocationStringSet.has(genomicLocationString)
+                )
+            );
+            return _.some(
+                filteredVariantAnnotations.map(
+                    annotation =>
+                        annotation?.annotation_summary?.vues !== undefined
+                )
+            );
+        } else {
+            return false;
+        }
+    }
+
     protected generateColumns() {
         this._columns = {} as Record<
             ExtendedMutationTableColumnType,
@@ -875,7 +906,8 @@ export default class MutationTable<
                     name,
                     this.oncokbWidth,
                     this.props.mergeOncoKbIcons,
-                    this.handleOncoKbIconModeToggle
+                    this.handleOncoKbIconModeToggle,
+                    this.shouldShowRevue
                 ),
             render: (d: Mutation[]) => (
                 <span id="mutation-annotation">
@@ -898,7 +930,8 @@ export default class MutationTable<
                         enableMyCancerGenome: this.props
                             .enableMyCancerGenome as boolean,
                         enableHotspot: this.props.enableHotspot as boolean,
-                        enableRevue: this.props.enableRevue as boolean,
+                        enableRevue:
+                            !!this.props.enableRevue && this.shouldShowRevue,
                         userDisplayName: this.props.userDisplayName,
                         indexedVariantAnnotations: this.props
                             .indexedVariantAnnotations,
@@ -966,7 +999,8 @@ export default class MutationTable<
                     this.props.civicGenes,
                     this.props.civicVariants,
                     this.props.indexedVariantAnnotations,
-                    this.resolveTumorType
+                    this.resolveTumorType,
+                    !!this.props.enableRevue && this.shouldShowRevue
                 );
             },
             sortBy: (d: Mutation[]) => {

diff --git a/src/shared/components/mutationTable/column/AnnotationColumnFormatter.tsx b/src/shared/components/mutationTable/column/AnnotationColumnFormatter.tsx
@@ -71,7 +71,8 @@ export default class AnnotationColumnFormatter {
         indexedVariantAnnotations?: RemoteData<
             { [genomicLocation: string]: VariantAnnotation } | undefined
         >,
-        resolveTumorType?: (mutation: Mutation) => string
+        resolveTumorType?: (mutation: Mutation) => string,
+        shouldShowRevue?: boolean
     ) {
         const annotationData: IAnnotation = getAnnotationData(
             mutations ? mutations[0] : undefined,
@@ -86,36 +87,46 @@ export default class AnnotationColumnFormatter {
             resolveTumorType
         );
 
-        return [
+        const annotationDownloadContent = [
             `OncoKB: ${oncoKbAnnotationDownload(
                 annotationData.oncoKbIndicator
             )}`,
-            `reVUE: ${
-                annotationData.vue
-                    ? `${annotationData.vue.comment},PubmedId:${annotationData.vue.pubmedIds[0]},PredictedEffect:${annotationData.vue.defaultEffect},ExperimentallyValidatedEffect:${annotationData.vue.variantClassification},RevisedProteinEffect:${annotationData.vue.revisedProteinEffect}`
-                    : 'no'
-            }`,
+        ];
+        // only add reVUE to download when it's enabled and there are reVUE mutations in the query
+        if (shouldShowRevue) {
+            annotationDownloadContent.push(
+                `reVUE: ${
+                    annotationData.vue
+                        ? `${annotationData.vue.comment},PubmedId:${annotationData.vue.pubmedIds[0]},PredictedEffect:${annotationData.vue.defaultEffect},ExperimentallyValidatedEffect:${annotationData.vue.variantClassification},RevisedProteinEffect:${annotationData.vue.revisedProteinEffect}`
+                        : 'no'
+                }`
+            );
+        }
+        annotationDownloadContent.push(
             `CIViC: ${civicDownload(annotationData.civicEntry)}`,
             `MyCancerGenome: ${myCancerGenomeDownload(
                 annotationData.myCancerGenomeLinks
             )}`,
             `CancerHotspot: ${annotationData.isHotspot ? 'yes' : 'no'}`,
-            `3DHotspot: ${annotationData.is3dHotspot ? 'yes' : 'no'}`,
-        ].join(';');
+            `3DHotspot: ${annotationData.is3dHotspot ? 'yes' : 'no'}`
+        );
+        return annotationDownloadContent.join(';');
     }
 
     public static headerRender(
         name: string,
         width: number,
         mergeOncoKbIcons?: boolean,
-        onOncoKbIconToggle?: (mergeIcons: boolean) => void
+        onOncoKbIconToggle?: (mergeIcons: boolean) => void,
+        enableRevue?: boolean
     ) {
         return (
             <AnnotationHeader
                 name={name}
                 width={width}
                 mergeOncoKbIcons={mergeOncoKbIcons}
                 onOncoKbIconToggle={onOncoKbIconToggle}
+                showRevueIcon={enableRevue}
             />
         );
     }

diff --git a/src/shared/components/mutationTable/column/MutationTypeColumnFormatter.tsx b/src/shared/components/mutationTable/column/MutationTypeColumnFormatter.tsx
@@ -13,6 +13,7 @@ import { getVariantAnnotation, RemoteData } from 'cbioportal-utils';
 import { VariantAnnotation } from 'genome-nexus-ts-api-client';
 import _ from 'lodash';
 import { RevueCell } from 'react-mutation-mapper';
+import { getServerConfig } from 'config/config';
 
 /**
  * Mutation Column Formatter.
@@ -184,7 +185,7 @@ export default class MutationTypeColumnFormatter {
         return (
             <span className={styles.mutationTypeCell}>
                 {content}
-                {vue && (
+                {getServerConfig().show_revue && vue && (
                     <span className={styles.revueIcon}>
                         <RevueCell vue={vue} />
                     </span>

diff --git a/src/shared/components/mutationTable/column/ProteinChangeColumnFormatter.tsx b/src/shared/components/mutationTable/column/ProteinChangeColumnFormatter.tsx
@@ -11,6 +11,7 @@ import MutationStatusColumnFormatter from './MutationStatusColumnFormatter';
 import styles from './proteinChange.module.scss';
 import { VariantAnnotation } from 'genome-nexus-ts-api-client';
 import { RevueCell } from 'react-mutation-mapper';
+import { getServerConfig } from 'config/config';
 import _ from 'lodash';
 
 export default class ProteinChangeColumnFormatter {
@@ -104,7 +105,7 @@ export default class ProteinChangeColumnFormatter {
                 {isGermlineMutation && ( // add a germline indicator next to protein change if it is a germline mutation!
                     <span className={styles.germline}>Germline</span>
                 )}
-                {vue && (
+                {getServerConfig().show_revue && vue && (
                     <span className={styles.revueIcon}>
                         <RevueCell vue={vue} />
                     </span>

diff --git a/src/shared/components/mutationTable/column/annotation/AnnotationHeader.tsx b/src/shared/components/mutationTable/column/annotation/AnnotationHeader.tsx
@@ -370,6 +370,7 @@ const AnnotationHeader: React.FunctionComponent<{
     width: number;
     mergeOncoKbIcons?: boolean;
     onOncoKbIconToggle?: (mergeIcons: boolean) => void;
+    showRevueIcon?: boolean;
 }> = props => {
     return (
         <span>
@@ -402,12 +403,13 @@ const AnnotationHeader: React.FunctionComponent<{
                             marginLeft: 5,
                             marginBottom: 0,
                             marginRight:
-                                props.width - 21 > 0 ? props.width - 21 : 0,
+                                props.width - 22 > 0 ? props.width - 22 : 0,
                         }}
                     />
                 </DefaultTooltip>
             )}
-            {getServerConfig().show_revue && (
+            {/* only show reVUE when reVUE is enabled and there are reVUE mutations in the query */}
+            {getServerConfig().show_revue && props.showRevueIcon && (
                 <DefaultTooltip
                     placement="top"
                     overlay={
@@ -423,7 +425,7 @@ const AnnotationHeader: React.FunctionComponent<{
                         style={{
                             height: 14,
                             width: 14,
-                            marginLeft: 6,
+                            marginLeft: 7,
                             marginRight: 1,
                         }}
                     />