From 9f649d1c3ce8f26c29dafa767edac7c8cb531f5f Mon Sep 17 00:00:00 2001
From: Onur Sumer <s.onur.sumer@gmail.com>
Date: Fri, 22 Jul 2022 15:56:30 -0400
Subject: [PATCH] keep table page as is on row click

---
 src/pages/patientView/PatientViewPage.tsx     |  7 +---
 src/pages/patientView/PatientViewPageTabs.tsx |  3 +-
 .../PatientViewPageStore.ts                   |  1 +
 .../genomicOverview/GenomicOverview.tsx       | 38 +++++++++----------
 4 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/pages/patientView/PatientViewPage.tsx b/src/pages/patientView/PatientViewPage.tsx
index 8e61bfbcab1..dc569507b43 100644
--- a/src/pages/patientView/PatientViewPage.tsx
+++ b/src/pages/patientView/PatientViewPage.tsx
@@ -109,9 +109,6 @@ export default class PatientViewPage extends React.Component<
 
     public patientViewPageStore: PatientViewPageStore;
 
-    @observable
-    public activeLocus: string | undefined;
-
     constructor(props: IPatientViewPageProps) {
         super(props);
         makeObservable(this);
@@ -244,8 +241,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 06a12cd6a6d..5b1dcc7ea39 100644
--- a/src/pages/patientView/PatientViewPageTabs.tsx
+++ b/src/pages/patientView/PatientViewPageTabs.tsx
@@ -188,6 +188,7 @@ export function tabs(
                         style={{ top: -10 }}
                     >
                         <GenomicOverview
+                            store={pageComponent.patientViewPageStore}
                             mergedMutations={
                                 pageComponent.patientViewPageStore
                                     .mergedMutationDataFilteredByGene
@@ -217,8 +218,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
index fd8a6e7e8af..cbedfcab433 100644
--- 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
index 24032529430..6b9a50725aa 100644
--- 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);
         }
     }