diff --git a/packages/react-mutation-mapper/src/component/lollipopMutationPlot/AxisScaleSwitch.tsx b/packages/react-mutation-mapper/src/component/lollipopMutationPlot/AxisScaleSwitch.tsx index fe156e726da..252a987ad34 100644 --- 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 index fb3444c2803..87b5c8a527b 100644 --- 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< 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 index cbfa0acc2fc..79ac483aa38 100644 --- 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 index eccffca06b1..e398e83af90 100644 --- 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