From 6cfd7c724619de2c20f4ae17f159e2725a7e83f8 Mon Sep 17 00:00:00 2001 From: suraj Date: Tue, 16 Apr 2024 16:19:23 +0530 Subject: [PATCH 1/5] sorting-functionality-enabled --- src/pages/groupComparison/ClinicalData.tsx | 1 + .../MultipleCategoryBarPlot.tsx | 66 +++++++++- ...icAssayCategoricalEnrichmentsContainer.tsx | 1 + .../MultipleCategoryBarPlotUtils.spec.ts | 99 ++++++++++----- .../plots/MultipleCategoryBarPlotUtils.ts | 113 +++++++++++++++++- src/shared/components/plots/PlotsTab.tsx | 58 ++++++++- 6 files changed, 297 insertions(+), 41 deletions(-) diff --git a/src/pages/groupComparison/ClinicalData.tsx b/src/pages/groupComparison/ClinicalData.tsx index 80f3da4443c..4361a583b96 100644 --- a/src/pages/groupComparison/ClinicalData.tsx +++ b/src/pages/groupComparison/ClinicalData.tsx @@ -937,6 +937,7 @@ export default class ClinicalData extends React.Component< ? this.highlightedRow.qValue : null } + sortOption={'sortByAlphabet'} /> ); } diff --git a/src/pages/groupComparison/MultipleCategoryBarPlot.tsx b/src/pages/groupComparison/MultipleCategoryBarPlot.tsx index ec6fa6e8dc8..398700b8772 100644 --- a/src/pages/groupComparison/MultipleCategoryBarPlot.tsx +++ b/src/pages/groupComparison/MultipleCategoryBarPlot.tsx @@ -58,6 +58,7 @@ export interface IMultipleCategoryBarPlotProps { svgRef?: (svgContainer: SVGElement | null) => void; pValue: number | null; qValue: number | null; + sortOption: string; } export interface IMultipleCategoryBarPlotData { @@ -234,6 +235,7 @@ export default class MultipleCategoryBarPlot extends React.Component< private get legend() { if (this.legendData.length > 0) { + console.log(this.props, 'This.propss'); return ( { + item.counts.sort((a, b) => + a.majorCategory.localeCompare(b.majorCategory) + ); + }); + const totalSumArray: TotalSumItem[] = []; + this.data.forEach(item => { + item.counts.forEach(countItem => { + const existingItem = totalSumArray.find( + sumItem => sumItem.majorCategory === countItem.majorCategory + ); + if (existingItem) { + existingItem.sum += countItem.count; + existingItem.minorCategory.push({ + name: item.minorCategory, + count: countItem.count, + percentage: countItem.percentage, + }); + } else { + totalSumArray.push({ + majorCategory: countItem.majorCategory, + sum: countItem.count, + minorCategory: [ + { + name: item.minorCategory, + count: countItem.count, + percentage: countItem.percentage, + }, + ], + }); + } + }); + }); + + console.log(totalSumArray, 'totalssufrommulti'); + totalSumArray.sort((a, b) => b.sum - a.sum); + + const labelss = totalSumArray.map(item => item.majorCategory); + console.log(labelss, 'totalsrommulti'); + + if (this.props.sortOption == 'sortByCount') { + return labelss; + } + if (this.data.length > 0) { - return sortDataByCategory( + const ans = sortDataByCategory( this.data[0].counts.map(c => c.majorCategory), x => x, this.majorCategoryOrder ); + console.log('thisisconsoledataans', ans); + return ans; } else { return []; } @@ -739,7 +798,8 @@ export default class MultipleCategoryBarPlot extends React.Component< this.categoryCoord, !!this.props.horizontalBars, !!this.props.stacked, - !!this.props.percentage + !!this.props.percentage, + this.props.sortOption ); return barSpecs.map(spec => ( @@ -918,6 +979,7 @@ export default class MultipleCategoryBarPlot extends React.Component< } render() { + console.log(this.data, 'this.datas'); if (!this.data.length) { return
No data to plot.
; } diff --git a/src/pages/resultsView/enrichments/GenericAssayCategoricalEnrichmentsContainer.tsx b/src/pages/resultsView/enrichments/GenericAssayCategoricalEnrichmentsContainer.tsx index 9cade505c06..3cf3f89d554 100644 --- a/src/pages/resultsView/enrichments/GenericAssayCategoricalEnrichmentsContainer.tsx +++ b/src/pages/resultsView/enrichments/GenericAssayCategoricalEnrichmentsContainer.tsx @@ -628,6 +628,7 @@ export default class GenericAssayCategoricalEnrichmentsContainer extends React.C qValue={ this.showPAndQ ? this.highlightedRow.qValue : null } + sortOption={'sortByAlphabet'} /> ); diff --git a/src/shared/components/plots/MultipleCategoryBarPlotUtils.spec.ts b/src/shared/components/plots/MultipleCategoryBarPlotUtils.spec.ts index a5389d8d5cf..85f80fda953 100644 --- a/src/shared/components/plots/MultipleCategoryBarPlotUtils.spec.ts +++ b/src/shared/components/plots/MultipleCategoryBarPlotUtils.spec.ts @@ -252,7 +252,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - false + false, + 'sortByAlphabet' ), [] ); @@ -267,7 +268,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - false + false, + 'sortByAlphabet' ), [ { @@ -341,7 +343,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - true + true, + 'sortByAlphabet' ), [ { @@ -415,7 +418,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - false + false, + 'sortByAlphabet' ), [ { @@ -489,7 +493,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - true + true, + 'sortByAlphabet' ), [ { @@ -563,7 +568,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - false + false, + 'sortByAlphabet' ), [ { @@ -637,7 +643,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - true + true, + 'sortByAlphabet' ), [ { @@ -711,7 +718,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - false + false, + 'sortByAlphabet' ), [ { @@ -785,7 +793,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - true + true, + 'sortByAlphabet' ), [ { @@ -861,7 +870,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, false, - false + false, + 'sortByAlphabet' ), [ { @@ -940,7 +950,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, false, - true + true, + 'sortByAlphabet' ), [ { @@ -1019,7 +1030,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, false, - false + false, + 'sortByAlphabet' ), [ { @@ -1098,7 +1110,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, false, - true + true, + 'sortByAlphabet' ), [ { @@ -1177,7 +1190,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, false, - false + false, + 'sortByAlphabet' ), [ { @@ -1256,7 +1270,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, false, - true + true, + 'sortByAlphabet' ), [ { @@ -1335,7 +1350,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, false, - false + false, + 'sortByAlphabet' ), [ { @@ -1414,7 +1430,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, false, - true + true, + 'sortByAlphabet' ), [ { @@ -1494,7 +1511,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - false + false, + 'sortByAlphabet' ), [ { @@ -1568,7 +1586,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - true + true, + 'sortByAlphabet' ), [ { @@ -1642,7 +1661,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - false + false, + 'sortByAlphabet' ), [ { @@ -1716,7 +1736,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - true + true, + 'sortByAlphabet' ), [ { @@ -1790,7 +1811,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - false + false, + 'sortByAlphabet' ), [ { @@ -1864,7 +1886,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - true + true, + 'sortByAlphabet' ), [ { @@ -1938,7 +1961,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - false + false, + 'sortByAlphabet' ), [ { @@ -2012,7 +2036,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, false, false, - true + true, + 'sortByAlphabet' ), [ { @@ -2088,7 +2113,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, false, - false + false, + 'sortByAlphabet' ), [ { @@ -2167,7 +2193,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, true, - true + true, + 'sortByAlphabet' ), [ { @@ -2246,7 +2273,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, false, - false + false, + 'sortByAlphabet' ), [ { @@ -2325,7 +2353,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, true, - true + true, + 'sortByAlphabet' ), [ { @@ -2404,7 +2433,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, false, - false + false, + 'sortByAlphabet' ), [ { @@ -2483,7 +2513,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, true, - true + true, + 'sortByAlphabet' ), [ { @@ -2562,7 +2593,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, false, - false + false, + 'sortByAlphabet' ), [ { @@ -2641,7 +2673,8 @@ describe('MultipleCategoryBarPlotUtils', () => { categoryCoord, true, true, - true + true, + 'sortByAlphabet' ), [ { diff --git a/src/shared/components/plots/MultipleCategoryBarPlotUtils.ts b/src/shared/components/plots/MultipleCategoryBarPlotUtils.ts index cd41f0325a0..a4c9314cdf8 100644 --- a/src/shared/components/plots/MultipleCategoryBarPlotUtils.ts +++ b/src/shared/components/plots/MultipleCategoryBarPlotUtils.ts @@ -1,6 +1,7 @@ import { IStringAxisData } from './PlotsTabUtils'; import _ from 'lodash'; import { IMultipleCategoryBarPlotData } from '../../../pages/groupComparison/MultipleCategoryBarPlot'; +import { marginLeft } from 'pages/patientView/trialMatch/style/trialMatch.module.scss'; export function makePlotData( horzData: IStringAxisData['data'], @@ -79,12 +80,20 @@ export function makePlotData( ); return data; } +interface TotalSumItem { + majorCategory: string; + sum: number; + minorCategory: { name: string; count: number; percentage: number }[]; +} +// Export TotalSumItem for accessibility from other modules if needed +export { TotalSumItem }; export function sortDataByCategory( data: D[], getCategory: (d: D) => string, categoryOrder: { [cat: string]: number } | undefined ) { + // console.log( TotalSumItem[],"totalSumArray inside sortDataByCategory"); return _.sortBy(data, d => { const category = getCategory(d); if (categoryOrder) { @@ -107,7 +116,8 @@ export function makeBarSpecs( categoryCoord: (categoryIndex: number) => number, horizontalBars: boolean, stacked: boolean, - percentage: boolean + percentage: boolean, + sortOption: string ): { fill: string; data: { @@ -121,10 +131,87 @@ export function makeBarSpecs( }[] { // one bar spec per minor category, in correct order - either specified, or alphabetical data = sortDataByCategory(data, d => d.minorCategory, minorCategoryOrder); + // reverse the order of stacked or horizontal bars if ((!horizontalBars && stacked) || (horizontalBars && !stacked)) { data = _.reverse(data); } + console.log(data, 'iscalled2'); + data.forEach(item => { + item.counts.sort((a, b) => + a.majorCategory.localeCompare(b.majorCategory) + ); + }); + console.log(data, 'iscalled211'); + + // interface TotalSumItem { + // majorCategory: string; + // sum: number; + // minorCategory: { name: string; count: number ,percentage:number}[]; + // } + + const totalSumArray: TotalSumItem[] = []; + data.forEach(item => { + item.counts.forEach(countItem => { + const existingItem = totalSumArray.find( + sumItem => sumItem.majorCategory === countItem.majorCategory + ); + if (existingItem) { + existingItem.sum += countItem.count; + existingItem.minorCategory.push({ + name: item.minorCategory, + count: countItem.count, + percentage: countItem.percentage, + }); + } else { + totalSumArray.push({ + majorCategory: countItem.majorCategory, + sum: countItem.count, + minorCategory: [ + { + name: item.minorCategory, + count: countItem.count, + percentage: countItem.percentage, + }, + ], + }); + } + }); + }); + + console.log(totalSumArray, 'totalssu'); + totalSumArray.sort((a, b) => b.sum - a.sum); + const minorCategoryArrays: { + [key: string]: { + majorCategory: string; + count: number; + percentage: number; + }[]; + } = {}; + data.forEach(item => { + // Extract the minorCategory from the current item + const minorCategory = item.minorCategory; + + // Check if the minorCategory already exists in minorCategoryArrays + if (!minorCategoryArrays[minorCategory]) { + // If it doesn't exist, create a new array for it + minorCategoryArrays[minorCategory] = []; + } + + // Find corresponding items in totalSumArray and add them to the array + totalSumArray.forEach(totalItem => { + totalItem.minorCategory.forEach(minorItem => { + if (minorItem.name === minorCategory) { + minorCategoryArrays[minorCategory].push({ + majorCategory: totalItem.majorCategory, + count: minorItem.count, + percentage: minorItem.percentage, + }); + } + }); + }); + }); + console.log(minorCategoryArrays, 'minorCategoryarrayss'); return data.map(({ minorCategory, counts }) => { const fill = getColor(minorCategory); const sortedCounts = sortDataByCategory( @@ -132,9 +219,26 @@ export function makeBarSpecs( d => d.majorCategory, majorCategoryOrder ); - return { + console.log(counts, majorCategoryOrder, 'kkk'); + console.log(sortedCounts, 'sror'); + // sortedCounts.sort((a, b) => b.count - a.count); + + console.log(sortedCounts, 'sorteddsc'); + // console.log(minorCategory,"sorteddsc"); + const finals = minorCategoryArrays[minorCategory]; + // console.log(minorCategoryArrays["Male"],"HEREISSS") + + // console.log(sortedCounts,"sror") + let ans; + if (sortOption == 'sortByAlphabet') { + ans = sortedCounts; + } else { + ans = finals; + } + console.log(sortOption, 'sortOptions'); + const finalans = { fill, - data: sortedCounts.map((obj, index) => ({ + data: ans.map((obj, index) => ({ x: categoryCoord(index), y: percentage ? obj.percentage : obj.count, majorCategory: obj.majorCategory, @@ -143,5 +247,8 @@ export function makeBarSpecs( percentage: obj.percentage, })), }; + console.log(finalans, 'iscalled3'); + + return finalans; }); } diff --git a/src/shared/components/plots/PlotsTab.tsx b/src/shared/components/plots/PlotsTab.tsx index 814df5b16f7..8354352de68 100644 --- a/src/shared/components/plots/PlotsTab.tsx +++ b/src/shared/components/plots/PlotsTab.tsx @@ -261,6 +261,10 @@ export type ColoringMenuSelection = { entrezGeneId?: number; }; }; +interface OptionType { + value: string; + label: string; +} export interface IPlotsTabProps { filteredSamplesByDetailedCancerType: MobxPromise<{ @@ -439,8 +443,9 @@ export default class PlotsTab extends React.Component { private scrollPane: HTMLDivElement; private dummyScrollPane: HTMLDivElement; private scrollingDummyPane = false; - @observable plotElementWidth = 0; + @observable plotElementWidth = 0; + @observable sortOption: string = 'sortByAlphabet'; @observable boxPlotSortByMedian = false; @observable.ref searchCaseInput: string; @observable.ref searchMutationInput: string; @@ -848,6 +853,8 @@ export default class PlotsTab extends React.Component { this.horzSelection = this.initAxisMenuSelection(false); this.vertSelection = this.initAxisMenuSelection(true); this.coloringMenuSelection = this.initColoringMenuSelection(); + this.sortOption = 'sortByAlphabet'; + this.handleChangeSortOption = this.handleChangeSortOption.bind(this); this.searchCaseInput = ''; this.searchMutationInput = ''; @@ -1488,7 +1495,16 @@ export default class PlotsTab extends React.Component { selectedCategories: [], }); } - + handleChangeSortOption(selectedOption: OptionType) { + if (selectedOption) { + console.log(selectedOption, 'thisisselectedoptions'); + console.log(this.sortOption, 'thisSOrtts'); + this.sortOption = selectedOption.value; + // this.setState({ sortOption: selectedOption.value }); + } else { + // Handle case when selectedOption is null (if needed) + } + } private initColoringMenuSelection(): ColoringMenuSelection { const self = this; return observable({ @@ -4448,6 +4464,32 @@ export default class PlotsTab extends React.Component { )} + {this.isStacked && ( +
+ +
+ +
+
+ )} {showRegression && (
)} - {this.isStacked && ( + {this.isStacked && (this.plotType.result==3) && (