Create feedback form for trials

src/pages/patientView/PatientViewPage.tsx

@@ -626,7 +626,6 @@ export default class PatientViewPage extends React.Component<IPatientViewPagePro
                     {
                         this.shouldShowTrialMatch(this.patientViewPageStore) && (
                             <MSKTab key={7} id="trialMatchTab" linkText="Matched Trials">
-                                <p style={{marginBottom: '0'}}>Curated genomic and clinical criteria from open clinical trials at Memorial Sloan Kettering. Please <a href="mailto:team@oncokb.org">contact us</a> if you have any questions.</p>
                                 <TrialMatchTable
                                     sampleManager={sampleManager}
                                     detailedTrialMatches={this.patientViewPageStore.detailedTrialMatches.result}

src/pages/patientView/trialMatch/TrialMatchFeedback.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import * as _ from 'lodash';
+import {Modal} from "react-bootstrap";
+
+interface ITrialMatchFeedbackProps {
+    show: boolean;
+    isTrialFeedback?: boolean;
+    title: string;
+    userEmailAddress: string;
+    nctId?: string;
+    protocolNo?: string;
+    onHide: () => void;
+}
+
+export default class TrialMatchFeedback extends React.Component<ITrialMatchFeedbackProps, {}> {
+    public render()
+    {
+        let src = '';
+        if (!_.isUndefined(this.props.isTrialFeedback) && this.props.isTrialFeedback) {
+            const url = "https://docs.google.com/forms/d/e/1FAIpQLSfcoLRG0iWO_qUb4hfzWFQ1toP575EKCTwqPcXE9DmMzuS34w/viewform";
+            const nctIdParam = `entry.1070287537=${this.props.nctId || ''}`;
+            const protocolNoParam = `entry.699867040=${this.props.protocolNo || ''}`;
+            const userParam = `entry.1655318994=${this.props.userEmailAddress || ''}`;
+            const uriParam = `entry.1782078941=${encodeURIComponent(window.location.href)}`;
+            src = `${url}?${userParam}&${uriParam}&${nctIdParam}&${protocolNoParam}&embedded=true`;
+        } else {
+            const url = "https://docs.google.com/forms/d/e/1FAIpQLSes1WuMattmo_aT8-34LaPRTC47vVzvdWMgYZ5tSuw8EHoLZw/viewform";
+            const userParam = `entry.251841421=${this.props.userEmailAddress || ''}`;
+            const uriParam = `entry.1295500928=${encodeURIComponent(window.location.href)}`;
+            src = `${url}?${userParam}&${uriParam}&embedded=true`;
+        }
+
+        return (
+            <Modal show={this.props.show} onHide={this.props.onHide}>
+                <Modal.Header closeButton>
+                    <Modal.Title>{this.props.title}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <iframe
+                        src={src}
+                        style={{width:550, height:700, border:"none", marginLeft:"10px"}}
+                        marginHeight={0}
+                        marginWidth={0}
+                    >
+                        <i className="fa fa-spinner fa-pulse fa-2x" />
+                    </iframe>
+                </Modal.Body>
+            </Modal>
+        );
+    }
+}

src/pages/patientView/trialMatch/TrialMatchTable.tsx

@@ -6,11 +6,14 @@ import {
     IClinicalGroupMatch, IGenomicGroupMatch, IGenomicMatch, IDetailedTrialMatch, IArmMatch, IGenomicMatchType
 } from "../../../shared/model/MatchMiner";
 import styles from './style/trialMatch.module.scss';
-import { computed } from "mobx";
+import { computed, observable } from "mobx";
 import LazyMobXTable from "../../../shared/components/lazyMobXTable/LazyMobXTable";
 import SampleManager from "../SampleManager";
 import DefaultTooltip, { placeArrowBottomLeft } from "../../../public-lib/components/defaultTooltip/DefaultTooltip";
 import { getAgeRangeDisplay } from "./TrialMatchTableUtils";
+import TrialMatchFeedback from "./TrialMatchFeedback";
+import AppConfig from 'appConfig';
+import { Button } from "react-bootstrap";
 
 export type ITrialMatchProps = {
     sampleManager: SampleManager | null;
@@ -44,6 +47,9 @@ export default class TrialMatchTable extends React.Component<ITrialMatchProps> {
         };
     }
 
+    @observable showTrialFeedback = false;
+    @observable showGeneralFeedback = false;
+
     private _columns = [{
         name: ColumnKey.TITLE,
         render: (trial: IDetailedTrialMatch) => (
@@ -88,8 +94,10 @@ export default class TrialMatchTable extends React.Component<ITrialMatchProps> {
                                 <div>
                                     {armMatch.matches.map((clinicalGroupMatch: IClinicalGroupMatch, cgIndex:number) => (
                                         <div className={styles.criteriaContainer}>
-                                            {clinicalGroupMatch.matches && this.getGenomicMatch(clinicalGroupMatch.matches)}
-                                            {clinicalGroupMatch.notMatches && this.getGenomicNotMatch(clinicalGroupMatch.notMatches)}
+                                            <div className={styles.firstLeft}>
+                                                {clinicalGroupMatch.matches && this.getGenomicMatch(clinicalGroupMatch.matches)}
+                                                {clinicalGroupMatch.notMatches && this.getGenomicNotMatch(clinicalGroupMatch.notMatches)}
+                                            </div>
                                             {this.getClinicalMatch(clinicalGroupMatch)}
                                             <If condition={cgIndex < armMatch.matches.length - 1}><hr className={styles.criteriaHr}/></If>
                                         </div>
@@ -118,8 +126,22 @@ export default class TrialMatchTable extends React.Component<ITrialMatchProps> {
     }, {
         name: ColumnKey.STATUS,
         render: (trial: IDetailedTrialMatch) => (
-            <div className={styles.statusButton}>
-                <a target="_blank" href={"https://www.mskcc.org/cancer-care/clinical-trials/" + trial.protocolNo}><span className={styles.statusBackground}>{trial.status}</span></a>
+            <div className={styles.statusContainer}>
+                <a target="_blank" href={"https://www.mskcc.org/cancer-care/clinical-trials/" + trial.protocolNo}>
+                    <span className={styles.statusBackground}>{trial.status}</span>
+                </a>
+                <span className={styles.feedback}>
+                    <Button type="button" className={"btn btn-default btn-sm btn-xs " + styles.feedbackButton} onClick={() => this.showTrialFeedback=true}>Feedback</Button>
+                    <TrialMatchFeedback
+                        show={this.showTrialFeedback}
+                        onHide={() => this.showTrialFeedback = false}
+                        isTrialFeedback={true}
+                        title="OncoKB Matched Trial Feedback"
+                        userEmailAddress={AppConfig.serverConfig.user_email_address}
+                        nctId={trial.nctId}
+                        protocolNo={trial.protocolNo}
+                    />
+                </span>
             </div>
         ),
         sortBy: (trial: IDetailedTrialMatch) => trial.status,
@@ -176,7 +198,7 @@ export default class TrialMatchTable extends React.Component<ITrialMatchProps> {
 
     public getGenomicMatch(matches: IGenomicMatchType) {
         return (
-            <div className={styles.firstLeft}>
+            <React.Fragment>
                 {matches.MUTATION.map((genomicGroupMatch: IGenomicGroupMatch) => (
                     <div>
                         <span style={{'marginRight': 5}}><b>{genomicGroupMatch.patientGenomic!.trueHugoSymbol}</b> {genomicGroupMatch.patientGenomic!.trueProteinChange}</span>
@@ -203,7 +225,7 @@ export default class TrialMatchTable extends React.Component<ITrialMatchProps> {
                         {this.getGenomicAlteration(genomicGroupMatch.genomicAlteration)}
                     </div>
                 ))}
-            </div>
+            </React.Fragment>
         );
     }
 
@@ -216,7 +238,7 @@ export default class TrialMatchTable extends React.Component<ITrialMatchProps> {
             mutationAndCnagenemicAlterations = mutationAndCnagenemicAlterations.concat(notMatches.CNA[0].genomicAlteration);
         }
         return (
-            <div className={styles.firstLeft}>
+            <React.Fragment>
                 { mutationAndCnagenemicAlterations.length > 0 &&
                 <div>
                     <span className={styles.genomicSpan}>{this.getDescriptionForNotMatches(mutationAndCnagenemicAlterations, 3, 'Negative for alterations in', '')}</span>
@@ -246,7 +268,7 @@ export default class TrialMatchTable extends React.Component<ITrialMatchProps> {
                     </DefaultTooltip>
                 </div>
                 }
-            </div>
+            </React.Fragment>
         );
     }
 
@@ -306,6 +328,13 @@ export default class TrialMatchTable extends React.Component<ITrialMatchProps> {
     render() {
         return (
             <div>
+                <p style={{marginBottom: '0'}}>Curated genomic and clinical criteria from open clinical trials at Memorial Sloan Kettering. Please <a href="mailto:team@oncokb.org">contact us</a> or submit <a onClick={() => this.showGeneralFeedback=true}>feedback form</a> if you have any questions.</p>
+                <TrialMatchFeedback
+                    show={this.showGeneralFeedback}
+                    onHide={() => this.showGeneralFeedback = false}
+                    title="OncoKB Matched Trials General Feedback"
+                    userEmailAddress={AppConfig.serverConfig.user_email_address}
+                />
                 <TrialMatchTableComponent
                     data={this.props.detailedTrialMatches}
                     columns={this._columns}

src/pages/patientView/trialMatch/style/trialMatch.module.scss

@@ -83,10 +83,20 @@
   text-align: right;
   font-size: 13px;
 }
-.statusButton {
+.statusContainer {
   margin: 20% 0 20% 0;
 
   a:hover {
     text-decoration: none;
   }
 }
+.feedback {
+  font-size: 12px;
+
+  .feedbackButton {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 10px;
+  }
+}

src/shared/api/MatchMinerAPI.ts

@@ -1,5 +1,4 @@
 import * as request from 'superagent';
-import * as _ from 'lodash';
 import { ITrial, ITrialMatch } from "shared/model/MatchMiner.ts";
 import { buildCBioPortalAPIUrl } from "./urls";