Merge pull request #4336 from onursumer/fix-table-page-reset-on-row-c…

…lick Keep table page as is on row click
cBioPortal · Aug 2, 2022 · 2655e1a · 2655e1a
2 parents bfc9bca + 9f649d1
commit 2655e1a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 28 deletions.
diff --git 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
@@ -189,6 +189,7 @@ export function tabs(
                         style={{ top: -10 }}
                     >
                         <GenomicOverview
+                            store={pageComponent.patientViewPageStore}
                             mergedMutations={
                                 pageComponent.patientViewPageStore
                                     .mergedMutationDataFilteredByGene
@@ -218,8 +219,6 @@ export function tabs(
                                 pageComponent.toggleGenePanelModal
                             }
                             disableTooltip={pageComponent.genePanelModal.isOpen}
-                            locus={pageComponent.activeLocus}
-                            handleLocusChange={pageComponent.handleLocusChange}
                             // assuming that all studies have the same reference genome
                             genome={
                                 pageComponent.patientViewPageStore.studies

diff --git a/src/pages/patientView/clinicalInformation/PatientViewPageStore.ts b/src/pages/patientView/clinicalInformation/PatientViewPageStore.ts
@@ -311,6 +311,7 @@ export class PatientViewPageStore {
 
     public internalClient: CBioPortalAPIInternal;
 
+    @observable public activeLocus: string | undefined;
     @observable public activeTabId = '';
 
     @observable private _patientId = '';

diff --git a/src/pages/patientView/genomicOverview/GenomicOverview.tsx b/src/pages/patientView/genomicOverview/GenomicOverview.tsx
@@ -48,11 +48,19 @@ interface IGenomicOverviewProps {
     sampleIdToCopyNumberGenePanelId?: { [sampleId: string]: string };
     onSelectGenePanel?: (name: string) => 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<IGenomicOverviewProps>) {
-        // 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);
         }
     }