Add plots tab to study view (#4802)

* add plots tab to study view * load data using selected gene options * replace prepopulated options with search message, fix bug with none/same selections * fix issue with queried gene options for generic assay datatype * fix issue with incorrect data being passed causing crashes with some data type options * fix issue with large gene panel data causing crashes * set default state of study view plots tab, label profiled status of genes * revert results view and add missing props * replace original PlotsTab with new one * add appropriate banners to plots component --------- Co-authored-by: Bryan Lai <laib1@mskcc.org>
cBioPortal · Mar 25, 2024 · 8288996 · 8288996
1 parent db8d21a
commit 8288996
Show file tree

Hide file tree

Showing 61 changed files with 3,160 additions and 528 deletions.
diff --git a/end-to-end-test/local/specs/hide-download-controls.spec.js b/end-to-end-test/local/specs/hide-download-controls.spec.js
@@ -457,6 +457,7 @@ describe('hide download controls feature', function() {
                 'Clinical Data',
                 'CN Segments',
                 'Files & Links',
+                'Plots Beta!',
                 'Study Sponsors',
             ];
             before(() => {

diff --git a/...reference/can_filter_a_study_by_patient_treatments_element_chrome_1600x1000.png b/...reference/can_filter_a_study_by_patient_treatments_element_chrome_1600x1000.png
diff --git a/.../reference/can_filter_a_study_by_sample_treatments_element_chrome_1600x1000.png b/.../reference/can_filter_a_study_by_sample_treatments_element_chrome_1600x1000.png
diff --git a/...ote/screenshots/reference/check_for_survival_plots_element_chrome_1600x1000.png b/...ote/screenshots/reference/check_for_survival_plots_element_chrome_1600x1000.png
diff --git a/...s/reference/excluding_unprofiled_samples_plots_tab_element_chrome_1600x1000.png b/...s/reference/excluding_unprofiled_samples_plots_tab_element_chrome_1600x1000.png
diff --git a/...remote/screenshots/reference/filter_study_from_url_element_chrome_1600x1000.png b/...remote/screenshots/reference/filter_study_from_url_element_chrome_1600x1000.png
diff --git a/...hots/reference/fusion_filter_filter_study_from_url_element_chrome_1600x1000.png b/...hots/reference/fusion_filter_filter_study_from_url_element_chrome_1600x1000.png
diff --git a/...remote/screenshots/reference/loads_a_virtual_study_element_chrome_1600x1000.png b/...remote/screenshots/reference/loads_a_virtual_study_element_chrome_1600x1000.png
diff --git a/...ence/loads_multiple_studies_with_treatments_tables_element_chrome_1600x1000.png b/...ence/loads_multiple_studies_with_treatments_tables_element_chrome_1600x1000.png
diff --git a/...ference/plots_tab_with_structural_variant_coloring_element_chrome_1600x1000.png b/...ference/plots_tab_with_structural_variant_coloring_element_chrome_1600x1000.png
diff --git a/...ference/study_view_laml_tcga_clinical_data_clicked_element_chrome_1600x1000.png b/...ference/study_view_laml_tcga_clinical_data_clicked_element_chrome_1600x1000.png
diff --git a/...te/screenshots/reference/tcga_pancancer_atlas_page_element_chrome_1600x1000.png b/...te/screenshots/reference/tcga_pancancer_atlas_page_element_chrome_1600x1000.png
diff --git a/..._adding_charts,_each_chart_should_get_proper_data._element_chrome_1600x1000.png b/..._adding_charts,_each_chart_should_get_proper_data._element_chrome_1600x1000.png
diff --git a/end-to-end-test/remote/specs/core/customTabs.spec.js b/end-to-end-test/remote/specs/core/customTabs.spec.js
@@ -106,6 +106,11 @@ function runTests(pageName, url, tabLocation) {
 
             $('.mainTabs').waitForDisplayed();
 
+            if (tabLocation === 'STUDY_PAGE') {
+                $('i.fa-chevron-right').waitForDisplayed();
+                $('i.fa-chevron-right').click();
+            }
+
             assert.equal(
                 $('=Patient Tab').isDisplayed(),
                 false,
@@ -143,6 +148,11 @@ function runTests(pageName, url, tabLocation) {
 
             $('.mainTabs').waitForDisplayed();
 
+            if (tabLocation === 'STUDY_PAGE') {
+                $('i.fa-chevron-right').waitForDisplayed();
+                $('i.fa-chevron-right').click();
+            }
+
             assert.equal(
                 $('=Hidden Tab').isDisplayed(),
                 false,
@@ -235,7 +245,8 @@ function runTests(pageName, url, tabLocation) {
                 };
             });
 
-            $('=Async Tab').click();
+            // offset to avoid overlapping elements
+            $('=Async Tab').click({ x: -10 });
 
             browser.pause(1000);
 

diff --git a/src/pages/groupComparison/ClinicalData.tsx b/src/pages/groupComparison/ClinicalData.tsx
@@ -31,7 +31,7 @@ import {
     isStringData,
     IStringAxisData,
     makeBoxScatterPlotData,
-} from 'pages/resultsView/plots/PlotsTabUtils';
+} from 'shared/components/plots/PlotsTabUtils';
 import ScrollBar from 'shared/components/Scrollbar/ScrollBar';
 import { IBoxScatterPlotData } from 'shared/components/plots/BoxScatterPlot';
 import { scatterPlotSize } from 'shared/components/plots/PlotUtils';

diff --git a/src/pages/groupComparison/ClinicalNumericalDataVisualisation.tsx b/src/pages/groupComparison/ClinicalNumericalDataVisualisation.tsx
@@ -2,7 +2,7 @@ import BoxScatterPlot, {
     IBoxScatterPlotProps,
     toBoxPlotData,
 } from 'shared/components/plots/BoxScatterPlot';
-import { IBoxScatterPlotPoint } from 'pages/resultsView/plots/PlotsTabUtils';
+import { IBoxScatterPlotPoint } from 'shared/components/plots/PlotsTabUtils';
 import React from 'react';
 import { computed, makeObservable } from 'mobx';
 import { SummaryStatisticsTable } from './SummaryStatisticsTable';

diff --git a/src/pages/groupComparison/MultipleCategoryBarPlot.tsx b/src/pages/groupComparison/MultipleCategoryBarPlot.tsx
@@ -31,7 +31,7 @@ import * as ReactDOM from 'react-dom';
 import { Popover } from 'react-bootstrap';
 import classnames from 'classnames';
 import { toConditionalPrecisionWithMinimum } from 'shared/lib/FormatUtils';
-import { IStringAxisData } from 'pages/resultsView/plots/PlotsTabUtils';
+import { IStringAxisData } from 'shared/components/plots/PlotsTabUtils';
 import WindowStore from 'shared/components/window/WindowStore';
 
 export interface IMultipleCategoryBarPlotProps {

diff --git a/src/pages/resultsView/ResultsViewPage.tsx b/src/pages/resultsView/ResultsViewPage.tsx
@@ -22,7 +22,7 @@ import StructuralVariants from 'pages/resultsView/structuralVariant/StructuralVa
 import './styles.scss';
 import ResultsViewOncoprint from 'shared/components/oncoprint/ResultsViewOncoprint';
 import QuerySummary from './querySummary/QuerySummary';
-import PlotsTab from './plots/PlotsTab';
+import PlotsTab from 'shared/components/plots/PlotsTab';
 import { MSKTab, MSKTabs } from '../../shared/components/MSKTabs/MSKTabs';
 import { PageLayout } from '../../shared/components/PageLayout/PageLayout';
 import autobind from 'autobind-decorator';
@@ -254,8 +254,97 @@ export default class ResultsViewPage extends React.Component<
                             linkText={'Plots'}
                         >
                             <PlotsTab
-                                store={store}
+                                filteredSamplesByDetailedCancerType={
+                                    store.filteredSamplesByDetailedCancerType
+                                }
+                                mutations={store.mutations}
+                                studies={store.studies}
+                                molecularProfileIdSuffixToMolecularProfiles={
+                                    store.molecularProfileIdSuffixToMolecularProfiles
+                                }
+                                entrezGeneIdToGene={store.entrezGeneIdToGene}
+                                sampleKeyToSample={store.sampleKeyToSample}
+                                genes={store.genes}
+                                clinicalAttributes={store.clinicalAttributes}
+                                genesets={store.genesets}
+                                genericAssayEntitiesGroupByMolecularProfileId={
+                                    store.genericAssayEntitiesGroupByMolecularProfileId
+                                }
+                                studyIds={store.studyIds}
+                                molecularProfilesWithData={
+                                    store.molecularProfilesWithData
+                                }
+                                molecularProfilesInStudies={
+                                    store.molecularProfilesInStudies
+                                }
+                                annotatedCnaCache={store.annotatedCnaCache}
+                                annotatedMutationCache={
+                                    store.annotatedMutationCache
+                                }
+                                structuralVariantCache={
+                                    store.structuralVariantCache
+                                }
+                                studyToMutationMolecularProfile={
+                                    store.studyToMutationMolecularProfile
+                                }
+                                studyToMolecularProfileDiscreteCna={
+                                    store.studyToMolecularProfileDiscreteCna
+                                }
+                                clinicalDataCache={store.clinicalDataCache}
+                                patientKeyToFilteredSamples={
+                                    store.patientKeyToFilteredSamples
+                                }
+                                numericGeneMolecularDataCache={
+                                    store.numericGeneMolecularDataCache
+                                }
+                                coverageInformation={store.coverageInformation}
+                                genesetMolecularDataCache={
+                                    store.genesetMolecularDataCache
+                                }
+                                genericAssayMolecularDataCache={
+                                    store.genericAssayMolecularDataCache
+                                }
+                                studyToStructuralVariantMolecularProfile={
+                                    store.studyToStructuralVariantMolecularProfile
+                                }
+                                driverAnnotationSettings={
+                                    store.driverAnnotationSettings
+                                }
+                                studyIdToStudy={store.studyIdToStudy.result}
+                                structuralVariants={
+                                    store.structuralVariants.result
+                                }
+                                hugoGeneSymbols={store.hugoGeneSymbols}
+                                selectedGenericAssayEntitiesGroupByMolecularProfileId={
+                                    store.selectedGenericAssayEntitiesGroupByMolecularProfileId
+                                }
+                                molecularProfileIdToMolecularProfile={
+                                    store.molecularProfileIdToMolecularProfile
+                                }
                                 urlWrapper={this.urlWrapper}
+                                queryContainsOql={store.queryContainsOql}
+                                includeGermlineMutations={
+                                    store.includeGermlineMutations
+                                }
+                                mutationsReportByGene={
+                                    store.mutationsReportByGene
+                                }
+                                oqlFilteredMutationsReport={
+                                    store.oqlFilteredMutationsReport
+                                }
+                                oqlFilteredMolecularDataReport={
+                                    store.oqlFilteredMolecularDataReport
+                                }
+                                oqlFilteredStructuralVariantsReport={
+                                    store.oqlFilteredStructuralVariantsReport
+                                }
+                                samples={store.samples}
+                                filteredSamples={store.filteredSamples}
+                                patients={store.patients}
+                                filteredPatients={store.filteredPatients}
+                                hideUnprofiledSamples={
+                                    store.hideUnprofiledSamples
+                                }
                             />
                         </MSKTab>
                     );

diff --git a/src/pages/resultsView/cancerSummary/CancerSummaryContainer.tsx b/src/pages/resultsView/cancerSummary/CancerSummaryContainer.tsx
@@ -235,11 +235,46 @@ export default class CancerSummaryContainer extends React.Component<
                         <div className={'tabMessageContainer'}>
                             <OqlStatusBanner
                                 className="cancer-types-summary-oql-status-banner"
-                                store={this.props.store}
+                                queryContainsOql={
+                                    this.props.store.queryContainsOql
+                                }
                                 tabReflectsOql={true}
                             />
-                            <AlterationFilterWarning store={this.props.store} />
-                            <CaseFilterWarning store={this.props.store} />
+                            <AlterationFilterWarning
+                                driverAnnotationSettings={
+                                    this.props.store.driverAnnotationSettings
+                                }
+                                includeGermlineMutations={
+                                    this.props.store.includeGermlineMutations
+                                }
+                                mutationsReportByGene={
+                                    this.props.store.mutationsReportByGene
+                                }
+                                oqlFilteredMutationsReport={
+                                    this.props.store.oqlFilteredMutationsReport
+                                }
+                                oqlFilteredMolecularDataReport={
+                                    this.props.store
+                                        .oqlFilteredMolecularDataReport
+                                }
+                                oqlFilteredStructuralVariantsReport={
+                                    this.props.store
+                                        .oqlFilteredStructuralVariantsReport
+                                }
+                            />
+                            <CaseFilterWarning
+                                samples={this.props.store.samples}
+                                filteredSamples={
+                                    this.props.store.filteredSamples
+                                }
+                                patients={this.props.store.patients}
+                                filteredPatients={
+                                    this.props.store.filteredPatients
+                                }
+                                hideUnprofiledSamples={
+                                    this.props.store.hideUnprofiledSamples
+                                }
+                            />
                         </div>
                         <MSKTabs
                             onTabClick={this.handleTabClick}

diff --git a/src/pages/resultsView/cnSegments/CNSegments.tsx b/src/pages/resultsView/cnSegments/CNSegments.tsx
@@ -184,7 +184,15 @@ export default class CNSegments extends React.Component<
                     }
                 />
                 <div className={'tabMessageContainer'}>
-                    <CaseFilterWarning store={this.props.store} />
+                    <CaseFilterWarning
+                        samples={this.props.store.samples}
+                        filteredSamples={this.props.store.filteredSamples}
+                        patients={this.props.store.patients}
+                        filteredPatients={this.props.store.filteredPatients}
+                        hideUnprofiledSamples={
+                            this.props.store.hideUnprofiledSamples
+                        }
+                    />
                 </div>
                 <Nav
                     bsStyle="pills"

diff --git a/src/pages/resultsView/coExpression/CoExpressionPlot.tsx b/src/pages/resultsView/coExpression/CoExpressionPlot.tsx
@@ -17,7 +17,7 @@ import {
 } from './CoExpressionPlotUtils';
 import _ from 'lodash';
 import { scatterPlotSize } from '../../../shared/components/plots/PlotUtils';
-import { IAxisLogScaleParams } from 'pages/resultsView/plots/PlotsTabUtils';
+import { IAxisLogScaleParams } from 'shared/components/plots/PlotsTabUtils';
 import autobind from 'autobind-decorator';
 import { GeneticEntity } from 'shared/model/GeneticEntity';
 import { getServerConfig } from 'config/config';

diff --git a/src/pages/resultsView/coExpression/CoExpressionPlotUtils.ts b/src/pages/resultsView/coExpression/CoExpressionPlotUtils.ts
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { IAxisLogScaleParams } from 'pages/resultsView/plots/PlotsTabUtils';
+import { IAxisLogScaleParams } from 'shared/components/plots/PlotsTabUtils';
 import { CoExpressionPlotData } from 'pages/resultsView/coExpression/CoExpressionPlot';
 import { MolecularProfile } from 'cbioportal-ts-api-client';
 import { GeneticEntity } from 'shared/model/GeneticEntity';

diff --git a/src/pages/resultsView/coExpression/CoExpressionTab.tsx b/src/pages/resultsView/coExpression/CoExpressionTab.tsx
@@ -652,14 +652,39 @@ export default class CoExpressionTab extends React.Component<
                 <div className={'tabMessageContainer'}>
                     <OqlStatusBanner
                         className="coexp-oql-status-banner"
-                        store={this.props.store}
+                        queryContainsOql={this.props.store.queryContainsOql}
                         tabReflectsOql={false}
                     />
                     <AlterationFilterWarning
-                        store={this.props.store}
+                        driverAnnotationSettings={
+                            this.props.store.driverAnnotationSettings
+                        }
+                        includeGermlineMutations={
+                            this.props.store.includeGermlineMutations
+                        }
+                        mutationsReportByGene={
+                            this.props.store.mutationsReportByGene
+                        }
+                        oqlFilteredMutationsReport={
+                            this.props.store.oqlFilteredMutationsReport
+                        }
+                        oqlFilteredMolecularDataReport={
+                            this.props.store.oqlFilteredMolecularDataReport
+                        }
+                        oqlFilteredStructuralVariantsReport={
+                            this.props.store.oqlFilteredStructuralVariantsReport
+                        }
                         isUnaffected={true}
                     />
-                    <CaseFilterWarning store={this.props.store} />
+                    <CaseFilterWarning
+                        samples={this.props.store.samples}
+                        filteredSamples={this.props.store.filteredSamples}
+                        patients={this.props.store.patients}
+                        filteredPatients={this.props.store.filteredPatients}
+                        hideUnprofiledSamples={
+                            this.props.store.hideUnprofiledSamples
+                        }
+                    />
                 </div>
 
                 {status === 'complete' && divContents}

diff --git a/src/pages/resultsView/coExpression/CoExpressionViz.tsx b/src/pages/resultsView/coExpression/CoExpressionViz.tsx
@@ -18,7 +18,7 @@ import {
 } from 'mobx';
 import LoadingIndicator from 'shared/components/loadingIndicator/LoadingIndicator';
 import { SimpleGetterLazyMobXTableApplicationDataStore } from '../../../shared/lib/ILazyMobXTableApplicationDataStore';
-import { logScalePossibleForProfile } from '../plots/PlotsTabUtils';
+import { logScalePossibleForProfile } from 'shared/components/plots/PlotsTabUtils';
 import CoExpressionPlot, { ICoExpressionPlotProps } from './CoExpressionPlot';
 import { MobxPromise, remoteData } from 'cbioportal-frontend-commons';
 import { computePlotData, requestAllDataMessage } from './CoExpressionVizUtils';

diff --git a/src/pages/resultsView/comparison/ComparisonTab.tsx b/src/pages/resultsView/comparison/ComparisonTab.tsx
@@ -327,11 +327,38 @@ export default class ComparisonTab extends React.Component<
                 >
                     <OqlStatusBanner
                         className="comparison-oql-status-banner"
-                        store={this.props.store}
+                        queryContainsOql={this.props.store.queryContainsOql}
                         tabReflectsOql={true}
                     />
-                    <AlterationFilterWarning store={this.props.store} />
-                    <CaseFilterWarning store={this.props.store} />
+                    <AlterationFilterWarning
+                        driverAnnotationSettings={
+                            this.props.store.driverAnnotationSettings
+                        }
+                        includeGermlineMutations={
+                            this.props.store.includeGermlineMutations
+                        }
+                        mutationsReportByGene={
+                            this.props.store.mutationsReportByGene
+                        }
+                        oqlFilteredMutationsReport={
+                            this.props.store.oqlFilteredMutationsReport
+                        }
+                        oqlFilteredMolecularDataReport={
+                            this.props.store.oqlFilteredMolecularDataReport
+                        }
+                        oqlFilteredStructuralVariantsReport={
+                            this.props.store.oqlFilteredStructuralVariantsReport
+                        }
+                    />
+                    <CaseFilterWarning
+                        samples={this.props.store.samples}
+                        filteredSamples={this.props.store.filteredSamples}
+                        patients={this.props.store.patients}
+                        filteredPatients={this.props.store.filteredPatients}
+                        hideUnprofiledSamples={
+                            this.props.store.hideUnprofiledSamples
+                        }
+                    />
                 </div>
                 <div
                     style={{