Add custom ns columns to struct var table

cBioPortal · Nov 21, 2022 · 11dd97e · 11dd97e
1 parent 2c35d41
commit 11dd97e
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 65 deletions.
diff --git a/end-to-end-test/local/specs/namespace-columns-in-cna-tables.spec.js b/end-to-end-test/local/specs/namespace-columns-in-cna-tables.spec.js
@@ -2,6 +2,14 @@ const assert = require('assert');
 const {
     goToUrlAndSetLocalStorageWithProperty,
 } = require('../../shared/specUtils');
+const {
+    namespaceColumnsAreNotDisplayed,
+    waitForTable,
+    clickColumnSelectionButton,
+    selectColumn,
+    namespaceColumnsAreDisplayed,
+    getRowByGene,
+} = require('./namespace-columns-utils');
 
 const CBIOPORTAL_URL = process.env.CBIOPORTAL_URL.replace(/\/$/, '');
 
@@ -45,39 +53,3 @@ describe('namespace columns in cna tables', function() {
         });
     });
 });
-
-function clickColumnSelectionButton(patientCnaTable) {
-    $(`[data-test=${patientCnaTable}]`)
-        .$('button*=Columns')
-        .click();
-}
-
-function selectColumn(namespaceColumn1) {
-    $(`[data-id="${namespaceColumn1}"]`).click();
-}
-
-waitForMutationTable = () => {
-    $('[data-test=LazyMobXTable]').waitForDisplayed();
-};
-
-waitForTable = table => {
-    $(`[data-test=${table}]`).waitForDisplayed();
-};
-
-namespaceColumnsAreDisplayed = columns => {
-    for (const column of columns) {
-        if (!$(`//span[text()='${column}']`).isDisplayed()) {
-            return false;
-        }
-    }
-    return true;
-};
-
-namespaceColumnsAreNotDisplayed = columns => {
-    return !namespaceColumnsAreDisplayed(columns);
-};
-
-getRowByGene = (tableName, gene) => {
-    const tableRows = $$(`[data-test="${tableName}"] tr`);
-    return tableRows.find(r => r.$('td=' + gene).isExisting());
-};
diff --git a/end-to-end-test/local/specs/namespace-columns-in-mutation-tables.spec.js b/end-to-end-test/local/specs/namespace-columns-in-mutation-tables.spec.js
@@ -2,6 +2,10 @@ const assert = require('assert');
 const {
     goToUrlAndSetLocalStorageWithProperty,
 } = require('../../shared/specUtils');
+const {
+    namespaceColumnsAreNotDisplayed,
+    namespaceColumnsAreDisplayed,
+} = require('./namespace-columns-utils');
 
 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`;
@@ -108,20 +112,6 @@ 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()

diff --git a/end-to-end-test/local/specs/namespace-columns-in-struct-var-tables.spec.js b/end-to-end-test/local/specs/namespace-columns-in-struct-var-tables.spec.js
@@ -0,0 +1,55 @@
+const assert = require('assert');
+const {
+    goToUrlAndSetLocalStorageWithProperty,
+} = require('../../shared/specUtils');
+const {
+    namespaceColumnsAreNotDisplayed,
+    waitForTable,
+    clickColumnSelectionButton,
+    selectColumn,
+    namespaceColumnsAreDisplayed,
+    getRowByGene,
+} = require('./namespace-columns-utils');
+
+const CBIOPORTAL_URL = process.env.CBIOPORTAL_URL.replace(/\/$/, '');
+
+describe('namespace columns in struct var tables', function() {
+    describe('patient view', () => {
+        const patientViewUrl = `${CBIOPORTAL_URL}/patient?studyId=study_es_0&caseId=TCGA-A2-A04P`;
+        const namespaceColumn1 = 'StructVarNs Column1';
+        const namespaceValue1 = 'value1';
+        const namespaceColumn2 = 'StructVarNs Column2';
+        const namespaceValue2 = 'value2';
+        const namespaceColumns = [namespaceColumn1, namespaceColumn2];
+        const patientStructVarTable = 'patientview-structural-variant-table';
+        const geneWithCustomNamespaceData = 'KIAA1549';
+
+        it('hides namespace columns when no property set', () => {
+            goToUrlAndSetLocalStorageWithProperty(patientViewUrl, true, {});
+            waitForTable(patientStructVarTable);
+            assert(namespaceColumnsAreNotDisplayed(namespaceColumns));
+        });
+
+        it('shows columns when column menu is used', () => {
+            clickColumnSelectionButton(patientStructVarTable);
+            selectColumn(namespaceColumn1);
+            selectColumn(namespaceColumn2);
+            clickColumnSelectionButton(patientStructVarTable);
+            assert(namespaceColumnsAreDisplayed(namespaceColumns));
+        });
+
+        /**
+         * Expected custom namespace columns to be shown
+         */
+        it('displays custom namespace data', () => {
+            const rowWithNamespaceData = getRowByGene(
+                patientStructVarTable,
+                geneWithCustomNamespaceData
+            );
+            assert(!!rowWithNamespaceData);
+            const text = rowWithNamespaceData.getText();
+            assert(text.includes(namespaceValue1));
+            assert(text.includes(namespaceValue2));
+        });
+    });
+});
diff --git a/end-to-end-test/local/specs/namespace-columns-utils.js b/end-to-end-test/local/specs/namespace-columns-utils.js
@@ -0,0 +1,40 @@
+function clickColumnSelectionButton(patientCnaTable) {
+    $(`[data-test=${patientCnaTable}]`)
+        .$('button*=Columns')
+        .click();
+}
+
+function selectColumn(namespaceColumn1) {
+    $(`[data-id="${namespaceColumn1}"]`).click();
+}
+
+waitForTable = table => {
+    $(`[data-test=${table}]`).waitForDisplayed();
+};
+
+namespaceColumnsAreDisplayed = columns => {
+    for (const column of columns) {
+        if (!$(`//span[text()='${column}']`).isDisplayed()) {
+            return false;
+        }
+    }
+    return true;
+};
+
+namespaceColumnsAreNotDisplayed = columns => {
+    return !namespaceColumnsAreDisplayed(columns);
+};
+
+getRowByGene = (tableName, gene) => {
+    const tableRows = $$(`[data-test="${tableName}"] tr`);
+    return tableRows.find(r => r.$('td=' + gene).isExisting());
+};
+
+module.exports = {
+    getRowByGene,
+    namespaceColumnsAreNotDisplayed,
+    namespaceColumnsAreDisplayed,
+    waitForTable,
+    selectColumn,
+    clickColumnSelectionButton,
+};
diff --git a/src/pages/patientView/PatientViewPageTabs.tsx b/src/pages/patientView/PatientViewPageTabs.tsx
@@ -339,6 +339,10 @@ export function tabs(
                         ? sampleManager.getActiveSampleIdsInOrder()
                         : []
                 }
+                namespaceColumns={
+                    pageComponent.patientViewPageStore.namespaceColumnConfig
+                        .structVar
+                }
             />
 
             <hr />
@@ -402,7 +406,7 @@ export function tabs(
                                 onRowClick={pageComponent.onCnaTableRowClick}
                                 namespaceColumns={
                                     pageComponent.patientViewPageStore
-                                        .namespaceColumnConfig
+                                        .namespaceColumnConfig.cna
                                 }
                             />
                         </If>

diff --git a/src/pages/patientView/clinicalInformation/PatientViewPageStore.ts b/src/pages/patientView/clinicalInformation/PatientViewPageStore.ts
@@ -199,6 +199,11 @@ import { buildNamespaceColumnConfig } from 'shared/components/namespaceColumns/n
 type PageMode = 'patient' | 'sample';
 type ResourceId = string;
 
+type NamespaceColumnConfigMap = {
+    cna: NamespaceColumnConfig;
+    structVar: NamespaceColumnConfig;
+};
+
 export async function checkForTissueImage(patientId: string): Promise<boolean> {
     if (/TCGA/.test(patientId) === false) {
         return false;
@@ -1353,8 +1358,13 @@ export class PatientViewPageStore {
         []
     );
 
-    @computed get namespaceColumnConfig(): NamespaceColumnConfig {
-        return buildNamespaceColumnConfig(this.discreteCNAData.result);
+    @computed get namespaceColumnConfig(): NamespaceColumnConfigMap {
+        return {
+            cna: buildNamespaceColumnConfig(this.discreteCNAData.result),
+            structVar: buildNamespaceColumnConfig(
+                this.structuralVariantData.result
+            ),
+        };
     }
 
     readonly molecularData = remoteData<NumericGeneMolecularData[]>(

diff --git a/src/pages/patientView/structuralVariant/StructuralVariantTableWrapper.tsx b/src/pages/patientView/structuralVariant/StructuralVariantTableWrapper.tsx
@@ -27,13 +27,16 @@ import { StructuralVariant } from 'cbioportal-ts-api-client';
 import { MutationStatus } from 'react-mutation-mapper';
 import { getSamplesProfiledStatus } from 'pages/patientView/PatientViewPageUtils';
 import SampleNotProfiledAlert from 'shared/components/SampleNotProfiledAlert';
+import { NamespaceColumnConfig } from 'shared/components/namespaceColumns/NamespaceColumnConfig';
+import { createNamespaceColumns } from 'shared/components/namespaceColumns/namespaceColumnsUtils';
 
 export interface IStructuralVariantTableWrapperProps {
     store: PatientViewPageStore;
     onSelectGenePanel?: (name: string) => void;
     mergeOncoKbIcons?: boolean;
     sampleIds: string[];
     onOncoKbIconToggle: (mergeIcons: boolean) => void;
+    namespaceColumns?: NamespaceColumnConfig;
 }
 
 type CNATableColumn = Column<StructuralVariant[]> & { order: number };
@@ -467,6 +470,10 @@ export default class StructuralVariantTableWrapper extends React.Component<
                 order: 80,
             });
 
+            columns.push(
+                ...createStructVarNamespaceColumns(this.props.namespaceColumns)
+            );
+
             return _.sortBy(columns, (c: CNATableColumn) => c.order);
         },
         default: [],
@@ -532,18 +539,21 @@ export default class StructuralVariantTableWrapper extends React.Component<
     });
 
     public render() {
-        return this.tableUI.component;
+        return (
+            <div data-test="patientview-structural-variant-table">
+                {this.tableUI.component}
+            </div>
+        );
     }
+}
 
-    // @action.bound
-    // private handleOncoKbIconModeToggle(mergeIcons: boolean) {
-    //     this.mergeOncoKbIcons = mergeIcons;
-    //     updateOncoKbIconStyle({ mergeIcons });
-    //
-    //     // we need to set the OncoKB width on the next render cycle, otherwise it is not updated yet
-    //     calculateOncoKbContentWidthOnNextFrame(
-    //         ANNOTATION_ELEMENT_ID,
-    //         width => (this.oncokbWidth = width || DEFAULT_ONCOKB_CONTENT_WIDTH)
-    //     );
-    // }
+function createStructVarNamespaceColumns(
+    config?: NamespaceColumnConfig
+): CNATableColumn[] {
+    const namespaceColumnRecords = createNamespaceColumns(config);
+    const namespaceColumns = Object.values(
+        namespaceColumnRecords
+    ) as CNATableColumn[];
+    namespaceColumns.forEach(c => (c.visible = false));
+    return namespaceColumns;
 }