Show namespace columns in MAF file in Mutation Table component

end-to-end-test/local/specs/namespace-columns-in-mutation-tables.spec.js

@@ -0,0 +1,132 @@
+const assert = require('assert');
+const {
+    goToUrlAndSetLocalStorageWithProperty,
+} = require('../../shared/specUtils');
+
+const CBIOPORTAL_URL = process.env.CBIOPORTAL_URL.replace(/\/$/, '');
+const resultsViewUrl = `${CBIOPORTAL_URL}/results/mutations?cancer_study_list=study_es_0&Z_SCORE_THRESHOLD=2.0&RPPA_SCORE_THRESHOLD=2.0&profileFilter=mutations%2Cfusion%2Cgistic&case_set_id=study_es_0_all&gene_list=BRCA1&geneset_list=%20&tab_index=tab_visualize&Action=Submit`;
+const patientViewUrl = `${CBIOPORTAL_URL}/patient?sampleId=TEST_SAMPLE_SOMATIC_HOMOZYGOUS&studyId=study_es_0`;
+
+describe('namespace columns in mutation tables', function() {
+    describe('results view', () => {
+        it('hides namespace columns when no property set', () => {
+            goToUrlAndSetLocalStorageWithProperty(resultsViewUrl, true, {});
+            waitForMutationTable();
+            assert(namespaceColumnsAreNotDisplayed());
+        });
+        it('shows columns when column menu is used', () => {
+            // Click on column button.
+            $('button*=Columns').click();
+            // Filter menu options.
+            $('[data-test=fixed-header-table-search-input]').setValue(
+                'zygosity'
+            );
+            $('[data-test=add-by-type]')
+                .$('div*=Zygosity')
+                .waitForDisplayed();
+            // Click namespace column checkboxes.
+            $('[data-test=add-by-type]')
+                .$$('div*=Zygosity')
+                .forEach(checkbox => checkbox.click());
+            $('button*=Columns').click();
+            assert(namespaceColumnsAreDisplayed());
+        });
+        it('shows namespace columns when property set', () => {
+            goToUrlAndSetLocalStorageWithProperty(resultsViewUrl, true, {
+                skin_mutation_table_namespace_column_show_by_default: true,
+            });
+            waitForMutationTable();
+            assert(namespaceColumnsAreDisplayed());
+        });
+        it('has filter icons', () => {
+            $("//span[text() = 'Zygosity Code']").click();
+            filterIconOfHeader(
+                "//span[text() = 'Zygosity Code']"
+            ).waitForDisplayed();
+            $("//span[text() = 'Zygosity Name']").click();
+            filterIconOfHeader(
+                "//span[text() = 'Zygosity Name']"
+            ).waitForDisplayed();
+        });
+        it('filters rows when using numerical filter menu', () => {
+            filterIconOfHeader("//span[text() = 'Zygosity Code']").click();
+            // Empty rows
+            var numberOfRowsBefore = numberOfTableRows();
+            $('#Zygosity_Code-lowerValue-box').setValue('2');
+            $('[data-test=numerical-filter-menu-remove-empty-rows]').click();
+            browser.waitUntil(() => numberOfTableRows() < numberOfRowsBefore);
+
+            // reset state
+            $('#Zygosity_Code-lowerValue-box').setValue('1');
+            $('[data-test=numerical-filter-menu-remove-empty-rows]').click();
+            browser.waitUntil(() => numberOfTableRows() === numberOfRowsBefore);
+        });
+        it('filters rows when using categorical filter menu', () => {
+            filterIconOfHeader("//span[text() = 'Zygosity Name']").click();
+            // Empty rows
+            var numberOfRowsBefore = numberOfTableRows();
+            $('[data-test=categorical-filter-menu-search-input]').setValue(
+                'Homozygous'
+            );
+            browser.waitUntil(() => numberOfTableRows() < numberOfRowsBefore);
+        });
+    });
+    describe('patient view', () => {
+        it('hides namespace columns when no property set', () => {
+            goToUrlAndSetLocalStorageWithProperty(patientViewUrl, true, {});
+            waitForPatientViewMutationTable();
+            assert(namespaceColumnsAreNotDisplayed());
+        });
+        it('shows columns when column menu is used', () => {
+            // Click on column button.
+            $('[data-test=patientview-mutation-table]')
+                .$('button*=Columns')
+                .click();
+            // Click namespace column checkboxes.
+            $('[data-id="Zygosity Code"]').click();
+            $('[data-id="Zygosity Name"]').click();
+            $('[data-test=patientview-mutation-table]')
+                .$('button*=Columns')
+                .click();
+            assert(namespaceColumnsAreDisplayed());
+        });
+        it('shows namespace columns when property set', () => {
+            goToUrlAndSetLocalStorageWithProperty(patientViewUrl, true, {
+                skin_mutation_table_namespace_column_show_by_default: true,
+            });
+            waitForPatientViewMutationTable();
+            assert(namespaceColumnsAreDisplayed());
+        });
+    });
+});
+
+waitForMutationTable = () => {
+    $('[data-test=LazyMobXTable]').waitForDisplayed();
+};
+
+waitForPatientViewMutationTable = () => {
+    $('[data-test=patientview-mutation-table]').waitForDisplayed();
+};
+
+namespaceColumnsAreDisplayed = () => {
+    return (
+        $("//span[text() = 'Zygosity Code']").isDisplayed() &&
+        $("//span[text() = 'Zygosity Name']").isDisplayed()
+    );
+};
+
+namespaceColumnsAreNotDisplayed = () => {
+    return !(
+        $("//span[text() = 'Zygosity Code']").isDisplayed() &&
+        $("//span[text() = 'Zygosity Name']").isDisplayed()
+    );
+};
+
+filterIconOfHeader = selector => {
+    return $(selector)
+        .parentElement()
+        .parentElement()
+        .$('.fa-filter');
+};
+
+numberOfTableRows = () => $$('.lazy-mobx-table tr').length;

end-to-end-test/remote/specs/core/mutationTable.spec.js

@@ -9,6 +9,7 @@ var {
 } = require('../../../shared/specUtils');
 
 const CBIOPORTAL_URL = process.env.CBIOPORTAL_URL.replace(/\/$/, '');
+const RESULTS_MUTATION_TABLE_URL = `${CBIOPORTAL_URL}/results/mutations?Action=Submit&Z_SCORE_THRESHOLD=1.0&cancer_study_id=gbm_tcga_pub&cancer_study_list=gbm_tcga_pub&case_set_id=gbm_tcga_pub_sequenced&clinicallist=PROFILED_IN_gbm_tcga_pub_cna_rae&gene_list=TP53%20MDM2%20MDM4&gene_set_choice=user-defined_list&genetic_profile_ids_PROFILE_COPY_NUMBER_ALTERATION=gbm_tcga_pub_cna_rae&genetic_profile_ids_PROFILE_MUTATION_EXTENDED=gbm_tcga_pub_mutations&show_samples=false`;
 
 function waitForGenomeNexusAnnotation() {
     browser.pause(5000); // wait for annotation
@@ -19,11 +20,28 @@ describe('Mutation Table', function() {
         goToUrlAndSetLocalStorage(`${CBIOPORTAL_URL}`);
     });
 
-    describe('try getting exon and hgvsc info from genome nexus', () => {
+    describe('basic mutation table functions', () => {
         before(() => {
-            var url = `${CBIOPORTAL_URL}/results/mutations?Action=Submit&Z_SCORE_THRESHOLD=1.0&cancer_study_id=gbm_tcga_pub&cancer_study_list=gbm_tcga_pub&case_set_id=gbm_tcga_pub_sequenced&clinicallist=PROFILED_IN_gbm_tcga_pub_cna_rae&gene_list=TP53%20MDM2%20MDM4&gene_set_choice=user-defined_list&genetic_profile_ids_PROFILE_COPY_NUMBER_ALTERATION=gbm_tcga_pub_cna_rae&genetic_profile_ids_PROFILE_MUTATION_EXTENDED=gbm_tcga_pub_mutations&show_samples=false`;
+            goToUrlAndSetLocalStorage(RESULTS_MUTATION_TABLE_URL);
+            // mutations table should be visiable after oncokb icon shows up,
+            // also need to wait for mutations to be sorted properly
+            $(
+                'tr:nth-child(1) [data-test=oncogenic-icon-image]'
+            ).waitForDisplayed({ timeout: 30000 });
+        });
 
-            goToUrlAndSetLocalStorage(url);
+        it('filters table with search box', () => {
+            var searchInput = '[data-test=table-search-input]';
+            var numberOfRowsBefore = $$('tr').length;
+            $(searchInput).setValue('TCGA-02-0010-01');
+            browser.waitUntil(() => $$('tr').length < numberOfRowsBefore);
+            assert($$('tr').length < numberOfRowsBefore);
+        });
+    });
+
+    describe('try getting exon and hgvsc info from genome nexus', () => {
+        before(() => {
+            goToUrlAndSetLocalStorage(RESULTS_MUTATION_TABLE_URL);
             // mutations table should be visiable after oncokb icon shows up,
             // also need to wait for mutations to be sorted properly
             $(

env/rfc56_annot_settings_menu.sh → env/namespacecolumns_in_mutationtable.sh

@@ -1,2 +1,3 @@
 export CBIOPORTAL_URL="https://www.cbioportal.org"
 export GENOME_NEXUS_URL="https://www.genomenexus.org"
+

src/config/IAppConfig.ts

@@ -155,4 +155,5 @@ export interface IServerConfig {
     referenceGenomeVersion: string;
     skin_home_page_show_unauthorized_studies: boolean;
     skin_home_page_unauthorized_studies_global_message: string;
+    skin_mutation_table_namespace_column_show_by_default: boolean;
 }

src/pages/patientView/PatientViewPage.tsx

@@ -80,6 +80,8 @@ import ClinicalEventsTables from './timeline2/ClinicalEventsTables';
 import MutationalSignaturesContainer from './mutationalSignatures/MutationalSignaturesContainer';
 import SampleSummaryList from './sampleHeader/SampleSummaryList';
 import { updateOncoKbIconStyle } from 'shared/lib/AnnotationColumnUtils';
+import { ExtendedMutationTableColumnType } from 'shared/components/mutationTable/MutationTable';
+import { extractColumnNames } from 'shared/components/mutationMapper/MutationMapperUtils';
 
 export interface IPatientViewPageProps {
     params: any; // react route
@@ -553,6 +555,16 @@ export default class PatientViewPage extends React.Component<
         this.patientViewPageStore.setMutationalSignaturesVersion(version);
     }
 
+    @computed get columns(): ExtendedMutationTableColumnType[] {
+        const namespaceColumnNames = extractColumnNames(
+            this.dataStore.namespaceColumnConfig
+        );
+        return _.concat(
+            PatientViewMutationTable.defaultProps.columns,
+            namespaceColumnNames
+        );
+    }
+
     public render() {
         let sampleManager: SampleManager | null = null;
         if (this.patientViewPageStore.sampleManager.isComplete) {
@@ -1220,6 +1232,11 @@ export default class PatientViewPage extends React.Component<
                                                             .patientViewPageStore
                                                             .existsSomeMutationWithAscnProperty
                                                     }
+                                                    namespaceColumns={
+                                                        this.dataStore
+                                                            .namespaceColumnConfig
+                                                    }
+                                                    columns={this.columns}
                                                 />
                                             </div>
                                         )}

src/pages/patientView/mutation/PatientViewMutationTable.tsx

@@ -3,6 +3,7 @@ import { computed, makeObservable } from 'mobx';
 import {
     default as MutationTable,
     IMutationTableProps,
+    MutationTableColumn,
     MutationTableColumnType,
 } from 'shared/components/mutationTable/MutationTable';
 import SampleManager from '../SampleManager';
@@ -21,6 +22,8 @@ import { getDefaultClonalColumnDefinition } from 'shared/components/mutationTabl
 import { getDefaultExpectedAltCopiesColumnDefinition } from 'shared/components/mutationTable/column/expectedAltCopies/ExpectedAltCopiesColumnFormatter';
 import { ASCNAttributes } from 'shared/enums/ASCNEnums';
 import AnnotationHeader from 'shared/components/mutationTable/column/annotation/AnnotationHeader';
+import _ from 'lodash';
+import { createNamespaceColumns } from 'shared/components/mutationTable/MutationTableUtils';
 
 export interface IPatientViewMutationTableProps extends IMutationTableProps {
     sampleManager: SampleManager | null;
@@ -385,6 +388,17 @@ export default class PatientViewMutationTable extends MutationTable<
                 this.getSamples().length > 1
             );
         };
+
+        // generate namespace columns
+        const namespaceColumns = createNamespaceColumns(
+            this.props.namespaceColumns
+        );
+        _.forIn(
+            namespaceColumns,
+            (column: MutationTableColumn, columnName: string) => {
+                this._columns[columnName] = column;
+            }
+        );
     }
 
     @computed private get hasUncalledMutations(): boolean {

src/pages/patientView/mutation/PatientViewMutationsDataStore.ts

@@ -3,6 +3,8 @@ import { Mutation } from 'cbioportal-ts-api-client';
 import { action, computed, observable, makeObservable } from 'mobx';
 import _ from 'lodash';
 import PatientViewUrlWrapper from '../PatientViewUrlWrapper';
+import { NamespaceColumnConfig } from 'shared/components/mutationTable/MutationTable';
+import { buildNamespaceColumnConfig } from 'shared/components/mutationMapper/MutationMapperUtils';
 
 function mutationMatch(d: Mutation[], id: Mutation) {
     return (
@@ -86,6 +88,10 @@ export default class PatientViewMutationsDataStore extends SimpleGetterLazyMobXT
         return this.selectedMutationsMap.has(mutationIdKey(m));
     }
 
+    @computed get namespaceColumnConfig(): NamespaceColumnConfig {
+        return buildNamespaceColumnConfig(_.flatten(this.allData));
+    }
+
     protected getSortedFilteredData = () => {
         const filterStringUpper = this.filterString.toUpperCase();
         const filterStringLower = this.filterString.toLowerCase();

src/pages/patientView/mutation/PatientViewMutationsTab.tsx

@@ -21,6 +21,13 @@ import WindowStore from '../../../shared/components/window/WindowStore';
 import VAFChartWrapper from 'pages/patientView/timeline2/VAFChartWrapper';
 import TimelineWrapper from 'pages/patientView/timeline2/TimelineWrapper';
 import VAFChartWrapperStore from '../timeline2/VAFChartWrapperStore';
+import { ExtendedMutationTableColumnType } from 'shared/components/mutationTable/MutationTable';
+import _ from 'lodash';
+import {
+    createNamespaceColumnName,
+    extractColumnNames,
+} from 'shared/components/mutationMapper/MutationMapperUtils';
+import ResultsViewMutationTable from 'pages/resultsView/mutation/ResultsViewMutationTable';
 
 export interface IPatientViewMutationsTabProps {
     patientViewPageStore: PatientViewPageStore;
@@ -349,11 +356,23 @@ export default class PatientViewMutationsTab extends React.Component<
                         this.props.patientViewPageStore
                             .existsSomeMutationWithAscnProperty
                     }
+                    namespaceColumns={this.dataStore.namespaceColumnConfig}
+                    columns={this.columns}
                 />
             </div>
         ),
     });
 
+    @computed get columns(): ExtendedMutationTableColumnType[] {
+        const namespaceColumnNames = extractColumnNames(
+            this.dataStore.namespaceColumnConfig
+        );
+        return _.concat(
+            PatientViewMutationTable.defaultProps.columns,
+            namespaceColumnNames
+        );
+    }
+
     readonly timeline = MakeMobxView({
         await: () => [this.props.patientViewPageStore.clinicalEvents],
         render: () => {

src/pages/resultsView/mutation/ResultsViewMutationMapper.tsx

@@ -42,6 +42,12 @@ import {
     getPatientSampleSummary,
     submitToStudyViewPage,
 } from '../querySummary/QuerySummaryUtils';
+import { ExtendedMutationTableColumnType } from 'shared/components/mutationTable/MutationTable';
+import {
+    buildNamespaceColumnConfig,
+    createNamespaceColumnName,
+    extractColumnNames,
+} from 'shared/components/mutationMapper/MutationMapperUtils';
 
 export interface IResultsViewMutationMapperProps extends IMutationMapperProps {
     store: ResultsViewMutationMapperStore;
@@ -251,10 +257,22 @@ export default class ResultsViewMutationMapper extends MutationMapper<
                     this.columnToHeaderFilterIconModal
                 }
                 deactivateColumnFilter={this.deactivateColumnFilter}
+                namespaceColumns={this.props.store.namespaceColumnConfig}
+                columns={this.columns}
             />
         );
     }
 
+    @computed get columns(): ExtendedMutationTableColumnType[] {
+        const namespaceColumnNames = extractColumnNames(
+            this.props.store.namespaceColumnConfig
+        );
+        return _.concat(
+            ResultsViewMutationTable.defaultProps.columns,
+            namespaceColumnNames
+        );
+    }
+
     protected get mutationTable(): JSX.Element | null {
         return (
             <span>
@@ -598,6 +616,7 @@ export default class ResultsViewMutationMapper extends MutationMapper<
                                         );
                                     }
                                 }}
+                                data-test="numerical-filter-menu-remove-empty-rows"
                             />
                             {'Hide empty values'}
                         </label>