Merge remote-tracking branch 'origin/master' into release-3.2.0

Former-commit-id: 305b926461c8c36dcac8f9390d60c0d6f6758fbd

.github/PULL_REQUEST_TEMPLATE.md

@@ -11,7 +11,7 @@ Describe changes proposed in this pull request:
 
 # Any screenshots or GIFs?
 If this is a new visual feature please add a before/after screenshot or gif
-here with e.g. [GifGrabber](http://www.gifgrabber.com/).
+here with e.g. [Giphy CAPTURE](https://giphy.com/apps/giphycapture) or [Peek](https://github.com/phw/peek)
 
 # Notify reviewers
 Read our [Pull request merging

.github/release-drafter.yml

@@ -4,50 +4,64 @@ categories:
   - title: '🧬 Features'
     labels:
       - 'feature'
+      - 'cl-feature'
   - title: '✨ Enhancements'
     labels:
       - 'enhancement'
+      - 'cli-enhancement'
   - title: '🐛 Bug Fixes'
     labels:
       - 'fix'
       - 'bugfix'
       - 'bug'
+      - 'cl-bug'
   - title: '🏎 Performance Tweaks'
     labels:
       - 'performance'
+      - 'cl-performance'
   - title: '🎨 Style Tweaks'
     labels:
       - 'style tweak'
+      - 'cl-style-tweak'
   - title: '⚙️ Changes to handle external APIs'
     labels:
       - 'external api'
+      - 'cl-external-api'
   - title: '🗄 Database Migration'
     labels:
       - 'includes db changes'
       - 'migration'
+      - 'cl-db-migration'
   - title: '⚠️ Deprecation'
     labels:
       - 'deprecation'
+      - 'cl-deprecation'
   - title: '📘 Documentation'
     labels:
       - 'documentation'
+      - 'cl-documentation'
   - title: '🧹 Cleanup & Refactoring 🔧'
     labels:
       - 'cleanup'
       - 'refactoring'
+      - 'cl-refactoring'
   - title: '👷‍♀️ Testing, Configuration & Deployment'
     labels:
       - 'devops'
       - 'test'
+      - 'cl-test'
+      - 'cl-devops'
   - title: '🧰 Maintenance'
     labels:
       - 'chore'
       - 'dependencies'
-  - title: ':shipit: Prototype'
+      - 'cl-chore'
+  - title: '📐 Prototype'
     labels:
       - 'cl-prototype'
 exclude-labels:
-  - 'skip-changelog'      
+  - 'skip-changelog'
+  - 'cl-skip-changelog'
 change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
 template: |
   ## Changes

README.md

@@ -1,15 +1,16 @@
 # cbioportal-frontend
 This is the frontend code for cBioPortal using React, MobX and TypeScript. Read more about the architecture of cBioPortal [here](https://docs.cbioportal.org/2.1-deployment/architecture-overview).
 
-## Live demo
-Master: https://master--cbioportalfrontend.netlify.com/
-
-Rc: https://rc--cbioportalfrontend.netlify.com/
-
-## Test status & Code Quality
-| Branch | master | rc |
-| --- | --- | --- |
-| Status | [![CircleCI](https://circleci.com/gh/cBioPortal/cbioportal-frontend/tree/master.svg?style=svg)](https://circleci.com/gh/cBioPortal/cbioportal-frontend/tree/master) | [![CircleCI](https://circleci.com/gh/cBioPortal/cbioportal-frontend/tree/rc.svg?style=svg)](https://circleci.com/gh/cBioPortal/cbioportal-frontend/tree/rc) |
+## Branch Information
+| | main branch | upcoming release branch | later release candidate branch |
+| --- | --- | --- | --- |
+| Branch name | [`master`](https://github.com/cBioPortal/cbioportal-frontend/tree/master) |  [`release-2.3.0`](https://github.com/cBioPortal/cbioportal-frontend/tree/release-2.3.0) |  [`rc`](https://github.com/cBioPortal/cbioportal-frontend/tree/rc) |
+| Description | All bug fixes and features not requiring database migrations go here. This code is either already in production or will be released this week | Next release that requires database migrations. Thorough manual product review often takes place for this branch before release | Later releases with features that require database migrations. This is useful to allow merging in new features without affecting the upcoming release. Could be seen as a development branch, but note that only high quality pull requests are merged. That is the feature should be pretty much ready for release after merge. |
+| Status | [![CircleCI](https://circleci.com/gh/cBioPortal/cbioportal-frontend/tree/master.svg?style=svg)](https://circleci.com/gh/cBioPortal/cbioportal-frontend/tree/master) | [![CircleCI](https://circleci.com/gh/cBioPortal/cbioportal-frontend/tree/release-3.2.0.svg?style=svg)](https://circleci.com/gh/cBioPortal/cbioportal-frontend/tree/release-3.2.0) | [![CircleCI](https://circleci.com/gh/cBioPortal/cbioportal-frontend/tree/rc.svg?style=svg)](https://circleci.com/gh/cBioPortal/cbioportal-frontend/tree/rc) |
+| Live instance frontend | https://frontend.cbioportal.org / https://master--cbioportalfrontend.netlify.com/ | https://release-3-2-0--cbioportalfrontend.netlify.com | https://rc--cbioportalfrontend.netlify.com |
+| Live instance backend | https://www.cbioportal.org / https://master.cbioportal.org | https://beta.cbioportal.org | https://rc.cbioportal.org |
+
+Note: you can always check the version of the live instance by checking the variable `window.FRONTEND_COMMIT` in the console.
 
 ## Run
 

end-to-end-test/local/specs/core/patientview.spec.js

@@ -231,10 +231,6 @@ describe('patient view page', function() {
 
 
         describe('gene panel modal', () => {
-            function closeModal() {
-                $('.modal-footer button').click();
-            }
-
             function clickOnGenePanelLinks() {
                 const genePanelLinks = $$('.rc-tooltip table td a');
                 genePanelLinks[genePanelLinks.length - 1].click();
@@ -253,20 +249,17 @@ describe('patient view page', function() {
                 assert($('#patient-view-gene-panel').isExisting());
             });
 
-            it('toggles gene panel modal from genomic tracks', () => {
-                // mouse over sample icon
+            it('toggles gene panel modal from sample icon in genomic tracks', () => {
                 browser
                     .moveToObject(
                         '.genomicOverviewTracksContainer svg[data-test=sample-icon]'
                     )
                     .pause(500);
                 clickOnGenePanelLinks();
                 assert($('#patient-view-gene-panel').isExisting());
-
-                closeModal();
-                assert(!$('#patient-view-gene-panel').isExisting());
-
-                // mouse over gene panel icon
+            });
+
+            it('toggles gene panel modal from gene panel icon in genomic tracks', () => {
                 browser
                     .moveToObject(
                         '.genomicOverviewTracksContainer [data-test=cna-track-genepanel-icon-0]'
@@ -276,50 +269,52 @@ describe('patient view page', function() {
                 assert($('#patient-view-gene-panel').isExisting());
             });
 
-            it('toggles gene panel modal from mutations table', () => {
+            it('toggles gene panel modal from sample icon in mutations table', () => {
                 const mutationsTable = '[data-test=patientview-mutation-table]';
-
-                // mouse over sample icon in "Samples" column
                 browser
                     .moveToObject(
                         `${mutationsTable} table td [data-test=not-profiled-icon]`
                     )
                     .pause(500);
                 clickOnGenePanelLinks();
                 assert($('#patient-view-gene-panel').isExisting());
-
-                closeModal();
-                assert(!$('#patient-view-gene-panel').isExisting());
-
-                // click on gene panel id in "Gene panel" column
+            });
+
+            it('toggles gene panel modal from gene panel id in mutations table', () => {
+                const mutationsTable = '[data-test=patientview-mutation-table]';
+
+                // select option to show "Gene Panel" column
                 $(`${mutationsTable} button#dropdown-custom-1`).click();
                 $(`${mutationsTable} ul.dropdown-menu`)
                     .$$('li')[2]
                     .click();
+
+                // click on gene panel id in mutations table
                 $(`${mutationsTable} table a`).click();
                 assert($('#patient-view-gene-panel').isExisting());
             });
 
-            it('toggles gene panel modal from copy number table', () => {
+            it('toggles gene panel modal from sample icon in copy number table', () => {
                 const copyNumberTable = '[data-test=patientview-copynumber-table]';
-
-                // mouse over sample icon in "Samples" column
                 browser
                     .moveToObject(
                         `${copyNumberTable} table td [data-test=not-profiled-icon]`
                     )
                     .pause(500);
                 clickOnGenePanelLinks();
                 assert($('#patient-view-gene-panel').isExisting());
+            });
+
+            it('toggles gene panel modal from gene panel id in copy number table', () => {
+                const copyNumberTable = '[data-test=patientview-copynumber-table]';
 
-                closeModal();
-                assert(!$('#patient-view-gene-panel').isExisting());
-
-                // click on gene panel id in "Gene panel" column
+                // select option to show "Gene Panel" column
                 $(`${copyNumberTable} button#dropdown-custom-1`).click();
                 $(`${copyNumberTable} ul.dropdown-menu`)
                     .$$('li')[2]
                     .click();
+
+                // click on gene panel id in copy number table
                 $(`${copyNumberTable} table a`).click();
                 assert($('#patient-view-gene-panel').isExisting());
             });

package.json

@@ -175,7 +175,7 @@
     "node-sass": "^4.9.3",
     "numeral": "^2.0.6",
     "object-sizeof": "^1.2.0",
-    "oncoprintjs": "4.1.4",
+    "oncoprintjs": "4.1.7",
     "parameter-validator": "^1.0.2",
     "pdfobject": "^2.0.201604172",
     "pegjs": "^0.10.0",
@@ -214,7 +214,7 @@
     "react-markdown": "^3.4.1",
     "react-mfb": "^0.6.0",
     "react-motion": "^0.4.7",
-    "react-mutation-mapper": "^0.4.2",
+    "react-mutation-mapper": "^0.4.3",
     "react-overlays": "0.7.4",
     "react-portal": "^4.2.0",
     "react-rangeslider": "^2.1.0",

packages/react-mutation-mapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mutation-mapper",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Generic Mutation Mapper",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

packages/react-mutation-mapper/src/component/lollipopMutationPlot/LollipopMutationPlot.tsx

@@ -562,7 +562,12 @@ export default class LollipopMutationPlot extends React.Component<LollipopMutati
                     />
                 </div>
             );
-        } else {
+        }
+        else if (this.props.store.canonicalTranscript.isComplete &&
+            this.props.store.canonicalTranscript.result === undefined) {
+            return <span><i className="fa fa-exclamation-triangle text-danger"/> No Transcript found for {this.hugoGeneSymbol}</span>;
+        }
+        else {
             return this.props.loadingIndicator || <i className="fa fa-spinner fa-pulse fa-2x" />;
         }
     }

src/pages/patientView/PatientViewPage.tsx

@@ -306,7 +306,10 @@ export default class PatientViewPage extends React.Component<IPatientViewPagePro
             studyName = <StudyLink studyId={study.studyId}>{study.name}</StudyLink>;
         }
 
-        if (this.patientViewPageStore.patientViewData.isComplete && this.patientViewPageStore.studyMetaData.isComplete && sampleManager !== null) {
+        if (this.patientViewPageStore.patientViewData.isComplete &&
+            this.patientViewPageStore.studyMetaData.isComplete &&
+            this.patientViewPageStore.clinicalEvents.isComplete &&
+            sampleManager !== null) {
 
             sampleHeader = _.map(sampleManager!.samples, (sample: ClinicalDataBySampleId) => {
                 const isPDX:boolean = (sampleManager &&

src/pages/patientView/SampleManager.tsx

@@ -25,7 +25,12 @@ export function sortSamples(samples: Array<ClinicalDataBySampleId>,
     // based on sample collection data (timeline event)
     let collectionDayMap: {[s:string]:number} = {};
     if (events) {
-        const specimenEvents = events.filter((e: ClinicalEvent) => (e.eventType === 'SPECIMEN'));
+        // use SPECIMEN or SAMPLE_ACQUISITION track on timeline to get timeline
+        // event
+        // TODO: SAMPLE_ACQUISITION is specific to genie_bpc_test study. We
+        // should probably have some config to allow people to choose what
+        // timeline tracks get labels
+        const specimenEvents = events.filter((e: ClinicalEvent) => (e.eventType === 'SPECIMEN' || 'SAMPLE_ACQUISITION'));
 
         collectionDayMap = specimenEvents.reduce((map:{[s:string]:number}, specimenEvent: ClinicalEvent) => {
             let sampleAttr = _.find(specimenEvent.attributes, (attr: ClinicalEventData) => {

src/pages/patientView/genomicOverview/tracksHelper.ts

@@ -92,7 +92,7 @@ export function getChmInfo(genomeBuild:string) {
     if (!referenceGenome || referenceGenome === "") {
         referenceGenome = DEFAULT_GENOME_BUILD;
     }
-    const genomeSize = referenceGenomeSizes[genomeBuild];
+    const genomeSize = referenceGenomeSizes[referenceGenome];
     if (genomeSize) {
         sel.genomeRef = genomeSize;
         sel.total = _.sum(genomeSize);

src/pages/studyView/charts/pieChart/PieChart.tsx

@@ -35,9 +35,18 @@ export default class PieChart extends React.Component<IPieChartProps, {}> implem
         super(props);
     }
 
+    @computed
+    get filters() {
+        const mappedValueSet = _.reduce(this.props.data, (acc, datum) => {
+            acc[datum.value.toLowerCase()] = datum.value;
+            return acc;
+        }, {} as { [id: string]: string });
+        return this.props.filters.map(filter => mappedValueSet[filter.toLowerCase()] || filter);
+    }
+
     @autobind
     private onUserSelection(filter: string) {
-        let filters = toJS(this.props.filters);
+        let filters = toJS(this.filters);
         if (_.includes(filters, filter)) {
             filters = _.filter(filters, obj => obj !== filter);
         } else {
@@ -101,7 +110,7 @@ export default class PieChart extends React.Component<IPieChartProps, {}> implem
     @computed
     get fill() {
         return (d: ClinicalDataCountSummary) => {
-            if (!_.isEmpty(this.props.filters) && !_.includes(this.props.filters, d.value)) {
+            if (!_.isEmpty(this.filters) && !_.includes(this.filters, d.value)) {
                 return DEFAULT_NA_COLOR;
             }
             return d.color;
@@ -111,7 +120,7 @@ export default class PieChart extends React.Component<IPieChartProps, {}> implem
     @computed
     get stroke() {
         return (d: ClinicalDataCountSummary) => {
-            if (!_.isEmpty(this.props.filters) && _.includes(this.props.filters, d.value)) {
+            if (!_.isEmpty(this.filters) && _.includes(this.filters, d.value)) {
                 return "#cccccc";
             }
             return null;
@@ -121,7 +130,7 @@ export default class PieChart extends React.Component<IPieChartProps, {}> implem
     @computed
     get strokeWidth() {
         return (d: ClinicalDataCountSummary) => {
-            if (!_.isEmpty(this.props.filters) && _.includes(this.props.filters, d.value)) {
+            if (!_.isEmpty(this.filters) && _.includes(this.filters, d.value)) {
                 return 3;
             }
             return 0;
@@ -131,7 +140,7 @@ export default class PieChart extends React.Component<IPieChartProps, {}> implem
     @computed
     get fillOpacity() {
         return (d: ClinicalDataCountSummary) => {
-            if (!_.isEmpty(this.props.filters) && !_.includes(this.props.filters, d.value)) {
+            if (!_.isEmpty(this.filters) && !_.includes(this.filters, d.value)) {
                 return '0.5';
             }
             return 1;
@@ -255,7 +264,7 @@ export default class PieChart extends React.Component<IPieChartProps, {}> implem
                         labelDescription={this.props.labelDescription}
                         patientAttribute={this.props.patientAttribute}
                         showAddRemoveAllButtons={true}
-                        filters={this.props.filters}
+                        filters={this.filters}
                         highlightedRow={this.highlightedRow}
                         onUserSelection={this.props.onUserSelection}
                     />)}

src/pages/studyView/studyPageHeader/rightPanel/RightPanel.tsx

@@ -57,12 +57,14 @@ export default class RightPanel extends React.Component<IRightPanelProps, {}> {
         return (
             <div className="studyViewSummaryHeader">
                 <div className={styles.rightPanel}>
+                    <div className={"small"}>
                     <OQLTextArea
                         inputGeneQuery={this.props.store.geneQueryStr}
                         validateInputGeneQuery={false}
                         callback={this.updateSelectedGenes}
                         location={GeneBoxType.STUDY_VIEW_PAGE}
                     />
+                    </div>
                     <button
                         disabled={this.isQueryButtonDisabled}
                         className={classnames(

src/pages/studyView/styles.scss

@@ -73,10 +73,6 @@ $selectHeightInner: $selectHeight - 2px;
     width: 100%;
 }
 
-#geneBoxValidationStatus > div {
-    max-width: 280px;
-}
-
 #wideGeneBoxValidationStatus > div {
     max-width: 555px;
 }

src/shared/components/GeneSelectionBox/GeneSymbolValidator.spec.tsx

@@ -17,6 +17,7 @@ describe('GeneSymbolValidator', () => {
             },
             geneQuery: 'TP53',
             skipGeneValidation: false,
+            replaceGene: ()=>{},
             updateGeneQuery: () => null,
         } as IGeneSymbolValidatorProps;
         wrapper = mount(<GeneSymbolValidator {...props} />);