From 82dca0bd034047618ab14b2e372bc00e849a99ca Mon Sep 17 00:00:00 2001 From: Qi-Xuan Lu Date: Wed, 19 Jun 2024 11:29:25 -0400 Subject: [PATCH] fix delete chart return null page --- env/master.sh | 2 +- src/pages/groupComparison/Survival.tsx | 626 ++++++++++--------- src/shared/lib/comparison/ComparisonStore.ts | 2 - 3 files changed, 333 insertions(+), 297 deletions(-) diff --git a/env/master.sh b/env/master.sh index 6c589976526..47479106bed 100644 --- a/env/master.sh +++ b/env/master.sh @@ -1,3 +1,3 @@ -export CBIOPORTAL_URL="${CBIOPORTAL_URL:-https://www.cbioportal.org}" +export CBIOPORTAL_URL="${CBIOPORTAL_URL:-https://master.cbioportal.org}" export GENOME_NEXUS_URL="${GENOME_NEXUS_URL:-https://www.genomenexus.org}" export BACKEND=cbioportal:demo-fix-clinical-table-sorting \ No newline at end of file diff --git a/src/pages/groupComparison/Survival.tsx b/src/pages/groupComparison/Survival.tsx index 49b4d634eab..63e02df3548 100644 --- a/src/pages/groupComparison/Survival.tsx +++ b/src/pages/groupComparison/Survival.tsx @@ -383,6 +383,12 @@ export default class Survival extends React.Component { ); } + @action.bound + private onDeleteSurvivalPlot(prefix: string) { + this.setSurvivalPlotPrefix(undefined); + this.props.store.removeCustomSurvivalPlot(prefix); + } + @computed get selectedCensoredClinicalEventType() { if (this._selectedCensoredClinicalEventType !== undefined) { if (this._selectedCensoredClinicalEventType === 'any') { @@ -432,309 +438,335 @@ export default class Survival extends React.Component { } else if (numActiveGroups === 0) { content = {SURVIVAL_NOT_ENOUGH_GROUPS_MSG}; } else { + const clinicalDataExisted = !_.isEmpty( + this.props.store.clinicalEventOptions.result + ); content = ( <> -
- - - - + +
- Start: - - + + + - {this._selectedStartClinicalEventType !== - undefined && - this.props.store.clinicalEventOptions - .result[ - this._selectedStartClinicalEventType - ].attributes.length > 0 && ( - + {this + ._selectedStartClinicalEventType !== + undefined && + this.props.store + .clinicalEventOptions.result[ + this + ._selectedStartClinicalEventType + ].attributes.length > 0 && ( + + )} + + + + + + {this._selectedEndClinicalEventType !== + undefined && + this.props.store + .clinicalEventOptions.result[ + this + ._selectedEndClinicalEventType + ].attributes.length > 0 && ( + - )} - - - - - )} - clearable={false} - searchable={false} - /> - - {this._selectedEndClinicalEventType !== - undefined && - this.props.store.clinicalEventOptions - .result[ - this._selectedEndClinicalEventType - ].attributes.length > 0 && ( - + + + + + {this + .selectedCensoredClinicalEventType !== + undefined && + this + .selectedCensoredClinicalEventType + .value !== 'any' && + this.props.store + .clinicalEventOptions.result[ + this + .selectedCensoredClinicalEventType + .value + ].attributes.length > 0 && ( + - )} - - - - - )} - clearable={false} - searchable={false} - /> - - {this.selectedCensoredClinicalEventType !== - undefined && - this.selectedCensoredClinicalEventType - .value !== 'any' && - this.props.store.clinicalEventOptions - .result[ - this - .selectedCensoredClinicalEventType - .value - ].attributes.length > 0 && ( - + - )} - - - - -
+ Start: + - + + { - this.selectedStartClinicalEventAttributes = selectedOptions; - }} - options={ - this.props.store - .clinicalEventOptions - .result[ + > + + + {POSITIONS.map((option, i) => { + return ( + { + this.startEventPosition = $( + e.target + ).attr( + 'data-value' + ) as any; + }} + inline + data-value={ + option.value + } + > + {option.label} + + ); + })} + +
+ End: + + - - - {POSITIONS.map((option, i) => { - return ( - +
- End: - - + + {POSITIONS.map((option, i) => { + return ( + { + this.endEventPosition = $( + e.target + ).attr( + 'data-value' + ) as any; + }} + inline + data-value={ + option.value + } + > + {option.label} + + ); + })} + +
+ + Censored: + + + { - this.selectedEndClinicalEventAttributes = selectedOptions; - }} - options={ + onChange={ + this + .onCensoredClinicalEventSelection + } + options={[ + { + label: 'any event', + value: 'any', + attributes: [], + } as any, + ].concat( + _.values( this.props.store .clinicalEventOptions - .result[ - this - ._selectedEndClinicalEventType - ].attributes - } - isClearable={false} - noOptionsMessage={() => - 'No results' + .result + ) + )} + clearable={false} + searchable={false} + /> + - - - {POSITIONS.map((option, i) => { - return ( - +
- Censored: - - +
+
- -
- + Add survival plot + +
+
+ )} {this.tabUI.component} ); @@ -954,9 +986,7 @@ export default class Survival extends React.Component { } setSelectedPrefix={this.setSurvivalPlotPrefix} dataStore={this.survivalPrefixTableDataStore.result!} - removeCustomSurvivalPlot={ - this.props.store.removeCustomSurvivalPlot - } + removeCustomSurvivalPlot={this.onDeleteSurvivalPlot} /> ); } else { @@ -1072,6 +1102,7 @@ export default class Survival extends React.Component { .analysisGroups; const patientToAnalysisGroups = this.analysisGroupsComputations .result!.patientToAnalysisGroups; + const patientSurvivals = this.props.store.patientSurvivals.result!; const attributeDescriptions: { [prefix: string]: string } = {}; const survivalTitleByPrefix = this.survivalTitleByPrefix.result!; const survivalYLabel = this.survivalYLabel.result!; @@ -1099,11 +1130,8 @@ export default class Survival extends React.Component { // set default plot if applicable if ( - (!doNotSetDefaultPlot && - this.selectedSurvivalPlotPrefix === undefined) || - !this.props.store.survivalClinicalAttributesPrefix.result?.includes( - this.selectedSurvivalPlotPrefix || '' - ) + !doNotSetDefaultPlot && + this.selectedSurvivalPlotPrefix === undefined ) { // if the table exists pick the first one from the table's store for consistency if (this.survivalPrefixTable.component) { @@ -1114,17 +1142,27 @@ export default class Survival extends React.Component { } // if there is no table, pick the first one from the default store else { - this.setSurvivalPlotPrefix( - _.keys(this.props.store.patientSurvivals.result!)[0] - ); + this.setSurvivalPlotPrefix(_.keys(patientSurvivals)[0]); } } - if (this.selectedSurvivalPlotPrefix) { - const value = this.props.store.patientSurvivals.result![ - this.selectedSurvivalPlotPrefix - ]; + if ( + this.selectedSurvivalPlotPrefix && + patientSurvivals?.[this.selectedSurvivalPlotPrefix] + ) { + const value = patientSurvivals[this.selectedSurvivalPlotPrefix]; const key = this.selectedSurvivalPlotPrefix; + + // // show survival plot that is just selected + // if (!this.props.store.survivalClinicalAttributesPrefix.result?.includes( + // key + // )) { + // this.setSurvivalPlotPrefix( + // this.survivalPrefixTableDataStore.result!.getSortedFilteredData()[0] + // .prefix + // ); + // } + if (value.length > 0) { if ( this.props.store.survivalDescriptions && diff --git a/src/shared/lib/comparison/ComparisonStore.ts b/src/shared/lib/comparison/ComparisonStore.ts index 3483986d9e9..b53594294f9 100644 --- a/src/shared/lib/comparison/ComparisonStore.ts +++ b/src/shared/lib/comparison/ComparisonStore.ts @@ -1171,8 +1171,6 @@ export default abstract class ComparisonStore extends AnalysisStore @action.bound public removeCustomSurvivalPlot(prefix: string) { if (!_.isEmpty(this.customSurvivalPlots)) { - this.selectedSurvivalPlotPrefix = undefined; - this.customSurvivalPlots = _.omitBy( toJS(this.customSurvivalPlots), (value, key) => key === prefix