diff --git a/src/pages/groupComparison/MultipleCategoryBarPlot.tsx b/src/pages/groupComparison/MultipleCategoryBarPlot.tsx index 41a7d8b39e4..808acd34c43 100644 --- a/src/pages/groupComparison/MultipleCategoryBarPlot.tsx +++ b/src/pages/groupComparison/MultipleCategoryBarPlot.tsx @@ -34,7 +34,7 @@ import classnames from 'classnames'; import { toConditionalPrecisionWithMinimum } from 'shared/lib/FormatUtils'; import { IStringAxisData } from 'shared/components/plots/PlotsTabUtils'; import WindowStore from 'shared/components/window/WindowStore'; - +import { SortByOptions } from 'shared/components/plots/PlotsTab'; export interface IMultipleCategoryBarPlotProps { svgId?: string; domainPadding?: number; @@ -432,9 +432,9 @@ export default class MultipleCategoryBarPlot extends React.Component< @computed get labels() { if (this.data.length > 0) { if ( - this.props.sortByOption === 'SortByTotalSum' || + this.props.sortByOption === SortByOptions.SortByTotalSum || (this.props.sortByOption !== '' && - this.props.sortByOption !== 'alphabetically') + this.props.sortByOption !== SortByOptions.Alphabetically) ) { return getSortedMajorCategories( this.data, diff --git a/src/shared/components/plots/MultipleCategoryBarPlotUtils.ts b/src/shared/components/plots/MultipleCategoryBarPlotUtils.ts index 2679f5cd5d4..28ce6cdc410 100644 --- a/src/shared/components/plots/MultipleCategoryBarPlotUtils.ts +++ b/src/shared/components/plots/MultipleCategoryBarPlotUtils.ts @@ -1,7 +1,12 @@ import { IStringAxisData } from './PlotsTabUtils'; +import { SortByOptions } from './PlotsTab'; import _ from 'lodash'; import { IMultipleCategoryBarPlotData } from '../../../pages/groupComparison/MultipleCategoryBarPlot'; - +interface CountItem { + majorCategory: string; + count: number; + percentage: number; +} export function makePlotData( horzData: IStringAxisData['data'], vertData: IStringAxisData['data'], @@ -103,7 +108,7 @@ export function getSortedMajorCategories( sortByOption: string | undefined ): string[] { if (sortByOption === 'SortByTotalSum') { - const majorCategoryCounts: any = {}; + const majorCategoryCounts: { [key: string]: number } = {}; data.forEach(item => { item.counts.forEach(countItem => { @@ -114,11 +119,14 @@ export function getSortedMajorCategories( majorCategoryCounts[majorCategory] += count; }); }); - + console.log(majorCategoryCounts, 'this is major'); return Object.keys(majorCategoryCounts).sort( (a, b) => majorCategoryCounts[b] - majorCategoryCounts[a] ); - } else if (sortByOption !== '' && sortByOption !== 'alphabetically') { + } else if ( + sortByOption !== '' && + sortByOption !== SortByOptions.Alphabetically + ) { const sortedEntityData = data.find( item => item.minorCategory === sortByOption ); @@ -138,15 +146,19 @@ export function sortDataByOption( const sortedMajorCategories = getSortedMajorCategories(data, sortByOption); if (sortByOption === 'SortByTotalSum' || sortedMajorCategories.length > 0) { - const reorderCounts = (counts: any) => { - return sortedMajorCategories.map(category => { - return counts.find( - (countItem: any) => countItem.majorCategory === category - ); - }); + const reorderCounts = (counts: CountItem[]): CountItem[] => { + console.log('Counts structure:', counts); + return sortedMajorCategories + .map(category => + counts.find( + (countItem: CountItem) => + countItem.majorCategory === category + ) + ) + .filter((item): item is CountItem => item !== undefined); // Filter out undefined values }; - data.forEach(item => { + data.forEach((item: IMultipleCategoryBarPlotData) => { item.counts = reorderCounts(item.counts); }); @@ -157,11 +169,13 @@ export function sortDataByOption( if (sortedEntityData) { data = data.filter(item => item.minorCategory !== sortByOption); data.unshift(sortedEntityData); + } else { + return data; // Early return if no sorted entity found } } } - return data; + return data; // Return the sorted data } export function makeBarSpecs( @@ -188,7 +202,7 @@ export function makeBarSpecs( if ( sortByOption && sortByOption !== '' && - sortByOption !== 'alphabetically' + sortByOption !== SortByOptions.Alphabetically ) { data = sortDataByOption(data, sortByOption); } else { @@ -212,7 +226,8 @@ export function makeBarSpecs( ); return { fill, - data: (sortByOption != '' && sortByOption != 'alphabetically' + data: (sortByOption != '' && + sortByOption != SortByOptions.Alphabetically ? counts : sortedCounts ).map((obj, index) => ({ diff --git a/src/shared/components/plots/PlotsTab.tsx b/src/shared/components/plots/PlotsTab.tsx index 2210469ba65..99dd6ee7eef 100644 --- a/src/shared/components/plots/PlotsTab.tsx +++ b/src/shared/components/plots/PlotsTab.tsx @@ -209,6 +209,11 @@ export enum DiscreteVsDiscretePlotType { Table = 'Table', } +export enum SortByOptions { + Alphabetically = 'alphabetically', + SortByTotalSum = 'SortByTotalSum', +} + export enum MutationCountBy { MutationType = 'MutationType', MutatedVsWildType = 'MutatedVsWildType', @@ -441,7 +446,7 @@ export default class PlotsTab extends React.Component { private scrollingDummyPane = false; @observable plotElementWidth = 0; @observable sortByDropDownOptions: { value: string; label: string }[] = []; - @observable sortByOption: string = 'alphabetically'; + @observable sortByOption: string = SortByOptions.Alphabetically; @observable boxPlotSortByMedian = false; @observable.ref searchCaseInput: string; @observable.ref searchMutationInput: string; @@ -465,8 +470,8 @@ export default class PlotsTab extends React.Component { @observable _vertGenericAssaySearchText: string = ''; private defaultOptions = [ - { value: 'alphabetically', label: 'Alphabetically' }, - { value: 'SortByTotalSum', label: 'Number of samples' }, + { value: SortByOptions.Alphabetically, label: 'Alphabetically' }, + { value: SortByOptions.SortByTotalSum, label: 'Number of samples' }, ]; @action.bound @@ -4449,7 +4454,7 @@ export default class PlotsTab extends React.Component { )} - {this.stackedBar && ( + {this.discreteVsDiscretePlotType == 'StackedBar' && (