diff --git a/end-to-end-test/local/screenshots/reference/displays_100%_stacked_bar_chart_by_default_element_chrome_1600x1000.png b/end-to-end-test/local/screenshots/reference/displays_100%_stacked_bar_chart_by_default_element_chrome_1600x1000.png new file mode 100644 index 00000000000..7164dc812dc Binary files /dev/null and b/end-to-end-test/local/screenshots/reference/displays_100%_stacked_bar_chart_by_default_element_chrome_1600x1000.png differ diff --git a/end-to-end-test/local/screenshots/reference/displays_heatmap_when_picked_from_plot_dropdown_element_chrome_1600x1000.png b/end-to-end-test/local/screenshots/reference/displays_heatmap_when_picked_from_plot_dropdown_element_chrome_1600x1000.png new file mode 100644 index 00000000000..a1532a16da2 Binary files /dev/null and b/end-to-end-test/local/screenshots/reference/displays_heatmap_when_picked_from_plot_dropdown_element_chrome_1600x1000.png differ diff --git a/end-to-end-test/local/screenshots/reference/shows_box_plot_for_numerical_data_element_chrome_1600x1000.png b/end-to-end-test/local/screenshots/reference/shows_box_plot_for_numerical_data_element_chrome_1600x1000.png new file mode 100644 index 00000000000..826aae89db7 Binary files /dev/null and b/end-to-end-test/local/screenshots/reference/shows_box_plot_for_numerical_data_element_chrome_1600x1000.png differ diff --git a/end-to-end-test/local/screenshots/reference/shows_table_when_selecting_table_visualisation_element_chrome_1600x1000.png b/end-to-end-test/local/screenshots/reference/shows_table_when_selecting_table_visualisation_element_chrome_1600x1000.png new file mode 100644 index 00000000000..8685fe94e7a Binary files /dev/null and b/end-to-end-test/local/screenshots/reference/shows_table_when_selecting_table_visualisation_element_chrome_1600x1000.png differ diff --git a/end-to-end-test/local/specs/core/groupComparison.screenshot.spec.js b/end-to-end-test/local/specs/core/groupComparison.screenshot.spec.js index eb6d374e30b..5f206dfcf14 100644 --- a/end-to-end-test/local/specs/core/groupComparison.screenshot.spec.js +++ b/end-to-end-test/local/specs/core/groupComparison.screenshot.spec.js @@ -177,12 +177,12 @@ describe('group comparison page screenshot tests', function() { }); }); - describe('Clinical tab', function() { + describe('Clinical tab', () => { before(function() { openGroupComparison( `${CBIOPORTAL_URL}/study/summary?id=lgg_ucsf_2014_test_generic_assay`, 'chart-container-ONCOTREE_CODE', - 5000 + 10000 ); $('.tabAnchor_clinical').click(); $('[data-test="ComparisonPageClinicalTabDiv"]').waitForExist({ @@ -190,6 +190,19 @@ describe('group comparison page screenshot tests', function() { }); }); + it('shows box plot for numerical data', () => { + $('[data-test="Mutation Count"]').click(); + const res = checkClinicalTabPlot(); + assertScreenShotMatch(res); + }); + + it('shows table when selecting table visualisation', () => { + $('[data-test="Mutation Count"]').click(); + selectClinicalTabNumericalDisplayType('Table'); + const res = checkClinicalTabPlot(); + assertScreenShotMatch(res); + }); + it('displays 100% stacked bar chart by default', () => { var res = checkClinicalTabPlot(); assertScreenShotMatch(res); @@ -217,3 +230,21 @@ function checkClinicalTabPlot() { hide: ['.qtip'], }); } + +function selectClinicalTabNumericalDisplayType(type) { + setDropdownOpen( + true, + '[data-test="numericalVisualisationTypeSelector"] .Select-arrow-zone', + '[data-test="numericalVisualisationTypeSelector"] .Select-menu', + "Couldn't open clinical tab chart type dropdown" + ); + $( + `[data-test="numericalVisualisationTypeSelector"] .Select-option[aria-label="${type}"]` + ).click(); +} + +function checkClinicalTabPlot() { + return browser.checkElement('div[data-test="ClinicalTabPlotDiv"]', '', { + hide: ['.qtip'], + }); +} diff --git a/end-to-end-test/remote/screenshots/reference/excluding_unprofiled_samples_comparison_tab_clinical_element_chrome_1600x1000.png b/end-to-end-test/remote/screenshots/reference/excluding_unprofiled_samples_comparison_tab_clinical_element_chrome_1600x1000.png index 4ca6183cec6..15e3e2a9008 100644 Binary files a/end-to-end-test/remote/screenshots/reference/excluding_unprofiled_samples_comparison_tab_clinical_element_chrome_1600x1000.png and b/end-to-end-test/remote/screenshots/reference/excluding_unprofiled_samples_comparison_tab_clinical_element_chrome_1600x1000.png differ diff --git a/end-to-end-test/remote/screenshots/reference/group_comparison_page_clinical_tab_include_overlapping_samples_kruskal_wallis_test_element_chrome_1600x1000.png b/end-to-end-test/remote/screenshots/reference/group_comparison_page_clinical_tab_include_overlapping_samples_kruskal_wallis_test_element_chrome_1600x1000.png index 0a8ca162a13..e594e257a82 100644 Binary files a/end-to-end-test/remote/screenshots/reference/group_comparison_page_clinical_tab_include_overlapping_samples_kruskal_wallis_test_element_chrome_1600x1000.png and b/end-to-end-test/remote/screenshots/reference/group_comparison_page_clinical_tab_include_overlapping_samples_kruskal_wallis_test_element_chrome_1600x1000.png differ diff --git a/end-to-end-test/remote/screenshots/reference/group_comparison_page_clinical_tab_log_scale__kruskal_wallis_test_element_chrome_1600x1000.png b/end-to-end-test/remote/screenshots/reference/group_comparison_page_clinical_tab_log_scale__kruskal_wallis_test_element_chrome_1600x1000.png index 0eabc92f7cb..21086de2097 100644 Binary files a/end-to-end-test/remote/screenshots/reference/group_comparison_page_clinical_tab_log_scale__kruskal_wallis_test_element_chrome_1600x1000.png and b/end-to-end-test/remote/screenshots/reference/group_comparison_page_clinical_tab_log_scale__kruskal_wallis_test_element_chrome_1600x1000.png differ diff --git a/end-to-end-test/remote/screenshots/reference/group_comparison_page_clinical_tab_swaped_axes_kruskal_wallis_test_element_chrome_1600x1000.png b/end-to-end-test/remote/screenshots/reference/group_comparison_page_clinical_tab_swaped_axes_kruskal_wallis_test_element_chrome_1600x1000.png index f6418afce56..30662f3ceea 100644 Binary files a/end-to-end-test/remote/screenshots/reference/group_comparison_page_clinical_tab_swaped_axes_kruskal_wallis_test_element_chrome_1600x1000.png and b/end-to-end-test/remote/screenshots/reference/group_comparison_page_clinical_tab_swaped_axes_kruskal_wallis_test_element_chrome_1600x1000.png differ diff --git a/end-to-end-test/remote/screenshots/reference/results_view_comparison_tab_clinical_tab_include_overlapping_samples_kruskal_wallis_test_element_chrome_1600x1000.png b/end-to-end-test/remote/screenshots/reference/results_view_comparison_tab_clinical_tab_include_overlapping_samples_kruskal_wallis_test_element_chrome_1600x1000.png index fc0255c66a2..847ccfcda80 100644 Binary files a/end-to-end-test/remote/screenshots/reference/results_view_comparison_tab_clinical_tab_include_overlapping_samples_kruskal_wallis_test_element_chrome_1600x1000.png and b/end-to-end-test/remote/screenshots/reference/results_view_comparison_tab_clinical_tab_include_overlapping_samples_kruskal_wallis_test_element_chrome_1600x1000.png differ diff --git a/end-to-end-test/remote/screenshots/reference/results_view_comparison_tab_clinical_tab_log_scale__kruskal_wallis_test_element_chrome_1600x1000.png b/end-to-end-test/remote/screenshots/reference/results_view_comparison_tab_clinical_tab_log_scale__kruskal_wallis_test_element_chrome_1600x1000.png index dc09b6deb72..90296ea7952 100644 Binary files a/end-to-end-test/remote/screenshots/reference/results_view_comparison_tab_clinical_tab_log_scale__kruskal_wallis_test_element_chrome_1600x1000.png and b/end-to-end-test/remote/screenshots/reference/results_view_comparison_tab_clinical_tab_log_scale__kruskal_wallis_test_element_chrome_1600x1000.png differ diff --git a/end-to-end-test/remote/screenshots/reference/results_view_comparison_tab_clinical_tab_swaped_axes_kruskal_wallis_test_element_chrome_1600x1000.png b/end-to-end-test/remote/screenshots/reference/results_view_comparison_tab_clinical_tab_swaped_axes_kruskal_wallis_test_element_chrome_1600x1000.png index 1445bd7ac6e..16c70cfe431 100644 Binary files a/end-to-end-test/remote/screenshots/reference/results_view_comparison_tab_clinical_tab_swaped_axes_kruskal_wallis_test_element_chrome_1600x1000.png and b/end-to-end-test/remote/screenshots/reference/results_view_comparison_tab_clinical_tab_swaped_axes_kruskal_wallis_test_element_chrome_1600x1000.png differ diff --git a/src/pages/groupComparison/ClinicalData.tsx b/src/pages/groupComparison/ClinicalData.tsx index f3561243f34..5612dff47eb 100644 --- a/src/pages/groupComparison/ClinicalData.tsx +++ b/src/pages/groupComparison/ClinicalData.tsx @@ -29,9 +29,7 @@ import { makeBoxScatterPlotData, } from 'pages/resultsView/plots/PlotsTabUtils'; import ScrollBar from 'shared/components/Scrollbar/ScrollBar'; -import BoxScatterPlot, { - IBoxScatterPlotData, -} from 'shared/components/plots/BoxScatterPlot'; +import { IBoxScatterPlotData } from 'shared/components/plots/BoxScatterPlot'; import { scatterPlotSize } from 'shared/components/plots/PlotUtils'; import { CLINICAL_TAB_NOT_ENOUGH_GROUPS_MSG, @@ -48,6 +46,11 @@ import { Sample } from 'cbioportal-ts-api-client'; import ComparisonStore from '../../shared/lib/comparison/ComparisonStore'; import { createSurvivalAttributeIdsDict } from 'pages/resultsView/survival/SurvivalUtil'; import { getComparisonCategoricalNaValue } from './ClinicalDataUtils'; +import { + ClinicalNumericalDataVisualisation, + ClinicalNumericalVisualisationType, +} from 'pages/groupComparison/ClinicalNumericalDataVisualisation'; +import { SummaryStatisticsTable } from './SummaryStatisticsTable'; import CategoryPlot, { CategoryPlotType, } from 'pages/groupComparison/CategoryPlot'; @@ -58,7 +61,10 @@ export interface IClinicalDataProps { const SVG_ID = 'clinical-plot-svg'; -class PlotsTabBoxPlot extends BoxScatterPlot {} +export const numericalVisualisationTypeOptions = [ + { value: ClinicalNumericalVisualisationType.Plot, label: 'Plot' }, + { value: ClinicalNumericalVisualisationType.Table, label: 'Table' }, +]; export class ClinicalDataEnrichmentStore extends SimpleGetterLazyMobXTableApplicationDataStore< ClinicalDataEnrichmentWithQ @@ -583,44 +589,9 @@ export default class ClinicalData extends React.Component< } @computed get boxPlotTooltip() { - return (d: any) => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- { - this.boxPlotData.result!.data[d.eventKey] - .label - } -
Maximum{d.max}
75% (q3){d.q3}
Median{d.median}
25% (q1){d.q1}
Minimum{d.min}
- ); - }; + return (data: any[], labels: string[]) => ( + + ); } @computed get categoryToColor() { @@ -649,17 +620,52 @@ export default class ClinicalData extends React.Component< @observable categoryPlotType: CategoryPlotType = CategoryPlotType.PercentageStackedBar; + @observable numericalVisualisationType: ClinicalNumericalVisualisationType = + ClinicalNumericalVisualisationType.Plot; + @action.bound private onPlotTypeSelect(option: any) { this.categoryPlotType = option.value; } + @action.bound + private onNumericalVisualisationTypeSelect(option: any) { + this.numericalVisualisationType = option.value; + } + @computed private get getUtilitiesMenu() { if (!this.highlightedRow) { return ; } return (
+ {isNumerical( + this.highlightedRow!.clinicalAttribute.datatype + ) && ( + <> +
+ +
+ +
+
+ + )} {!this.showLogScaleControls && (
)}
- + {this.numericalVisualisationType !== + ClinicalNumericalVisualisationType.Table && ( + + )} {!this.showLogScaleControls && this.categoryPlotType !== CategoryPlotType.Heatmap && (