Make custom bind menu settings unique for each chart

cBioPortal · Mar 21, 2022 · fab29f5 · fab29f5
1 parent ac09acc
commit fab29f5
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 22 deletions.
diff --git a/src/pages/studyView/StudyViewPageStore.ts b/src/pages/studyView/StudyViewPageStore.ts
@@ -380,11 +380,10 @@ export class StudyViewPageStore
     @observable numberOfVisibleColorChooserModals = 0;
     @observable userGroupColors: { [groupId: string]: string } = {};
 
-    @observable binMethod: BinMethodOption = BinMethodOption.CUSTOM;
-    binsGeneratorConfig: BinsGeneratorConfig = {
-        anchorValue: 0,
-        binSize: 0,
-    };
+    chartsBinMethod: { [chartKey: string]: BinMethodOption } = {};
+    chartsBinsGeneratorConfigs: {
+        [chartKey: string]: BinsGeneratorConfig;
+    } = {};
 
     private getDataBinFilterSet(uniqueKey: string) {
         if (this.isGenericAssayChart(uniqueKey)) {
@@ -3267,20 +3266,27 @@ export class StudyViewPageStore
 
     @action.bound
     public updateGenerateBinsConfig(
+        uniqueKey: string,
         binSize: number,
         anchorValue: number
     ): void {
-        this.binsGeneratorConfig.binSize = binSize;
-        this.binsGeneratorConfig.anchorValue = anchorValue;
+        this.chartsBinsGeneratorConfigs[uniqueKey] = {
+            binSize,
+            anchorValue,
+        };
     }
 
     @action.bound
     public updateCustomBins(
         uniqueKey: string,
         bins: number[],
-        binMethod: 'MEDIAN' | 'QUARTILE' | 'CUSTOM' | 'GENERATE',
+        binMethod: BinMethodOption,
         binsGeneratorConfig: BinsGeneratorConfig
     ): void {
+        // Persist menu selection for when the menu reopens.
+        this.chartsBinMethod[uniqueKey] = binMethod;
+        this.chartsBinsGeneratorConfigs[uniqueKey] = binsGeneratorConfig;
+
         if (this.isGeneSpecificChart(uniqueKey)) {
             let newFilter = _.clone(
                 this._genomicDataBinFilterSet.get(uniqueKey)

diff --git a/src/pages/studyView/charts/barChart/CustomBinsModal.tsx b/src/pages/studyView/charts/barChart/CustomBinsModal.tsx
@@ -23,7 +23,11 @@ export type ICustomBinsProps = {
         binMethod: string,
         binsGeneratorConfig: BinsGeneratorConfig
     ) => void;
-    updateGenerateBinsConfig: (binSize: number, anchorValue: number) => void;
+    updateGenerateBinsConfig: (
+        uniqueKey: string,
+        binSize: number,
+        anchorValue: number
+    ) => void;
     store: StudyViewPageStore;
 };
 
@@ -34,7 +38,11 @@ export default class CustomBinsModal extends React.Component<
 > {
     binSeparator: string = ',';
     @observable private currentBinsValue = '';
-    @observable private currentBinsGeneratorConfig: BinsGeneratorConfig;
+    @observable private currentBinMethod = BinMethodOption.CUSTOM;
+    @observable private currentBinsGeneratorConfig: BinsGeneratorConfig = {
+        binSize: 0,
+        anchorValue: 0,
+    };
 
     constructor(props: Readonly<ICustomBinsProps>) {
         super(props);
@@ -43,13 +51,29 @@ export default class CustomBinsModal extends React.Component<
             const bins = _.sortBy(this.props.currentBins);
             this.currentBinsValue = bins.join(`${this.binSeparator} `);
         }
-        this.currentBinsGeneratorConfig = this.props.store.binsGeneratorConfig;
+        if (this.props.store.chartsBinMethod[this.props.chartMeta.uniqueKey]) {
+            this.currentBinMethod = this.props.store.chartsBinMethod[
+                this.props.chartMeta.uniqueKey
+            ];
+        }
+        if (
+            this.props.store.chartsBinsGeneratorConfigs[
+                this.props.chartMeta.uniqueKey
+            ]
+        ) {
+            const binConfig = this.props.store.chartsBinsGeneratorConfigs[
+                this.props.chartMeta.uniqueKey
+            ];
+            this.currentBinsGeneratorConfig.binSize = binConfig.binSize;
+            this.currentBinsGeneratorConfig.anchorValue = binConfig.anchorValue;
+            this.currentBinsGeneratorConfig.anchorValue = binConfig.anchorValue;
+        }
     }
 
     @autobind
     updateCurrentBinsValue() {
         let newBins: number[] = [];
-        if (this.props.store.binMethod === BinMethodOption.CUSTOM) {
+        if (this.currentBinMethod === BinMethodOption.CUSTOM) {
             newBins = _.sortBy(
                 this.newStringBins
                     .filter(item => item !== '')
@@ -59,14 +83,15 @@ export default class CustomBinsModal extends React.Component<
         }
 
         this.props.updateGenerateBinsConfig(
+            this.props.chartMeta.uniqueKey,
             this.currentBinsGeneratorConfig.binSize,
             this.currentBinsGeneratorConfig.anchorValue
         );
 
         this.props.updateCustomBins(
             this.props.chartMeta.uniqueKey,
             newBins,
-            this.props.store.binMethod,
+            this.currentBinMethod,
             this.currentBinsGeneratorConfig
         );
 
@@ -84,17 +109,21 @@ export default class CustomBinsModal extends React.Component<
     }
 
     changeBinsCheckbox(option: BinMethodOption) {
-        this.props.store.binMethod = option;
+        this.currentBinMethod = option;
     }
 
     @action
     updateBinSize(value: number) {
-        this.currentBinsGeneratorConfig.binSize = value;
+        if (_.isNumber(value) && !_.isNaN(value)) {
+            this.currentBinsGeneratorConfig.binSize = value;
+        }
     }
 
     @action
     updateAnchorValue(value: number) {
-        this.currentBinsGeneratorConfig.anchorValue = value;
+        if (_.isNumber(value) && !_.isNaN(value)) {
+            this.currentBinsGeneratorConfig.anchorValue = value;
+        }
     }
 
     render() {
@@ -112,7 +141,7 @@ export default class CustomBinsModal extends React.Component<
                     <div>
                         <LabeledCheckbox
                             checked={
-                                this.props.store.binMethod ===
+                                this.currentBinMethod ===
                                 BinMethodOption.QUARTILE
                             }
                             onChange={event =>
@@ -127,8 +156,7 @@ export default class CustomBinsModal extends React.Component<
                     <div>
                         <LabeledCheckbox
                             checked={
-                                this.props.store.binMethod ===
-                                BinMethodOption.MEDIAN
+                                this.currentBinMethod === BinMethodOption.MEDIAN
                             }
                             onChange={event =>
                                 this.changeBinsCheckbox(BinMethodOption.MEDIAN)
@@ -140,7 +168,7 @@ export default class CustomBinsModal extends React.Component<
                     <div>
                         <LabeledCheckbox
                             checked={
-                                this.props.store.binMethod ===
+                                this.currentBinMethod ===
                                 BinMethodOption.GENERATE
                             }
                             onChange={event =>
@@ -199,8 +227,7 @@ export default class CustomBinsModal extends React.Component<
                     <div>
                         <LabeledCheckbox
                             checked={
-                                this.props.store.binMethod ===
-                                BinMethodOption.CUSTOM
+                                this.currentBinMethod === BinMethodOption.CUSTOM
                             }
                             onChange={event =>
                                 this.changeBinsCheckbox(BinMethodOption.CUSTOM)