RFC69 : survival chart with landmark events and hazard ratio (#4740)

Add the group information as label below chart
landmark line functionality
Dynamic calculation of groups for axis
Implement hazard ratio
show hazard ratio between every group
Remove hazard ratio warning when feature flag is disabled
Removed feature flag for survival chart

end-to-end-test/local/specs/SurvivalChart.screenshot.spec.js

@@ -0,0 +1,54 @@
+var goToUrlAndSetLocalStorage = require('../../shared/specUtils')
+    .goToUrlAndSetLocalStorage;
+var waitForNetworkQuiet = require('../../shared/specUtils').waitForNetworkQuiet;
+var openGroupComparison = require('../../shared/specUtils').openGroupComparison;
+var assertScreenShotMatch = require('../../shared/lib/testUtils')
+    .assertScreenShotMatch;
+var setInputText = require('../../shared/specUtils').setInputText;
+var {
+    setDropdownOpen,
+    selectClinicalTabPlotType,
+    getElementByTestHandle,
+    setCheckboxChecked,
+} = require('../../shared/specUtils');
+
+const CBIOPORTAL_URL = process.env.CBIOPORTAL_URL.replace(/\/$/, '');
+
+describe('Screenshot test for extend survival chart (feature flag)', function() {
+    this.retries(0);
+
+    before(function() {
+        openGroupComparison(
+            `${CBIOPORTAL_URL}/study/summary?id=lgg_ucsf_2014_test_generic_assay&featureFlags=SURVIVAL_PLOT_EXTENDED`,
+            'chart-container-OS_STATUS',
+            100000
+        );
+        $('.tabAnchor_survival').click();
+        $('[data-test="ComparisonPageSurvivalTabDiv"]').waitForExist({
+            timeout: 20000,
+        });
+    });
+    it('Survival chart with landmark event and hazard ratio disabled', function() {
+        var res = browser.checkElement('div[data-test=SurvivalChart]');
+        assertScreenShotMatch(res);
+    });
+    it('Survival chart with landmark event at time point 20', function() {
+        setCheckboxChecked(true, 'input[data-test=landmarkLines]');
+        setInputText('input[data-test=landmarkValues]', '20');
+        var res = browser.checkElement('div[data-test=SurvivalChart]');
+        assertScreenShotMatch(res);
+    });
+    it('Survival chart with hazard ratio table', function() {
+        setCheckboxChecked(false, 'input[data-test=landmarkLines]');
+        setCheckboxChecked(true, 'input[data-test=hazardRatioCheckbox]');
+        var res = browser.checkElement('div[data-test=survivalTabView]');
+        assertScreenShotMatch(res);
+    });
+    it('Survival chart with hazard ratio table and landmark line', function() {
+        setCheckboxChecked(true, 'input[data-test=landmarkLines]');
+        setInputText('input[data-test=landmarkValues]', '20');
+        setCheckboxChecked(true, 'input[data-test=hazardRatioCheckbox]');
+        var res = browser.checkElement('div[data-test=survivalTabView]');
+        assertScreenShotMatch(res);
+    });
+});

src/pages/groupComparison/ClinicalData.tsx

@@ -34,7 +34,7 @@ import { scatterPlotSize } from 'shared/components/plots/PlotUtils';
 import {
     CLINICAL_TAB_NOT_ENOUGH_GROUPS_MSG,
     ClinicalDataEnrichmentWithQ,
-    getStatisticalCautionInfo,
+    GetStatisticalCautionInfo,
 } from './GroupComparisonUtils';
 import ReactSelect from 'react-select1';
 import { MakeMobxView } from 'shared/components/MobxView';
@@ -170,7 +170,7 @@ export default class ClinicalData extends React.Component<
             } else {
                 content.push(
                     <div className={'tabMessageContainer'}>
-                        {getStatisticalCautionInfo()}
+                        <GetStatisticalCautionInfo />
                         <OverlapExclusionIndicator store={this.props.store} />
                     </div>
                 );

src/pages/groupComparison/GroupComparisonUtils.tsx

@@ -931,7 +931,7 @@ export function getGroupsDownloadData(
     return lines.map(line => line.join('\t')).join('\n');
 }
 
-export function getStatisticalCautionInfo() {
+export const GetStatisticalCautionInfo: React.FunctionComponent = () => {
     return (
         <div className="alert alert-info">
             <i
@@ -947,7 +947,25 @@ export function getStatisticalCautionInfo() {
             analyses. Consider consulting a statistician.
         </div>
     );
-}
+};
+
+export const GetHazardRatioCautionInfo: React.FunctionComponent = () => {
+    return (
+        <div className="alert alert-info">
+            <i
+                className="fa fa-md fa-info-circle"
+                style={{
+                    verticalAlign: 'middle !important',
+                    marginRight: 6,
+                    marginBottom: 1,
+                }}
+            />
+            The log-rank test is used to test the null hypothesis that there is
+            no difference between the groups in the probability of an event at
+            any time point. Hazard ratios are derived from the log-rank test.
+        </div>
+    );
+};
 
 export const AlterationFilterMenuSection: React.FunctionComponent<{
     store: ComparisonStore;

src/pages/groupComparison/Survival.tsx

@@ -8,7 +8,8 @@ import { MakeMobxView } from '../../shared/components/MobxView';
 import {
     SURVIVAL_NOT_ENOUGH_GROUPS_MSG,
     SURVIVAL_TOO_MANY_GROUPS_MSG,
-    getStatisticalCautionInfo,
+    GetStatisticalCautionInfo,
+    GetHazardRatioCautionInfo,
 } from './GroupComparisonUtils';
 import ErrorMessage from '../../shared/components/ErrorMessage';
 import { blendColors } from './OverlapUtils';
@@ -316,7 +317,8 @@ export default class Survival extends React.Component<ISurvivalProps, {}> {
                             className={'tabMessageContainer'}
                             style={{ paddingBottom: 0 }}
                         >
-                            {getStatisticalCautionInfo()}
+                            <GetStatisticalCautionInfo />
+                            <GetHazardRatioCautionInfo />
                             {isGenieBpcStudy &&
                                 !this.props.store.isLeftTruncationAvailable
                                     .result && (
@@ -703,8 +705,9 @@ export default class Survival extends React.Component<ISurvivalProps, {}> {
                                 />
                             )}
                             <div
+                                data-test={'survivalTabView'}
                                 className="borderedChart"
-                                style={{ width: '920px' }}
+                                style={{ width: 'auto' }}
                             >
                                 <SurvivalChart
                                     key={key}