Merge pull request cBioPortal#89 from onursumer/y-axis-max-reset

Added LollipopPlotControlsConfig
onursumer · Sep 16, 2019 · ff37925 · ff37925
2 parents 4f9cfde + fe4ca07
commit ff37925
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-mutation-mapper",
-  "version": "0.3.0-beta.3",
+  "version": "0.3.0-beta.4",
   "description": "Generic Mutation Mapper",
   "author": "cBioPortal",
   "license": "GNU Affero General Public License v3.0",

diff --git a/src/LollipopMutationPlot.tsx b/src/LollipopMutationPlot.tsx
@@ -8,12 +8,14 @@ import {Collapse} from "react-collapse";
 import $ from "jquery";
 
 import {DomainSpec} from "./model/DomainSpec";
+import {LollipopPlotControlsConfig} from "./model/LollipopPlotControlsConfig";
 import {LollipopPlacement, LollipopSpec} from "./model/LollipopSpec";
 import {MobxCache} from "./model/MobxCache";
 import {Mutation} from "./model/Mutation";
 import {MutationMapperStore} from "./model/MutationMapperStore";
 import {PfamDomain, PfamDomainRange} from "./model/Pfam";
 import {SequenceSpec} from "./model/SequenceSpec";
+import {DefaultLollipopPlotControlsConfig} from "./store/DefaultLollipopPlotControlsConfig";
 import {
     calcCountRange,
     getYAxisMaxInputValue,
@@ -36,6 +38,7 @@ const DEFAULT_PROTEIN_LENGTH = 10;
 
 export type LollipopMutationPlotProps = {
     store: MutationMapperStore;
+    controlsConfig?: LollipopPlotControlsConfig;
     pubMedCache?: MobxCache;
     getLollipopColor?: (mutations: Partial<Mutation>[]) => string;
     getMutationCount?: (mutation: Partial<Mutation>) => number;
@@ -73,9 +76,6 @@ export default class LollipopMutationPlot extends React.Component<LollipopMutati
     };
 
     @observable private mouseInPlot:boolean = true;
-    @observable private _yMaxInput: number | undefined;
-    @observable private _bottomYMaxInput: number | undefined;
-    @observable private legendShown:boolean = false;
     @observable private yMaxInputFocused:boolean = false;
     @observable private geneXOffset:number;
     @observable private _trackVisibility: TrackVisibility = initDefaultTrackVisibility();
@@ -91,6 +91,10 @@ export default class LollipopMutationPlot extends React.Component<LollipopMutati
         return this.props.trackVisibility || this._trackVisibility;
     }
 
+    @computed private get controlsConfig(): LollipopPlotControlsConfig {
+        return this.props.controlsConfig || new DefaultLollipopPlotControlsConfig();
+    }
+
     private lollipopTooltip(mutationsAtPosition:Mutation[],
                             countsByPosition:{[pos: number]: number}): JSX.Element
     {
@@ -384,16 +388,16 @@ export default class LollipopMutationPlot extends React.Component<LollipopMutati
 
         this.handlers = {
             handleYAxisMaxSliderChange: action(
-                (value: number) => this._yMaxInput = getYAxisMaxSliderValue(value, this.countRange)
+                (value: number) => this.controlsConfig.yMaxInput = getYAxisMaxSliderValue(value, this.countRange)
             ),
             handleYAxisMaxChange: action(
-                (input: string) => this._yMaxInput = getYAxisMaxInputValue(input, this.countRange)
+                (input: string) => this.controlsConfig.yMaxInput = getYAxisMaxInputValue(input, this.countRange)
             ),
             handleBottomYAxisMaxSliderChange: action(
-                (value: number) => this._bottomYMaxInput= getYAxisMaxSliderValue(value, this.bottomCountRange)
+                (value: number) => this.controlsConfig.bottomYMaxInput = getYAxisMaxSliderValue(value, this.bottomCountRange)
             ),
             handleBottomYAxisMaxChange: action(
-                (input: string) => this._bottomYMaxInput = getYAxisMaxInputValue(input, this.bottomCountRange)
+                (input: string) => this.controlsConfig.bottomYMaxInput = getYAxisMaxInputValue(input, this.bottomCountRange)
             ),
             onYMaxInputFocused:()=>{
                 this.yMaxInputFocused = true;
@@ -402,7 +406,7 @@ export default class LollipopMutationPlot extends React.Component<LollipopMutati
                 this.yMaxInputFocused = false;
             },
             handleToggleLegend: action(()=>{
-                this.legendShown = !this.legendShown;
+                this.controlsConfig.legendShown = !this.controlsConfig.legendShown;
             }),
             onMouseEnterPlot: action(()=>{ this.mouseInPlot = true;}),
             onMouseLeavePlot: action(()=>{ this.mouseInPlot = false;})
@@ -411,7 +415,7 @@ export default class LollipopMutationPlot extends React.Component<LollipopMutati
 
     @computed get yMaxSlider() {
         // we don't want max slider value to go over the actual max, even if the user input goes over it
-        return Math.min(this.countRange[1], this._yMaxInput || this.countRange[1]);
+        return Math.min(this.countRange[1], this.controlsConfig.yMaxInput || this.countRange[1]);
     }
 
     @computed get yMaxSliderStep() {
@@ -420,7 +424,7 @@ export default class LollipopMutationPlot extends React.Component<LollipopMutati
 
     @computed get bottomYMaxSlider() {
         // we don't want max slider value to go over the actual max, even if the user input goes over it
-        return Math.min(this.bottomCountRange[1], this._bottomYMaxInput || this.bottomCountRange[1]);
+        return Math.min(this.bottomCountRange[1], this.controlsConfig .bottomYMaxInput || this.bottomCountRange[1]);
     }
 
     @computed get bottomYMaxSliderStep() {
@@ -429,12 +433,12 @@ export default class LollipopMutationPlot extends React.Component<LollipopMutati
 
     @computed get yMaxInput() {
         // allow the user input value to go over the actual count range
-        return this._yMaxInput === undefined ? this.countRange[1]: this._yMaxInput;
+        return this.controlsConfig.yMaxInput === undefined ? this.countRange[1]: this.controlsConfig.yMaxInput;
     }
 
     @computed get bottomYMaxInput() {
         // allow the user input value to go over the actual count range
-        return this._bottomYMaxInput === undefined ? this.bottomCountRange[1]: this._bottomYMaxInput;
+        return this.controlsConfig.bottomYMaxInput === undefined ? this.bottomCountRange[1]: this.controlsConfig.bottomYMaxInput;
     }
 
     @autobind
@@ -505,7 +509,7 @@ export default class LollipopMutationPlot extends React.Component<LollipopMutati
                         onTrackVisibilityChange={this.onTrackVisibilityChange}
                         getSVG={this.getSVG}
                     />
-                    <Collapse isOpened={this.legendShown}>
+                    <Collapse isOpened={this.controlsConfig.legendShown}>
                         {this.props.legend || <DefaultLollipopPlotLegend />}
                     </Collapse>
                     <LollipopPlot

diff --git a/src/MutationMapper.tsx b/src/MutationMapper.tsx
@@ -7,6 +7,7 @@ import {DefaultPubMedCache} from "./cache/DefaultPubMedCache";
 import FilterResetPanel from "./component/FilterResetPanel";
 import {DataFilter} from "./model/DataFilter";
 import {ApplyFilterFn, FilterApplier} from "./model/FilterApplier";
+import {LollipopPlotControlsConfig} from "./model/LollipopPlotControlsConfig";
 import {MobxCache} from "./model/MobxCache";
 import {Mutation} from "./model/Mutation";
 import MutationMapperStore from "./model/MutationMapperStore";
@@ -19,12 +20,14 @@ import DefaultMutationTable from "./DefaultMutationTable";
 import GeneSummary from "./GeneSummary";
 import LollipopMutationPlot from "./LollipopMutationPlot";
 import {TrackDataStatus, TrackName, TrackVisibility} from "./TrackSelector";
+import {DefaultLollipopPlotControlsConfig} from "./store/DefaultLollipopPlotControlsConfig";
 
 export type MutationMapperProps = {
     hugoSymbol?: string;
     entrezGeneId?: number;
     data?: Partial<Mutation>[];
     store?: MutationMapperStore;
+    lollipopPlotControlsConfig?: LollipopPlotControlsConfig;
     windowWrapper?: {size: {width: number, height: number}};
     trackVisibility?: TrackVisibility;
     tracks?: TrackName[];
@@ -189,6 +192,11 @@ export default class MutationMapper<P extends MutationMapperProps = MutationMapp
         );
     }
 
+    @computed
+    protected get lollipopPlotControlsConfig(): LollipopPlotControlsConfig {
+        return this.props.lollipopPlotControlsConfig ? this.props.lollipopPlotControlsConfig!: new DefaultLollipopPlotControlsConfig();
+    }
+
     protected get pubMedCache() {
         return this.props.pubMedCache || new DefaultPubMedCache();
     }
@@ -240,6 +248,7 @@ export default class MutationMapper<P extends MutationMapperProps = MutationMapp
         return (
             <LollipopMutationPlot
                 store={this.store}
+                controlsConfig={this.lollipopPlotControlsConfig}
                 pubMedCache={this.pubMedCache}
                 geneWidth={this.geneWidth}
                 trackVisibility={this.trackVisibility}

diff --git a/src/model/LollipopPlotControlsConfig.ts b/src/model/LollipopPlotControlsConfig.ts
@@ -0,0 +1,7 @@
+export interface LollipopPlotControlsConfig {
+    yMaxInput: number | undefined;
+    bottomYMaxInput: number | undefined;
+    legendShown: boolean;
+}
+
+export default LollipopPlotControlsConfig;
diff --git a/src/store/DefaultLollipopPlotControlsConfig.ts b/src/store/DefaultLollipopPlotControlsConfig.ts
@@ -0,0 +1,17 @@
+import {observable} from "mobx";
+
+import LollipopPlotControlsConfig from "../model/LollipopPlotControlsConfig";
+
+export class DefaultLollipopPlotControlsConfig implements LollipopPlotControlsConfig
+{
+    @observable
+    public bottomYMaxInput: number | undefined;
+
+    @observable
+    public legendShown = false;
+
+    @observable
+    public yMaxInput: number | undefined;
+}
+
+export default DefaultLollipopPlotControlsConfig;