Fix hrefs on MSKTabs (for opening directly in new tab)

cBioPortal · Feb 10, 2022 · d200371 · d200371
1 parent 51e3651
commit d200371
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 17 deletions.
diff --git a/src/pages/groupComparison/GroupComparisonPage.tsx b/src/pages/groupComparison/GroupComparisonPage.tsx
@@ -94,15 +94,6 @@ export default class GroupComparisonPage extends React.Component<
         return GENOMIC_ALTERATIONS_TAB_NAME;
     }
 
-    @autobind
-    private getTabHref(tabId: string) {
-        return URL.format({
-            pathname: tabId,
-            query: this.props.routing.query,
-            hash: this.props.routing.location.hash,
-        });
-    }
-
     @computed get selectedGroupsKey() {
         // for components which should remount whenever selected groups change
         const selectedGroups = this.store._selectedGroups.result || [];
@@ -135,7 +126,7 @@ export default class GroupComparisonPage extends React.Component<
                     activeTabId={this.urlWrapper.tabId}
                     onTabClick={this.urlWrapper.setTabId}
                     className="primaryTabs mainTabs"
-                    getTabHref={this.getTabHref}
+                    hrefRoot={buildCBioPortalPageUrl('comparison')}
                 >
                     <MSKTab id={GroupComparisonTab.OVERLAP} linkText="Overlap">
                         <Overlap

diff --git a/src/pages/resultsView/ResultsViewPage.tsx b/src/pages/resultsView/ResultsViewPage.tsx
@@ -63,6 +63,7 @@ import UserMessager, {
     IUserMessage,
 } from 'shared/components/userMessager/UserMessage';
 import { HelpWidget } from 'shared/components/HelpWidget/HelpWidget';
+import { buildCBioPortalPageUrl } from 'shared/api/urls';
 
 export function initStore(
     appStore: AppStore,
@@ -541,7 +542,7 @@ export default class ResultsViewPage extends React.Component<
     @autobind
     private getTabHref(tabId: string) {
         return URL.format({
-            pathname: tabId,
+            pathname: buildCBioPortalPageUrl(`./results/${tabId}`),
             query: this.props.routing.query,
             hash: this.props.routing.location.hash,
         });
@@ -696,7 +697,9 @@ export default class ResultsViewPage extends React.Component<
                                             )
                                         }
                                         className="mainTabs"
-                                        getTabHref={this.getTabHref}
+                                        hrefRoot={buildCBioPortalPageUrl(
+                                            'results'
+                                        )}
                                         contentWindowExtra={
                                             <HelpWidget
                                                 path={

diff --git a/src/pages/studyView/StudyViewPage.tsx b/src/pages/studyView/StudyViewPage.tsx
@@ -67,6 +67,8 @@ import SettingsMenu from 'shared/components/driverAnnotations/SettingsMenu';
 import ErrorScreen from 'shared/components/errorScreen/ErrorScreen';
 import { CustomChartData } from 'shared/api/session-service/sessionServiceModels';
 import { HelpWidget } from 'shared/components/HelpWidget/HelpWidget';
+import URL from 'url';
+import { buildCBioPortalPageUrl } from 'shared/api/urls';
 
 export interface IStudyViewPageProps {
     routing: any;
@@ -560,6 +562,7 @@ export default class StudyViewPage extends React.Component<
                                             }
                                         />
                                     }
+                                    hrefRoot={buildCBioPortalPageUrl('study')}
                                 >
                                     <MSKTab
                                         key={0}

diff --git a/src/shared/components/MSKTabs/MSKTabs.tsx b/src/shared/components/MSKTabs/MSKTabs.tsx
@@ -10,6 +10,7 @@ import LoadingIndicator from '../loadingIndicator/LoadingIndicator';
 import {
     action,
     autorun,
+    computed,
     IReactionDisposer,
     makeObservable,
     observable,
@@ -20,6 +21,9 @@ import { observer } from 'mobx-react';
 import { JsxElement } from 'typescript';
 import MemoizedHandlerFactory from '../../lib/MemoizedHandlerFactory';
 import WindowStore from '../window/WindowStore';
+import URL from 'url';
+import { buildCBioPortalPageUrl } from 'shared/api/urls';
+import { getBrowserWindow } from 'cbioportal-frontend-commons';
 
 export interface IMSKTabProps {
     inactive?: boolean;
@@ -106,14 +110,14 @@ interface IMSKTabsProps {
     id?: string;
     activeTabId?: string;
     onTabClick?: (tabId: string, datum: any) => void;
-    getTabHref?: (tabId: string) => string;
     getPaginationWidth?: () => number;
     // only used when pagination is true to style arrows
     arrowStyle?: { [k: string]: string | number | boolean };
     tabButtonStyle?: string;
     unmountOnHide?: boolean;
     loadingComponent?: JSX.Element;
     contentWindowExtra?: JSX.Element;
+    hrefRoot?: string;
 }
 
 @observer
@@ -327,6 +331,19 @@ export class MSKTabs extends React.Component<IMSKTabsProps> {
         );
     }
 
+    private getTabHref(tabId: string) {
+        if (this.props.hrefRoot) {
+            return URL.format({
+                pathname: `${this.props.hrefRoot}/${tabId}`,
+                search: getBrowserWindow().location.search,
+                hash: getBrowserWindow().location.hash,
+            });
+        } else {
+            // will disable without losing styles
+            return undefined;
+        }
+    }
+
     protected tabPages(
         children: React.ReactElement<IMSKTabProps>[],
         effectiveActiveTab: string
@@ -370,6 +387,8 @@ export class MSKTabs extends React.Component<IMSKTabsProps> {
                     );
                 }
 
+                const href = this.getTabHref(tab.props.id);
+
                 pages[currentPage - 1].push(
                     <li
                         key={tab.props.id}
@@ -384,10 +403,7 @@ export class MSKTabs extends React.Component<IMSKTabsProps> {
                                 tab.props.anchorClassName
                             )}
                             onClick={this.tabClickHandlers(tab.props)}
-                            href={
-                                this.props.getTabHref &&
-                                this.props.getTabHref(tab.props.id)
-                            }
+                            href={href}
                             style={tab.props.anchorStyle}
                         >
                             {tab.props.linkText}