Merge pull request #4436 from gblaih/group-comparison-lollipop-plot-s…

…cale-url Capture selected scale in URL in group comparison lollipop plot
cBioPortal · Dec 5, 2022 · 6f47580 · 6f47580
2 parents 2632ec8 + 32b8665
commit 6f47580
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 13 deletions.
diff --git a/packages/react-mutation-mapper/src/component/lollipopMutationPlot/AxisScaleSwitch.tsx b/packages/react-mutation-mapper/src/component/lollipopMutationPlot/AxisScaleSwitch.tsx
@@ -55,6 +55,11 @@ export class AxisScaleSwitch extends React.Component<
                         this.props.selectedScale === scale
                             ? 'bolder'
                             : 'normal',
+                    color:
+                        this.props.selectedScale === scale ? '#fff' : '#6c757d',
+                    backgroundColor:
+                        this.props.selectedScale === scale ? '#6c757d' : '#fff',
+                    borderColor: '#6c757d',
                 }}
                 onClick={onClick}
             >

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,6 +140,7 @@ export default class GroupComparisonMutationsTab extends React.Component<
                     </div>
                     <GroupComparisonMutationsTabPlot
                         store={this.props.store}
+                        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
@@ -18,6 +18,7 @@ import { AxisScale, LollipopTooltipCountInfo } from 'react-mutation-mapper';
 
 interface IGroupComparisonMutationsTabPlotProps {
     store: GroupComparisonStore;
+    onScaleToggle: (selectedScale: AxisScale) => void;
     mutations?: Mutation[];
     filters?: any;
 }
@@ -37,7 +38,6 @@ function plotYAxisLabelFormatter(symbol: string, groupName: string) {
         }
     }
     return `${symbol} ${label}`;
-    // return `${symbol} ${groupName}`;
 }
 
 function plotLollipopTooltipCountInfo(
@@ -59,7 +59,6 @@ export default class GroupComparisonMutationsTabPlot extends React.Component<
     IGroupComparisonMutationsTabPlotProps,
     {}
 > {
-    @observable public axisMode: AxisScale = AxisScale.PERCENT;
     constructor(props: IGroupComparisonMutationsTabPlotProps) {
         super(props);
         makeObservable(this);
@@ -78,17 +77,12 @@ export default class GroupComparisonMutationsTabPlot extends React.Component<
         mutations: Mutation[],
         group: string
     ) {
-        return this.axisMode === AxisScale.PERCENT
-            ? (countUniqueMutations(mutations) /
+        return this.props.store.userSelectedAxisMode === AxisScale.COUNT
+            ? countUniqueMutations(mutations)
+            : (countUniqueMutations(mutations) /
                   this.props.store.groupToProfiledSamples.result![group]
                       .length) *
-                  100
-            : countUniqueMutations(mutations);
-    }
-
-    @action.bound
-    private onScaleToggle(selectedScale: AxisScale) {
-        this.axisMode = selectedScale;
+                  100;
     }
 
     readonly plotUI = MakeMobxView({
@@ -130,8 +124,8 @@ export default class GroupComparisonMutationsTabPlot extends React.Component<
                             plotLollipopTooltipCountInfo={
                                 plotLollipopTooltipCountInfo
                             }
-                            axisMode={this.axisMode}
-                            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(

diff --git a/src/pages/groupComparison/GroupComparisonURLWrapper.ts b/src/pages/groupComparison/GroupComparisonURLWrapper.ts
@@ -15,6 +15,7 @@ import {
 } from 'shared/lib/comparison/ComparisonStoreUtils';
 import { getServerConfig } from 'config/config';
 import { MapValues } from 'shared/lib/TypeScriptUtils';
+import { AxisScale } from 'react-mutation-mapper';
 
 export type GroupComparisonURLQuery = {
     comparisonId: string;
@@ -24,6 +25,7 @@ export type GroupComparisonURLQuery = {
     patientEnrichments?: string;
     selectedEnrichmentEventTypes: string;
     selectedGene?: string;
+    axisMode?: AxisScale;
 };
 
 export default class GroupComparisonURLWrapper
@@ -40,6 +42,7 @@ export default class GroupComparisonURLWrapper
                 patientEnrichments: { isSessionProp: false },
                 selectedEnrichmentEventTypes: { isSessionProp: true },
                 selectedGene: { isSessionProp: false },
+                axisMode: { isSessionProp: false },
             },
             true,
             getServerConfig().session_url_length_threshold