add study level persistence through local storage

cBioPortal · Nov 6, 2023 · 1abe082 · 1abe082
1 parent 6d8be11
commit 1abe082
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 32 deletions.
diff --git a/src/pages/resultsView/ResultsViewPageStore.ts b/src/pages/resultsView/ResultsViewPageStore.ts
@@ -526,6 +526,10 @@ export class ResultsViewPageStore extends AnalysisStore
     get cancerStudyIds() {
         return this.urlWrapper.query.cancer_study_list.split(',');
     }
+    @computed
+    get cancerStudyListSorted() {
+        return this.cancerStudyIds.sort().join(',');
+    }
 
     @computed
     get rppaScoreThreshold() {
@@ -574,11 +578,13 @@ export class ResultsViewPageStore extends AnalysisStore
 
     @observable queryFormVisible: boolean = false;
 
-    @observable _userSelectedClinicalTracksColors: {
-        [label: string]: {
-            [value: string]: RGBAColor;
+    @observable _userSelectedStudiesToClinicalTracksColors: {
+        [studies: string]: {
+            [label: string]: {
+                [value: string]: RGBAColor;
+            };
         };
-    } = {};
+    } = JSON.parse(localStorage.getItem('clinicalTracksColorConfig') || '{}');
 
     @computed get doNonSelectedDownloadableMolecularProfilesExist() {
         return (
@@ -603,20 +609,50 @@ export class ResultsViewPageStore extends AnalysisStore
         // else, set the color in userSelectedClinicalAttributeColors
         if (
             !color &&
-            this._userSelectedClinicalTracksColors[label] &&
-            this._userSelectedClinicalTracksColors[label][value]
+            this._userSelectedStudiesToClinicalTracksColors[
+                this.cancerStudyListSorted
+            ] &&
+            this._userSelectedStudiesToClinicalTracksColors[
+                this.cancerStudyListSorted
+            ][label] &&
+            this._userSelectedStudiesToClinicalTracksColors[
+                this.cancerStudyListSorted
+            ][label][value]
         ) {
-            delete this._userSelectedClinicalTracksColors[label][value];
+            delete this._userSelectedStudiesToClinicalTracksColors[
+                this.cancerStudyListSorted
+            ][label][value];
         } else if (color) {
-            if (!this._userSelectedClinicalTracksColors[label]) {
-                this._userSelectedClinicalTracksColors[label] = {};
+            if (
+                !this._userSelectedStudiesToClinicalTracksColors[
+                    this.cancerStudyListSorted
+                ]
+            ) {
+                this._userSelectedStudiesToClinicalTracksColors[
+                    this.cancerStudyListSorted
+                ] = {};
             }
-            this._userSelectedClinicalTracksColors[label][value] = color;
+            if (
+                !this._userSelectedStudiesToClinicalTracksColors[
+                    this.cancerStudyListSorted
+                ][label]
+            ) {
+                this._userSelectedStudiesToClinicalTracksColors[
+                    this.cancerStudyListSorted
+                ][label] = {};
+            }
+            this._userSelectedStudiesToClinicalTracksColors[
+                this.cancerStudyListSorted
+            ][label][value] = color;
         }
+        localStorage.setItem(
+            'clinicalTracksColorConfig',
+            JSON.stringify(this._userSelectedStudiesToClinicalTracksColors)
+        );
     }
 
-    @computed get userSelectedClinicalTracksColors() {
-        return this._userSelectedClinicalTracksColors;
+    @computed get userSelectedStudiesToClinicalTracksColors() {
+        return this._userSelectedStudiesToClinicalTracksColors;
     }
 
     @action.bound

diff --git a/src/shared/components/oncoprint/OncoprintUtils.ts b/src/shared/components/oncoprint/OncoprintUtils.ts
@@ -949,6 +949,15 @@ export function makeClinicalTracksMobxPromise(
                         Yes: true,
                     };
                 }
+                const userSelectedClinicalTracksColors =
+                    oncoprint.props.store
+                        .userSelectedStudiesToClinicalTracksColors[
+                        oncoprint.props.store.cancerStudyListSorted
+                    ] &&
+                    oncoprint.props.store
+                        .userSelectedStudiesToClinicalTracksColors[
+                        oncoprint.props.store.cancerStudyListSorted
+                    ][attribute.displayName];
                 if (attribute.datatype === 'NUMBER') {
                     ret.datatype = 'number';
                     if (
@@ -988,9 +997,7 @@ export function makeClinicalTracksMobxPromise(
                     (ret as any).category_to_color = Object.assign(
                         {},
                         _.mapValues(dataAndColors.categoryToColor, hexToRGBA),
-                        oncoprint.props.store.userSelectedClinicalTracksColors[
-                            attribute.displayName
-                        ]
+                        userSelectedClinicalTracksColors
                     );
                 } else if (
                     attribute.clinicalAttributeId ===
@@ -1001,19 +1008,11 @@ export function makeClinicalTracksMobxPromise(
                     (ret as any).countsCategoryFills = MUTATION_SPECTRUM_FILLS.slice();
                     _.forEach((ret as any).countsCategoryLabels, (label, i) => {
                         if (
-                            oncoprint.props.store
-                                .userSelectedClinicalTracksColors[
-                                attribute.displayName
-                            ] &&
-                            oncoprint.props.store
-                                .userSelectedClinicalTracksColors[
-                                attribute.displayName
-                            ][label]
+                            userSelectedClinicalTracksColors &&
+                            userSelectedClinicalTracksColors[label]
                         ) {
                             (ret as any).countsCategoryFills[i] =
-                                oncoprint.props.store.userSelectedClinicalTracksColors[
-                                    attribute.displayName
-                                ][label];
+                                userSelectedClinicalTracksColors[label];
                         }
                     });
                 }

diff --git a/src/shared/components/oncoprint/ResultsViewOncoprint.tsx b/src/shared/components/oncoprint/ResultsViewOncoprint.tsx
@@ -93,7 +93,7 @@ import { toDirectionString } from './SortUtils';
 import { RestoreClinicalTracksMenu } from 'pages/resultsView/oncoprint/RestoreClinicalTracksMenu';
 import { Modal } from 'react-bootstrap';
 import ClinicalTrackColorPicker from './ClinicalTrackColorPicker';
-import { hexToRGBA } from 'shared/lib/Colors';
+import { hexToRGBA, rgbaToHex } from 'shared/lib/Colors';
 
 interface IResultsViewOncoprintProps {
     divId: string;
@@ -1993,12 +1993,16 @@ export default class ResultsViewOncoprint extends React.Component<
                                     disabled={_.every(
                                         this.selectedClinicalTrackValues,
                                         v =>
-                                            getClinicalTrackColor(
-                                                this.selectedClinicalTrack!,
-                                                v as string
+                                            rgbaToHex(
+                                                getClinicalTrackColor(
+                                                    this.selectedClinicalTrack!,
+                                                    v as string
+                                                )
                                             ) ===
-                                            this.getDefaultSelectedClinicalTrackColor(
-                                                v
+                                            rgbaToHex(
+                                                this.getDefaultSelectedClinicalTrackColor(
+                                                    v
+                                                ) as RGBAColor
                                             )
                                     )}
                                     onClick={() => {