Merge pull request #4520 from dippindots/fix-9988

Study view km plot optimization
cBioPortal · Apr 27, 2023 · 3f0ac3d · 3f0ac3d
2 parents 88899c2 + dd9a466
commit 3f0ac3d
Showing 18 changed files with 370 additions and 65 deletions.
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/...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/...ric_assay_chart_should_be_added_in_the_summary_tab_element_chrome_1600x1000.png b/...ric_assay_chart_should_be_added_in_the_summary_tab_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/...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/src/pages/groupComparison/Survival.tsx b/src/pages/groupComparison/Survival.tsx
@@ -771,6 +771,7 @@ export default class Survival extends React.Component<ISurvivalProps, {}> {
                                             this.selectedSurvivalPlotPrefix
                                         ]
                                     }
+                                    compactMode={false}
                                 />
                             </div>
                         </div>

diff --git a/src/pages/resultsView/survival/SurvivalChart.tsx b/src/pages/resultsView/survival/SurvivalChart.tsx
@@ -28,6 +28,7 @@ import {
     filterScatterData,
     SurvivalPlotFilters,
     SurvivalSummary,
+    SURVIVAL_COMPACT_MODE_THRESHOLD,
 } from './SurvivalUtil';
 import { toConditionalPrecision } from 'shared/lib/NumberUtils';
 import { getPatientViewUrl } from '../../../shared/api/urls';
@@ -88,10 +89,13 @@ export interface ISurvivalChartProps {
     legendLabelComponent?: any;
     yAxisTickCount?: number;
     xAxisTickCount?: number;
+    // Compact mode will hide censoring dots in the chart and do binning based on configuration
+    compactMode?: boolean;
 }
 
 const MIN_GROUP_SIZE_FOR_LOGRANK = 10;
 // Start to down sampling when there are more than 1000 dots in the plot.
+// TODO: 1000 samples is our current setting, but we should make this configurable
 const SURVIVAL_DOWN_SAMPLING_THRESHOLD = 1000;
 
 @observer
@@ -269,15 +273,30 @@ export default class SurvivalChart
     // The filter is only available when user zooms in the plot.
     @computed
     get scatterData(): GroupedScatterData {
-        return filterScatterData(
-            this.unfilteredScatterData,
-            this.scatterFilter,
-            {
-                xDenominator: this.downSamplingDenominators.x,
-                yDenominator: this.downSamplingDenominators.y,
-                threshold: SURVIVAL_DOWN_SAMPLING_THRESHOLD,
-            }
-        );
+        if (this.props.compactMode) {
+            return filterScatterData(
+                this.unfilteredScatterData,
+                this.scatterFilter,
+                {
+                    xDenominator: this.downSamplingDenominators.x,
+                    yDenominator: this.downSamplingDenominators.y,
+                    threshold: SURVIVAL_DOWN_SAMPLING_THRESHOLD,
+                    enableCensoringCross: false,
+                    floorTimeToMonth: true,
+                }
+            );
+        } else {
+            return filterScatterData(
+                this.unfilteredScatterData,
+                this.scatterFilter,
+                {
+                    xDenominator: this.downSamplingDenominators.x,
+                    yDenominator: this.downSamplingDenominators.y,
+                    threshold: SURVIVAL_DOWN_SAMPLING_THRESHOLD,
+                    enableCensoringCross: true,
+                }
+            );
+        }
     }
 
     public static defaultProps: Partial<ISurvivalChartProps> = {
@@ -790,6 +809,77 @@ export default class SurvivalChart
         ));
     }
 
+    @computed get tooltipContent() {
+        return (
+            <div>
+                Patient ID:{' '}
+                <a
+                    href={getPatientViewUrl(
+                        this.tooltipModel.datum.studyId,
+                        this.tooltipModel.datum.patientId
+                    )}
+                    target="_blank"
+                >
+                    {this.tooltipModel.datum.patientId}
+                </a>
+                <br />
+                {!!this.props.showCurveInTooltip && [
+                    `Curve: ${this.tooltipModel.datum.group}`,
+                    <br />,
+                ]}
+                {this.props.yLabelTooltip}:{' '}
+                {this.tooltipModel.datum.y.toFixed(2)}%<br />
+                {this.tooltipModel.datum.status
+                    ? this.props.xLabelWithEventTooltip
+                    : this.props.xLabelWithoutEventTooltip}
+                : {this.tooltipModel.datum.x.toFixed(2)} months{' '}
+                {this.tooltipModel.datum.status ? '' : '(censored)'}
+                <br />
+                {this.props.analysisClinicalAttribute && (
+                    <span>
+                        {this.props.analysisClinicalAttribute.displayName}:{' '}
+                        {
+                            this.props.patientToAnalysisGroups[
+                                this.tooltipModel.datum.uniquePatientKey
+                            ]
+                        }
+                    </span>
+                )}
+                <br />
+                Number of patients at risk: {this.tooltipModel.datum.atRisk}
+            </div>
+        );
+    }
+
+    @computed get compactTooltipContent() {
+        return (
+            <div>
+                Events during [{this.tooltipModel.datum.x},
+                {this.tooltipModel.datum.x + 1}) months
+                <br />
+                {this.tooltipModel.datum.numberOfEvents !== undefined && (
+                    <>
+                        Patients with an event:{' '}
+                        {this.tooltipModel.datum.numberOfEvents}
+                    </>
+                )}
+                <br />
+                {this.tooltipModel.datum.numberOfCensored !== undefined && (
+                    <>
+                        Censored patients:{' '}
+                        {this.tooltipModel.datum.numberOfCensored}
+                    </>
+                )}
+                <br />
+                <br />% event free at interval end:{' '}
+                {this.tooltipModel.datum.y.toFixed(2)}%
+                <br />
+                Patients at risk at interval end:{' '}
+                {this.tooltipModel.datum.atRisk}
+            </div>
+        );
+    }
+
     public render() {
         if (
             _.flatten(_.values(this.props.sortedGroupedSurvivals)).length === 0
@@ -829,51 +919,9 @@ export default class SurvivalChart
                             onMouseEnter={this.tooltipMouseEnter}
                             onMouseLeave={this.tooltipMouseLeave}
                         >
-                            <div>
-                                Patient ID:{' '}
-                                <a
-                                    href={getPatientViewUrl(
-                                        this.tooltipModel.datum.studyId,
-                                        this.tooltipModel.datum.patientId
-                                    )}
-                                    target="_blank"
-                                >
-                                    {this.tooltipModel.datum.patientId}
-                                </a>
-                                <br />
-                                {!!this.props.showCurveInTooltip && [
-                                    `Curve: ${this.tooltipModel.datum.group}`,
-                                    <br />,
-                                ]}
-                                {this.props.yLabelTooltip}:{' '}
-                                {this.tooltipModel.datum.y.toFixed(2)}%<br />
-                                {this.tooltipModel.datum.status
-                                    ? this.props.xLabelWithEventTooltip
-                                    : this.props.xLabelWithoutEventTooltip}
-                                : {this.tooltipModel.datum.x.toFixed(2)} months{' '}
-                                {this.tooltipModel.datum.status
-                                    ? ''
-                                    : '(censored)'}
-                                <br />
-                                {this.props.analysisClinicalAttribute && (
-                                    <span>
-                                        {
-                                            this.props.analysisClinicalAttribute
-                                                .displayName
-                                        }
-                                        :{' '}
-                                        {
-                                            this.props.patientToAnalysisGroups[
-                                                this.tooltipModel.datum
-                                                    .uniquePatientKey
-                                            ]
-                                        }
-                                    </span>
-                                )}
-                                <br />
-                                Number of patients at risk:{' '}
-                                {this.tooltipModel.datum.atRisk}
-                            </div>
+                            {this.props.compactMode
+                                ? this.compactTooltipContent
+                                : this.tooltipContent}
                         </Popover>
                     )}
                     {this.props.showTable && (