expose component renderers for legacy project

my-index.ejs

@@ -4,7 +4,8 @@
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
     <title><%= htmlWebpackPlugin.options.title %></title>
     <script>
-        window.defaultRoute = "/dataset";
+        //window.devContext = true;
+        window.defaultRoute = "/patient";
         // Set default API in case none is specified in .env
         __API_ROOT__ = 'cbioportal-rc.herokuapp.com/api';
     </script>

src/pages/patientView/PatientViewPage.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
-
+import { Component } from 'react';
 import ClinicalInformationContainer from './clinicalInformation/ClinicalInformationContainer';
 import PatientHeaderUnconnected from './patientHeader/PatientHeader';
 import {IPatientHeaderProps} from './patientHeader/PatientHeader';
 import {RootState} from "../../redux/rootReducer";
+import PageDecorator from '../../shared/components/PageDecorator/PageDecorator';
 
 interface IPatientViewPageProps {
     store?: RootState;
@@ -35,6 +36,28 @@ export default class PatientViewPage extends React.Component<IPatientViewPagePro
                 clinicalDiv
             );
         }
+
+
+        this.exposeComponentRenderersToParentScript();
+
+
+    }
+
+    // this gives the parent (legacy) cbioportal code control to mount
+    // these components whenever and wherever it wants
+    exposeComponentRenderersToParentScript(){
+
+        const win: any = window;
+
+        if(win) {
+            win.renderPatientView = (mountNode: HTMLElement): void => {
+                ReactDOM.render(
+                    <ClinicalInformationContainer store={ this.props.store } />,
+                    mountNode
+                );
+            };
+        }
+
     }
 
     public render() {

src/pages/patientView/clinicalInformation/ClinicalInformationContainer.tsx

@@ -15,6 +15,7 @@ export interface IClinicalInformationContainerProps {
     nodes?: TODO;//PDXNode[];
     loadClinicalInformationTableData?: () => void;
     setTab?: (activeTab:number) => void;
+    store?: any;
 };
 
 @Connector.decorator
@@ -29,6 +30,7 @@ export default class ClinicalInformationContainer extends React.Component<IClini
         return (
             <div>
                 <ClinicalInformationPatientTable showTitleBar={true} data={this.props.patient && this.props.patient.clinicalData} />
+                <hr />
                 <ClinicalInformationSamples samples={this.props.samples} />
             </div>
         );
@@ -43,7 +45,7 @@ export default class ClinicalInformationContainer extends React.Component<IClini
                 return <div>{ this.buildTabs() }</div>;
 
             case 'error':
-                return <div>There was an error.</div>;
+                return <div>There was a loading error. Please try refreshing your browser.</div>;
 
             default:
                 return <div />;

src/shared/components/PageDecorator/PageDecorator.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export default function (component: typeof React.Component): any {
+    return class extends component<any, any> {
+        render() {
+            if ((window as any).devContext) {
+                return super.render();
+            } else {
+                return <span style={{ display:'none' }} />;
+            }
+        }
+    };
+};