Implement Custom Tabs mechanism for Study View (#4776)

* Expose StudyViewPageStore to window object Allows custom tabs in study view to access store data. * Expose onMobxPromise function to windows object Needed for use in custom tab javascript files * Render custom tabs on Study View Page * Add study view custom tabs e2e-tests * Clarify name
cBioPortal · Dec 8, 2023 · 100f4b9 · 100f4b9
1 parent fb7a6e3
commit 100f4b9
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 8 deletions.
diff --git a/end-to-end-test/remote/specs/core/customTabs.spec.js b/end-to-end-test/remote/specs/core/customTabs.spec.js
@@ -260,8 +260,15 @@ function runTests(pageName, url, tabLocation) {
                 "merely switching tabs didn't call mount function"
             );
 
-            // the following two commands are inteded to trigger
-            // remount of MSKTabs and thus remount of custom tab
+            // For study page, I do not see a way to evoke a remount (e.g., by changing query params)
+            // I will just skip this test for study page by returning 'true' here.
+            if (tabLocation === 'STUDY_PAGE') {
+                assert(true);
+                return;
+            }
+
+            // the following two commands are intended to trigger
+            // remount of MSKTabs and thus remount of custom tab+
             // kinda annoying, i know
             switch (tabLocation) {
                 case 'RESULTS_PAGE':
@@ -278,6 +285,9 @@ function runTests(pageName, url, tabLocation) {
                 case 'COMPARISON_PAGE':
                     $("[data-test='groupSelectorButtonMSI/CIMP']").click();
                     break;
+                case 'STUDY_PAGE':
+                    // For study page, I do not see a way to evoke a remount (eg. by changing query params)
+                    break;
             }
 
             $('div=Second render').waitForDisplayed();
@@ -292,6 +302,8 @@ function runTests(pageName, url, tabLocation) {
 
 const resultsUrl = `${CBIOPORTAL_URL}/results?cancer_study_list=coadread_tcga_pub&cancer_study_id=coadread_tcga_pub&genetic_profile_ids_PROFILE_MUTATION_EXTENDED=coadread_tcga_pub_mutations&genetic_profile_ids_PROFILE_COPY_NUMBER_ALTERATION=coadread_tcga_pub_gistic&Z_SCORE_THRESHOLD=2.0&case_set_id=coadread_tcga_pub_nonhypermut&gene_list=KRAS%20NRAS%20BRAF`;
 
+const studyUrl = `${CBIOPORTAL_URL}/study?id=ucec_tcga_pub`;
+
 const patientUrl = `${CBIOPORTAL_URL}/patient?studyId=ucec_tcga_pub&caseId=TCGA-AP-A053#navCaseIds=ucec_tcga_pub:TCGA-AP-A053,ucec_tcga_pub:TCGA-BG-A0M8,ucec_tcga_pub:TCGA-BG-A0YV,ucec_tcga_pub:TCGA-BS-A0U8`;
 
 const comparisonUrl = `${CBIOPORTAL_URL}/comparison?comparisonId=61845a6ff8f71021ce56e22b`;
@@ -381,6 +393,8 @@ describe('Patient Cohort View Custom Tab Tests', () => {
 
 runTests('ResultsView', resultsUrl, 'RESULTS_PAGE');
 
+runTests('StudyView', studyUrl, 'STUDY_PAGE');
+
 runTests('PatientView', patientUrl, 'PATIENT_PAGE');
 
 runTests('ComparisonPage', comparisonUrl, 'COMPARISON_PAGE');
diff --git a/src/appBootstrapper.tsx b/src/appBootstrapper.tsx
@@ -27,7 +27,7 @@ import browser from 'bowser';
 import { setNetworkListener } from './shared/lib/ajaxQuiet';
 import { initializeTracking, sendToLoggly } from 'shared/lib/tracking';
 import superagentCache from 'superagent-cache';
-import { getBrowserWindow } from 'cbioportal-frontend-commons';
+import { getBrowserWindow, onMobxPromise } from 'cbioportal-frontend-commons';
 import { AppStore } from './AppStore';
 import { handleLongUrls } from 'shared/lib/handleLongUrls';
 import 'shared/polyfill/canvasToBlob';
@@ -290,6 +290,8 @@ $(document).ready(async () => {
     let initialServerConfig =
         browserWindow.rawServerConfig || (await fetchServerConfig());
 
+    getBrowserWindow().onMobxPromise = onMobxPromise;
+
     initializeServerConfiguration(initialServerConfig);
 
     initializeGenericAssayServerConfig();

diff --git a/src/pages/studyView/StudyViewPage.tsx b/src/pages/studyView/StudyViewPage.tsx
@@ -72,6 +72,11 @@ import { buildCBioPortalPageUrl } from 'shared/api/urls';
 import StudyViewPageSettingsMenu from 'pages/studyView/menu/StudyViewPageSettingsMenu';
 import { Tour } from 'tours';
 import QueryString from 'qs';
+import setWindowVariable from 'shared/lib/setWindowVariable';
+import {
+    buildCustomTabs,
+    prepareCustomTabConfigurations,
+} from 'shared/lib/customTabs/customTabHelpers';
 
 export interface IStudyViewPageProps {
     routing: any;
@@ -139,6 +144,9 @@ export default class StudyViewPage extends React.Component<
             this.urlWrapper
         );
 
+        // Expose store to window for use in custom tabs.
+        setWindowVariable('studyViewPageStore', this.store);
+
         const openResourceId =
             this.urlWrapper.tabId &&
             extractResourceIdFromTabId(this.urlWrapper.tabId);
@@ -255,6 +263,13 @@ export default class StudyViewPage extends React.Component<
         return filterJson;
     }
 
+    @computed get customTabsConfigs() {
+        return prepareCustomTabConfigurations(
+            getServerConfig().custom_tabs,
+            'STUDY_PAGE'
+        );
+    }
+
     @autobind
     private toolbarRef(ref: any) {
         this.toolbar = ref;
@@ -535,6 +550,10 @@ export default class StudyViewPage extends React.Component<
         },
     });
 
+    @computed get customTabs() {
+        return buildCustomTabs(this.customTabsConfigs);
+    }
+
     content() {
         return (
             <div className="studyView">
@@ -678,6 +697,7 @@ export default class StudyViewPage extends React.Component<
                                     </MSKTab>
 
                                     {this.resourceTabs.component}
+                                    {this.customTabs}
                                 </MSKTabs>
 
                                 <div

diff --git a/src/routes.tsx b/src/routes.tsx
@@ -252,14 +252,16 @@ function comparisonTabParamValidator() {
  * @param location
  */
 function customTabParamValidator(location: Location) {
-    const patientViewRegex = new RegExp(
+    const patientViewResourceTabRegex = new RegExp(
         `patient\/${PatientViewResourceTabPrefix}.+`
     );
-    const studyViewRegex = new RegExp(`study\/${StudyViewResourceTabPrefix}.+`);
+    const studyViewResourceTabRegex = new RegExp(
+        `study\/${StudyViewResourceTabPrefix}.+`
+    );
     const customTabRegex = /.+\/customTab\d/;
     return (
-        patientViewRegex.test(location.pathname) ||
-        studyViewRegex.test(location.pathname) ||
+        patientViewResourceTabRegex.test(location.pathname) ||
+        studyViewResourceTabRegex.test(location.pathname) ||
         customTabRegex.test(location.pathname)
     );
 }

diff --git a/src/shared/lib/customTabs/customTabHelpers.tsx b/src/shared/lib/customTabs/customTabHelpers.tsx
@@ -120,7 +120,7 @@ export function prepareCustomTabConfigurations(
             return t as ICustomTabConfiguration;
         });
 
-        // only show these on results_page
+        // Select appropriate tab configurations for the requested page.
         const customResultsTabs = custom_tabs.filter(
             (tab: ICustomTabConfiguration) => tab.location === pageLocation
         );