added suggestions to move toggle function and axis mode property in plot

cBioPortal · Dec 5, 2022 · 32b8665 · 32b8665
1 parent b58c35b
commit 32b8665
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/src/pages/groupComparison/GroupComparisonMutationsTab.tsx b/src/pages/groupComparison/GroupComparisonMutationsTab.tsx
@@ -16,6 +16,7 @@ import GroupComparisonMutationsTabPlot from './GroupComparisonMutationsTabPlot';
 import OverlapExclusionIndicator from './OverlapExclusionIndicator';
 import { MSKTab, MSKTabs } from 'shared/components/MSKTabs/MSKTabs';
 import GroupComparisonURLWrapper from './GroupComparisonURLWrapper';
+import { AxisScale } from 'react-mutation-mapper';
 
 interface IGroupComparisonMutationsTabProps {
     store: GroupComparisonStore;
@@ -60,6 +61,13 @@ export default class GroupComparisonMutationsTab extends React.Component<
         return activeTabId;
     }
 
+    @action.bound
+    private onScaleToggle(selectedScale: AxisScale) {
+        this.props.urlWrapper.updateURL({
+            axisMode: selectedScale,
+        });
+    }
+
     readonly tabUI = MakeMobxView({
         await: () => [this.props.store.availableGenes],
         render: () => {
@@ -132,7 +140,7 @@ export default class GroupComparisonMutationsTab extends React.Component<
                     </div>
                     <GroupComparisonMutationsTabPlot
                         store={this.props.store}
-                        urlWrapper={this.props.urlWrapper}
+                        onScaleToggle={this.onScaleToggle}
                         mutations={_(this.props.store.mutationsByGroup.result!)
                             .values()
                             .flatten()

diff --git a/src/pages/groupComparison/GroupComparisonMutationsTabPlot.tsx b/src/pages/groupComparison/GroupComparisonMutationsTabPlot.tsx
@@ -15,11 +15,10 @@ import { MakeMobxView } from 'shared/components/MobxView';
 import { countUniqueMutations } from 'shared/lib/MutationUtils';
 import ErrorMessage from 'shared/components/ErrorMessage';
 import { AxisScale, LollipopTooltipCountInfo } from 'react-mutation-mapper';
-import GroupComparisonURLWrapper from './GroupComparisonURLWrapper';
 
 interface IGroupComparisonMutationsTabPlotProps {
     store: GroupComparisonStore;
-    urlWrapper: GroupComparisonURLWrapper;
+    onScaleToggle: (selectedScale: AxisScale) => void;
     mutations?: Mutation[];
     filters?: any;
 }
@@ -78,21 +77,14 @@ export default class GroupComparisonMutationsTabPlot extends React.Component<
         mutations: Mutation[],
         group: string
     ) {
-        return this.props.urlWrapper.query.axisMode === AxisScale.COUNT
+        return this.props.store.userSelectedAxisMode === AxisScale.COUNT
             ? countUniqueMutations(mutations)
             : (countUniqueMutations(mutations) /
                   this.props.store.groupToProfiledSamples.result![group]
                       .length) *
                   100;
     }
 
-    @action.bound
-    private onScaleToggle(selectedScale: AxisScale) {
-        this.props.urlWrapper.updateURL({
-            axisMode: selectedScale,
-        });
-    }
-
     readonly plotUI = MakeMobxView({
         await: () => [
             this.props.store.mutations,
@@ -132,12 +124,8 @@ export default class GroupComparisonMutationsTabPlot extends React.Component<
                             plotLollipopTooltipCountInfo={
                                 plotLollipopTooltipCountInfo
                             }
-                            axisMode={
-                                this.props.urlWrapper.query.axisMode
-                                    ? this.props.urlWrapper.query.axisMode
-                                    : AxisScale.PERCENT
-                            }
-                            onScaleToggle={this.onScaleToggle}
+                            axisMode={this.props.store.userSelectedAxisMode}
+                            onScaleToggle={this.props.onScaleToggle}
                             plotYAxisLabelFormatter={plotYAxisLabelFormatter}
                         />
                     </>

diff --git a/src/pages/groupComparison/GroupComparisonStore.ts b/src/pages/groupComparison/GroupComparisonStore.ts
@@ -458,6 +458,10 @@ export default class GroupComparisonStore extends ComparisonStore {
         return this.urlWrapper.query.selectedGene;
     }
 
+    @computed get userSelectedAxisMode() {
+        return this.urlWrapper.query.axisMode;
+    }
+
     @computed get activeMutationMapperGene() {
         let gene =
             this.availableGenes.result!.find(