diff --git a/src/pages/patientView/PatientViewPage.tsx b/src/pages/patientView/PatientViewPage.tsx index f253dfc86c7..0ba29fe2a5e 100644 --- a/src/pages/patientView/PatientViewPage.tsx +++ b/src/pages/patientView/PatientViewPage.tsx @@ -110,9 +110,6 @@ export default class PatientViewPage extends React.Component< public patientViewPageStore: PatientViewPageStore; - @observable - public activeLocus: string | undefined; - constructor(props: IPatientViewPageProps) { super(props); makeObservable(this); @@ -245,8 +242,8 @@ export default class PatientViewPage extends React.Component< @action.bound public handleLocusChange(locus: string) { - if (this.activeLocus !== locus) { - this.activeLocus = locus; + if (this.patientViewPageStore.activeLocus !== locus) { + this.patientViewPageStore.activeLocus = locus; } } diff --git a/src/pages/patientView/PatientViewPageTabs.tsx b/src/pages/patientView/PatientViewPageTabs.tsx index 13f6a2617e5..89819402d5c 100644 --- a/src/pages/patientView/PatientViewPageTabs.tsx +++ b/src/pages/patientView/PatientViewPageTabs.tsx @@ -189,6 +189,7 @@ export function tabs( style={{ top: -10 }} > void; disableTooltip?: boolean; - locus?: string; - handleLocusChange?: (locus: string) => void; + store?: IGenomicOverviewStore; genome?: string; } +interface IGenomicOverviewStore { + activeLocus: string | undefined; +} + +class DefaultGenomicOverviewStore implements IGenomicOverviewStore { + @observable + public activeLocus: string | undefined; +} + function getCnaTrackSampleSummariesForIgvTrack( features: SegmentTrackFeatures[] = [] ) { @@ -150,15 +158,15 @@ const ToggleButton: React.FunctionComponent<{ export default class GenomicOverview extends React.Component< IGenomicOverviewProps > { - @observable locus: string | undefined; @observable compactIgvView = true; + private store: IGenomicOverviewStore; private genePanelManager: GenePanelManager; constructor(props: IGenomicOverviewProps) { super(props); makeObservable(this); - this.locus = props.locus; + this.store = props.store || new DefaultGenomicOverviewStore(); this.genePanelManager = new GenePanelManager( props.sampleIdToMutationGenePanelId, props.sampleIdToCopyNumberGenePanelId @@ -222,7 +230,7 @@ export default class GenomicOverview extends React.Component< @computed get igvProps() { const coreProps = { - locus: this.locus, + locus: this.store.activeLocus, onLocusChange: this.handleLocusChange, tracks: this.tracks, showTrackLabels: false, @@ -375,14 +383,6 @@ export default class GenomicOverview extends React.Component< ); } - componentWillReceiveProps(nextProps: Readonly) { - // update the observable locus only if nextProps.locus is different than the current one - // no need to update if it is the same as the current one - if (this.locus !== nextProps.locus) { - this.locus = nextProps.locus; - } - } - private get tracksWidth(): number { return this.props.containerWidth - 40; } @@ -391,16 +391,12 @@ export default class GenomicOverview extends React.Component< private handleLocusChange(locus: string) { // update the observable locus only if it is different than the current one // no need to update (and re-render) if it is same as the current one - if (this.locus !== locus) { - this.locus = locus; - } - - if (this.props.handleLocusChange) { - this.props.handleLocusChange(locus); + if (this.store.activeLocus !== locus) { + this.store.activeLocus = locus; } // switch to advanced view if locus is updated to anything other than whole genome - if (this.locus !== WHOLE_GENOME) { + if (this.store.activeLocus !== WHOLE_GENOME) { this.compactIgvView = false; } } @@ -409,7 +405,7 @@ export default class GenomicOverview extends React.Component< private handleResetZoom() { // reset the observable locus to whole genome if it is not set to whole genome already // no need to reset (and re-render) if it is already set to whole genome - if (this.locus !== WHOLE_GENOME) { + if (this.store.activeLocus !== WHOLE_GENOME) { this.handleLocusChange(WHOLE_GENOME); } }