Adding Customizable Custom Driver Column to Mutation, CNA, and SV Tab…

…le (#4840) * remove hide_download_control from appContext and fix mutationMapper * add custom driver/tiers columns * add driver column with tooptips to SV and CNA table * hide annotation and sort with custom driver column * use existing oncoprint custom driver menu label and fix visibility and sorting issues * support default sort column in tables and remove visible check on AnnotationColumnFormatter * fix hide-download-controls.spec.js failed tests --------- Co-authored-by: Qi-Xuan Lu <[email protected]>
cBioPortal · Mar 1, 2024 · 0b095b1 · 0b095b1
1 parent 32de3d5
commit 0b095b1
Show file tree

Hide file tree

Showing 41 changed files with 900 additions and 50 deletions.
diff --git a/end-to-end-test/local/specs/core/patientview.spec.js b/end-to-end-test/local/specs/core/patientview.spec.js
@@ -365,13 +365,13 @@ describe('patient view page', function() {
             const mutationsTable = '[data-test=patientview-mutation-table]';
             $(`${mutationsTable} button#dropdown-custom-1`).click();
             $(`${mutationsTable} ul.dropdown-menu`)
-                .$$('li label input')[19]
+                .$$('li label input')[21]
                 .click();
             $(`${mutationsTable} ul.dropdown-menu`)
-                .$$('li label input')[20]
+                .$$('li label input')[22]
                 .click();
             $(`${mutationsTable} ul.dropdown-menu`)
-                .$$('li label input')[21]
+                .$$('li label input')[23]
                 .click();
             $(`${mutationsTable} button#dropdown-custom-1`).click();
         });

diff --git a/end-to-end-test/local/specs/hide-download-controls.spec.js b/end-to-end-test/local/specs/hide-download-controls.spec.js
@@ -254,6 +254,7 @@ describe('hide download controls feature', function() {
                     it('global check for icon and occurrence of "Download" as a word', () => {
                         $('.tabAnchor_clinical').click();
                         $('[data-test=ClinicalTabPlotDiv]').waitForExist();
+                        $('[data-test=LazyMobXTable]').waitForExist();
                         globalCheck();
                     });
                 });
@@ -609,6 +610,7 @@ describe('hide download controls feature', function() {
             describe('clinical tab', () => {
                 it('global check for icon and occurrence of "Download" as a word', () => {
                     $('.tabAnchor_clinical').click();
+                    $('[data-test=LazyMobXTable]').waitForExist();
                     $('[data-test=ClinicalTabPlotDiv]').waitForExist();
                     globalCheck();
                 });

diff --git a/packages/cbioportal-frontend-commons/src/components/appContext/AppContext.tsx b/packages/cbioportal-frontend-commons/src/components/appContext/AppContext.tsx
@@ -1,17 +1,7 @@
 import React, { Context } from 'react';
 
-export enum DownloadControlOption {
-    SHOW_ALL = 'show',
-    HIDE_DATA = 'data',
-    HIDE_ALL = 'hide',
-}
-
-export interface IAppContext {
-    showDownloadControls: DownloadControlOption;
-}
+export interface IAppContext {}
 
 export const AppContext: Context<IAppContext> = React.createContext<
     IAppContext
->({
-    showDownloadControls: DownloadControlOption.SHOW_ALL,
-});
+>({});
diff --git a/packages/cbioportal-frontend-commons/src/components/downloadControls/DownloadControls.tsx b/packages/cbioportal-frontend-commons/src/components/downloadControls/DownloadControls.tsx
@@ -11,7 +11,6 @@ import { saveSvg, saveSvgAsPng } from 'save-svg-as-png';
 import svgToPdfDownload from '../../lib/svgToPdfDownload';
 import { CSSProperties } from 'react';
 import { isPromiseLike } from 'cbioportal-utils';
-import { AppContext, DownloadControlOption } from '../appContext/AppContext';
 
 type ButtonSpec = {
     key: string;
@@ -30,6 +29,12 @@ export type DownloadControlsButton =
 
 export type DataType = 'summary' | 'full';
 
+export enum DownloadControlOption {
+    SHOW_ALL = 'show',
+    HIDE_DATA = 'data',
+    HIDE_ALL = 'hide',
+}
+
 interface IDownloadControlsProps {
     getSvg?: () => SVGElement | null | PromiseLike<SVGElement | null>;
     getData?: (
@@ -306,9 +311,7 @@ export default class DownloadControls extends React.Component<
     }
 
     render() {
-        if (
-            this.context.showDownloadControls === DownloadControlOption.HIDE_ALL
-        ) {
+        if (this.showDownload === false) {
             return null;
         }
 
@@ -421,5 +424,3 @@ export default class DownloadControls extends React.Component<
         }
     }
 }
-
-DownloadControls.contextType = AppContext;
diff --git a/packages/cbioportal-frontend-commons/src/index.tsx b/packages/cbioportal-frontend-commons/src/index.tsx
@@ -13,6 +13,7 @@ export {
     default as DownloadControls,
     DataType,
     DownloadControlsButton,
+    DownloadControlOption,
 } from './components/downloadControls/DownloadControls';
 export { default as EditableSpan } from './components/editableSpan/EditableSpan';
 export { default as EllipsisTextTooltip } from './components/ellipsisTextTooltip/EllipsisTextTooltip';

diff --git a/src/appShell/App/Container.tsx b/src/appShell/App/Container.tsx
@@ -31,7 +31,6 @@ import {
 import makeRoutes from 'routes';
 import { AppContext } from 'cbioportal-frontend-commons';
 import { IAppContext } from 'cbioportal-frontend-commons';
-import { DownloadControlOption } from 'cbioportal-frontend-commons';
 import { ErrorAlert } from 'shared/components/errorScreen/ErrorAlert';
 import { ErrorInfo } from 'react';
 import { observable } from 'mobx';
@@ -69,10 +68,7 @@ export default class Container extends React.Component<IContainerProps, {}> {
     }
 
     get appContext(): IAppContext {
-        return {
-            showDownloadControls: getServerConfig()
-                .skin_hide_download_controls as DownloadControlOption,
-        };
+        return {};
     }
 
     render() {

diff --git a/src/config/IAppConfig.ts b/src/config/IAppConfig.ts
@@ -39,7 +39,10 @@ export interface IServerConfig {
     app_version: string | null; // default: "1.0"
     authenticationMethod: string | undefined;
     bitly_access_token: string | null;
-    oncoprint_custom_driver_annotation_binary_menu_label: string | null; // default:
+    oncoprint_custom_driver_annotation_binary_menu_label: string | null;
+    oncoprint_custom_driver_annotation_binary_menu_description: string | null;
+    oncoprint_custom_driver_annotation_tiers_menu_label: string | null;
+    oncoprint_custom_driver_annotation_tiers_menu_description: string | null;
     disabled_tabs: string | null;
     custom_tabs: any[];
     custom_js_urls: string; // comma delimited string
@@ -137,7 +140,6 @@ export interface IServerConfig {
     studiesWithGermlineConsentedSamples: string[] | undefined;
     mdacc_heatmap_study_meta_url: string | null;
     mdacc_heatmap_study_url: string | null;
-    oncoprint_custom_driver_annotation_tiers_menu_label: string | null;
     enable_darwin: boolean;
     query_sets_of_genes: string | null;
     skin_quick_select_buttons: string | null;
@@ -170,6 +172,8 @@ export interface IServerConfig {
     skin_comparison_view_mutation_table_columns_show_on_init: string;
     skin_patient_view_copy_number_table_columns_show_on_init: string;
     skin_patient_view_structural_variant_table_columns_show_on_init: string;
+    skin_results_view_tables_default_sort_column: string;
+    skin_patient_view_tables_default_sort_column: string;
     skin_patient_view_custom_sample_type_colors_json: string;
     comparison_categorical_na_values: string;
     oncoprint_clinical_tracks_config_json: string;

diff --git a/src/config/serverConfigDefaults.ts b/src/config/serverConfigDefaults.ts
@@ -27,9 +27,12 @@ export const ServerConfigDefaults: Partial<IServerConfig> = {
     mygene_info_url:
         'https://mygene.info/v3/gene/<%= entrezGeneId %>?fields=uniprot',
 
-    oncoprint_custom_driver_annotation_binary_menu_label:
-        'Custom driver annotations',
-    oncoprint_custom_driver_annotation_tiers_menu_label: 'Driver tiers',
+    oncoprint_custom_driver_annotation_binary_menu_label: 'Custom Driver',
+    oncoprint_custom_driver_annotation_binary_menu_description:
+        'Custom driver annotation',
+    oncoprint_custom_driver_annotation_tiers_menu_label: 'Custom Driver Tiers',
+    oncoprint_custom_driver_annotation_tiers_menu_description:
+        'Custom driver tiers',
     oncoprint_custom_driver_annotation_binary_default: true,
     oncoprint_custom_driver_annotation_tiers_default: true,
     oncoprint_oncokb_default: true,
@@ -221,6 +224,10 @@ export const ServerConfigDefaults: Partial<IServerConfig> = {
 
     skin_patient_view_structural_variant_table_columns_show_on_init: '',
 
+    skin_results_view_tables_default_sort_column: 'Annotation',
+
+    skin_patient_view_tables_default_sort_column: 'Annotation',
+
     skin_patient_view_custom_sample_type_colors_json: '',
 
     studyview_max_samples_selected: 0,

diff --git a/src/pages/groupComparison/ClinicalData.tsx b/src/pages/groupComparison/ClinicalData.tsx
@@ -13,7 +13,11 @@ import {
 import { SimpleGetterLazyMobXTableApplicationDataStore } from 'shared/lib/ILazyMobXTableApplicationDataStore';
 import ClinicalDataEnrichmentsTable from './ClinicalDataEnrichmentsTable';
 import _ from 'lodash';
-import { DownloadControls, remoteData } from 'cbioportal-frontend-commons';
+import {
+    DownloadControlOption,
+    DownloadControls,
+    remoteData,
+} from 'cbioportal-frontend-commons';
 import { getRemoteDataGroupStatus } from 'cbioportal-utils';
 import client from 'shared/api/cbioportalClientInstance';
 import {
@@ -60,6 +64,7 @@ import CategoryPlot, {
     CategoryPlotType,
 } from 'pages/groupComparison/CategoryPlot';
 import { OncoprintJS } from 'oncoprintjs';
+import { getServerConfig } from 'config/config';
 
 export interface IClinicalDataProps {
     store: ComparisonStore;
@@ -975,6 +980,10 @@ export default class ClinicalData extends React.Component<
                     dontFade={true}
                     type="button"
                     style={{ position: 'absolute', right: 0, top: 0 }}
+                    showDownload={
+                        getServerConfig().skin_hide_download_controls ===
+                        DownloadControlOption.SHOW_ALL
+                    }
                 />
             </div>
         );

diff --git a/src/pages/groupComparison/GroupComparisonMutationMapper.tsx b/src/pages/groupComparison/GroupComparisonMutationMapper.tsx
@@ -153,6 +153,12 @@ export default class GroupComparisonMutationMapper extends MutationMapper<
                 rowDataByProteinChange={this.rowDataByProteinChange}
                 initialSortColumn={'p-Value'}
                 initialSortDirection={'asc'}
+                customDriverName={this.props.customDriverName}
+                customDriverDescription={this.props.customDriverDescription}
+                customDriverTiersName={this.props.customDriverTiersName}
+                customDriverTiersDescription={
+                    this.props.customDriverTiersDescription
+                }
             />
         );
     }

diff --git a/src/pages/groupComparison/GroupComparisonMutationTable.tsx b/src/pages/groupComparison/GroupComparisonMutationTable.tsx
@@ -66,6 +66,8 @@ export default class GroupComparisonMutationTable extends MutationTable<
         ...MutationTable.defaultProps,
         columns: [
             MutationTableColumnType.ANNOTATION,
+            MutationTableColumnType.CUSTOM_DRIVER,
+            MutationTableColumnType.CUSTOM_DRIVER_TIER,
             MutationTableColumnType.MUTATION_STATUS,
             MutationTableColumnType.PROTEIN_CHANGE,
             MutationTableColumnType.MUTATION_TYPE,
@@ -357,6 +359,8 @@ export default class GroupComparisonMutationTable extends MutationTable<
         // order columns
         this._columns[MutationTableColumnType.PROTEIN_CHANGE].order = 10;
         this._columns[MutationTableColumnType.ANNOTATION].order = 20;
+        this._columns[MutationTableColumnType.CUSTOM_DRIVER].order = 25;
+        this._columns[MutationTableColumnType.CUSTOM_DRIVER_TIER].order = 26;
         this._columns[MutationTableColumnType.MUTATION_TYPE].order = 30;
         this._columns[MutationTableColumnType.NUM_MUTATED_GROUP_A].order = 40;
         this._columns[MutationTableColumnType.NUM_MUTATED_GROUP_B].order = 50;

diff --git a/src/pages/patientView/PatientViewPageTabs.tsx b/src/pages/patientView/PatientViewPageTabs.tsx
@@ -333,6 +333,7 @@ export function tabs(
                 onSelectGenePanel={pageComponent.toggleGenePanelModal}
                 mergeOncoKbIcons={pageComponent.mergeMutationTableOncoKbIcons}
                 onOncoKbIconToggle={pageComponent.handleOncoKbIconToggle}
+                enableOncoKb={getServerConfig().show_oncokb}
                 sampleIds={
                     sampleManager
                         ? sampleManager.getActiveSampleIdsInOrder()
@@ -342,6 +343,22 @@ export function tabs(
                     pageComponent.patientViewPageStore.namespaceColumnConfig
                         .structVar
                 }
+                customDriverName={
+                    getServerConfig()
+                        .oncoprint_custom_driver_annotation_binary_menu_label!
+                }
+                customDriverDescription={
+                    getServerConfig()
+                        .oncoprint_custom_driver_annotation_binary_menu_description!
+                }
+                customDriverTiersName={
+                    getServerConfig()
+                        .oncoprint_custom_driver_annotation_tiers_menu_label!
+                }
+                customDriverTiersDescription={
+                    getServerConfig()
+                        .oncoprint_custom_driver_annotation_tiers_menu_description!
+                }
             />
 
             <hr />
@@ -407,6 +424,22 @@ export function tabs(
                                     pageComponent.patientViewPageStore
                                         .namespaceColumnConfig.cna
                                 }
+                                customDriverName={
+                                    getServerConfig()
+                                        .oncoprint_custom_driver_annotation_binary_menu_label!
+                                }
+                                customDriverDescription={
+                                    getServerConfig()
+                                        .oncoprint_custom_driver_annotation_binary_menu_description!
+                                }
+                                customDriverTiersName={
+                                    getServerConfig()
+                                        .oncoprint_custom_driver_annotation_tiers_menu_label!
+                                }
+                                customDriverTiersDescription={
+                                    getServerConfig()
+                                        .oncoprint_custom_driver_annotation_tiers_menu_description!
+                                }
                             />
                         </If>
                     </div>
@@ -434,6 +467,22 @@ export function tabs(
                         pageComponent.mergeMutationTableOncoKbIcons
                     }
                     onOncoKbIconToggle={pageComponent.handleOncoKbIconToggle}
+                    customDriverName={
+                        getServerConfig()
+                            .oncoprint_custom_driver_annotation_binary_menu_label!
+                    }
+                    customDriverDescription={
+                        getServerConfig()
+                            .oncoprint_custom_driver_annotation_binary_menu_description!
+                    }
+                    customDriverTiersName={
+                        getServerConfig()
+                            .oncoprint_custom_driver_annotation_tiers_menu_label!
+                    }
+                    customDriverTiersDescription={
+                        getServerConfig()
+                            .oncoprint_custom_driver_annotation_tiers_menu_description!
+                    }
                 />
             </MSKTab>
         );