Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Categorical Bar Chart on Study View #4951

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+758 −101
Open

Add Categorical Bar Chart on Study View #4951

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e659a4
feat: add category bar chart
olzhasmukayev Jul 24, 2024
4a7e78b
Merge branch 'master' into feat/category-bar-chart
olzhasmukayev Aug 19, 2024
14d9b89
Merge branch 'master' into feat/category-bar-chart
olzhasmukayev Sep 12, 2024
366be8a
Merge branch 'master' into feat/category-bar-chart
olzhasmukayev Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/pages/studyView/StudyViewConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export type StudyViewColorTheme = {

export type StudyViewThreshold = {
pieToTable: number;
pieToBar: number;
piePadding: number;
barRatio: number;
rowsInTableForOneGrid: number;
Expand Down Expand Up @@ -61,9 +62,14 @@ export type StudyViewFrontEndConfig = {

export type StudyViewConfig = StudyView & StudyViewFrontEndConfig;

export type ChangeChartOptionsMap = {
[chartType in ChartTypeEnum]?: ChartType[];
};

export enum ChartTypeEnum {
PIE_CHART = 'PIE_CHART',
BAR_CHART = 'BAR_CHART',
BAR_CATEGORICAL_CHART = 'BAR_CATEGORICAL_CHART',
SURVIVAL = 'SURVIVAL',
TABLE = 'TABLE',
SCATTER = 'SCATTER',
Expand All @@ -88,6 +94,7 @@ export enum ChartTypeEnum {
export enum ChartTypeNameEnum {
PIE_CHART = 'pie chart',
BAR_CHART = 'bar chart',
BAR_CATEGORICAL_CHART = 'categorical bar chart',
SURVIVAL = 'survival plot',
TABLE = 'table',
SCATTER = 'density plot',
Expand Down Expand Up @@ -160,6 +167,7 @@ const studyViewFrontEnd = {
},
thresholds: {
pieToTable: 20,
pieToBar: 5,
piePadding: 20,
barRatio: 0.8,
rowsInTableForOneGrid: 4,
Expand All @@ -186,6 +194,10 @@ const studyViewFrontEnd = {
w: 2,
h: 1,
},
[ChartTypeEnum.BAR_CATEGORICAL_CHART]: {
w: 2,
h: 1,
},
[ChartTypeEnum.SCATTER]: {
w: 2,
h: 2,
Expand Down
103 changes: 88 additions & 15 deletions src/pages/studyView/StudyViewPageStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@ import {
MutationCategorization,
getChartMetaSet,
getVisibleAttributes,
CategoryDataBin,
} from './StudyViewUtils';
import { SingleGeneQuery } from 'shared/lib/oql/oql-parser';
import autobind from 'autobind-decorator';
Expand Down Expand Up @@ -592,7 +593,9 @@ export class StudyViewPageStore
}
};

public isShowNAToggleVisible(dataBins: DataBin[]): boolean {
public isShowNAToggleVisible(
dataBins: DataBin[] | CategoryDataBin[]
): boolean {
return (
dataBins.length !== 0 &&
dataBins.some(dataBin => dataBin.specialValue === 'NA')
Expand Down Expand Up @@ -2155,6 +2158,11 @@ export class StudyViewPageStore
ChartDimension
>();

@observable public availableChartTypes = observable.map<
ChartUniqueKey,
ChartType[]
>();

@observable public chartsType = observable.map<ChartUniqueKey, ChartType>();

private newlyAddedCharts = observable.array<string>();
Expand Down Expand Up @@ -4532,7 +4540,7 @@ export class StudyViewPageStore
data.forEach(item => {
const uniqueKey = item.attributeId;
if (this.isNewlyAdded(uniqueKey)) {
this.showAsPieChart(uniqueKey, item.counts.length);
this.showAsPieChart(uniqueKey, item.counts);
this.newlyAddedCharts.remove(uniqueKey);
}
});
Expand All @@ -4559,7 +4567,7 @@ export class StudyViewPageStore
data.forEach(item => {
const uniqueKey = item.attributeId;
if (this.isNewlyAdded(uniqueKey)) {
this.showAsPieChart(uniqueKey, item.counts.length);
this.showAsPieChart(uniqueKey, item.counts);
this.newlyAddedCharts.remove(uniqueKey);
}
});
Expand Down Expand Up @@ -4588,7 +4596,7 @@ export class StudyViewPageStore
data.forEach(item => {
const uniqueKey = item.attributeId;
this.unfilteredClinicalDataCountCache[uniqueKey] = item;
this.showAsPieChart(uniqueKey, item.counts.length);
this.showAsPieChart(uniqueKey, item.counts);
this.newlyAddedCharts.remove(uniqueKey);
});
},
Expand Down Expand Up @@ -5881,7 +5889,10 @@ export class StudyViewPageStore
onError: () => {},
onResult: clinicalAttributes => {
clinicalAttributes.forEach((obj: ClinicalAttribute) => {
if (obj.datatype === DataType.NUMBER) {
if (
obj.datatype === DataType.NUMBER ||
obj.datatype === DataType.STRING
) {
const uniqueKey = getUniqueKey(obj);
let filter = getDefaultClinicalDataBinFilter(obj);

Expand Down Expand Up @@ -7638,7 +7649,7 @@ export class StudyViewPageStore
if (this.queriedPhysicalStudyIds.result.length > 1) {
this.showAsPieChart(
SpecialChartsUniqueKeyEnum.CANCER_STUDIES,
this.queriedPhysicalStudyIds.result.length
this.queriedPhysicalStudyIds.result
);
}
}
Expand Down Expand Up @@ -7681,7 +7692,7 @@ export class StudyViewPageStore
this.getTableDimensionByNumberOfRecords(data.result!.length)
);
}
this.chartsType.set(attr.uniqueKey, ChartTypeEnum.TABLE);
this.chartsType.set(attr.uniqueKey, newChartType);
} else {
this.chartsDimension.set(
attr.uniqueKey,
Expand Down Expand Up @@ -7830,7 +7841,7 @@ export class StudyViewPageStore
_.each(
this.initialVisibleAttributesClinicalDataCountData.result,
item => {
this.showAsPieChart(item.attributeId, item.counts.length);
this.showAsPieChart(item.attributeId, item.counts);
}
);
}
Expand Down Expand Up @@ -9917,31 +9928,93 @@ export class StudyViewPageStore
});

@action
showAsPieChart(uniqueKey: string, dataSize: number): void {
showAsPieChart(
uniqueKey: string,
data: ClinicalDataCount[] | string[]
): void {
// Aggregate the total count and the count of 'NA'
// values from the ClinicalDataCount[] array
const { totalCount, naCount } = (data as (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add comments here to explain what's happening here. can also add comments below to describe the method of choosing which chart

| ClinicalDataCount
| string
)[]).reduce(
(acc: { totalCount: number; naCount: number }, item) => {
if (
typeof item === 'object' &&
'value' in item &&
'count' in item
) {
acc.totalCount += item.count;
if (item.value === 'NA') {
acc.naCount += item.count;
}
}
return acc;
},
{ totalCount: 0, naCount: 0 }
);

// Determine the proportion of 'NA' values relative to the total data count
const naProportion = totalCount > 0 ? naCount / totalCount : 0;

if (
shouldShowChart(
this.initialFilters,
dataSize,
data.length,
this.samples.result.length
)
) {
this.changeChartVisibility(uniqueKey, true);

// Display the data as a table if it exceeds the defined threshold
// or contains specific table attributes
if (
dataSize > STUDY_VIEW_CONFIG.thresholds.pieToTable ||
_.includes(STUDY_VIEW_CONFIG.tableAttrs, uniqueKey)
data.length > STUDY_VIEW_CONFIG.thresholds.pieToTable ||
STUDY_VIEW_CONFIG.tableAttrs.includes(uniqueKey)
) {
this.chartsType.set(uniqueKey, ChartTypeEnum.TABLE);
this.chartsDimension.set(
uniqueKey,
this.getTableDimensionByNumberOfRecords(dataSize)
this.getTableDimensionByNumberOfRecords(data.length)
);
} else {
this.availableChartTypes.set(uniqueKey, [
ChartTypeEnum.PIE_CHART,
ChartTypeEnum.TABLE,
]);
}
// Use a bar chart if the data is exceeds the pie chart
// threshold or if 'NA' values are greater than 50%
else if (
data.length > STUDY_VIEW_CONFIG.thresholds.pieToBar ||
naProportion > 0.5
) {
this.chartsType.set(
uniqueKey,
ChartTypeEnum.BAR_CATEGORICAL_CHART
);
this.chartsDimension.set(
uniqueKey,
STUDY_VIEW_CONFIG.layout.dimensions[
ChartTypeEnum.BAR_CATEGORICAL_CHART
]
);
this.availableChartTypes.set(uniqueKey, [
ChartTypeEnum.PIE_CHART,
ChartTypeEnum.BAR_CATEGORICAL_CHART,
ChartTypeEnum.TABLE,
]);
}
// Default to a pie chart for simpler data sets
else {
this.chartsType.set(uniqueKey, ChartTypeEnum.PIE_CHART);
this.chartsDimension.set(
uniqueKey,
STUDY_VIEW_CONFIG.layout.dimensions[ChartTypeEnum.PIE_CHART]
);
this.availableChartTypes.set(uniqueKey, [
ChartTypeEnum.PIE_CHART,
ChartTypeEnum.BAR_CATEGORICAL_CHART,
ChartTypeEnum.TABLE,
]);
}
}
}
Expand Down
44 changes: 43 additions & 1 deletion src/pages/studyView/StudyViewUtils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ import {
} from 'cbioportal-ts-api-client';
import * as React from 'react';
import { buildCBioPortalPageUrl } from '../../shared/api/urls';
import { BarDatum } from './charts/barChart/BarChart';
import {
BinMethodOption,
GenericAssayChart,
Expand Down Expand Up @@ -226,6 +225,18 @@ export type DataBin = {
start: number;
};

export type BarDatum = {
x: number;
y: number;
dataBin: DataBin;
};

export type CategoryDataBin = {
id: string;
count: number;
specialValue: string;
};

export type MutationCategorization = 'MUTATED' | 'MUTATION_TYPE';

export const SPECIAL_CHARTS: ChartMetaWithDimensionAndChartType[] = [
Expand Down Expand Up @@ -1253,6 +1264,16 @@ export function filterIntervalBins(numericalBins: DataBin[]) {
);
}

export function clinicalDataToDataBin(
data: ClinicalDataCountSummary[]
): CategoryDataBin[] {
return data.map(item => ({
id: item.value,
count: item.count,
specialValue: `${item.value}`,
}));
}

export function calcIntervalBinValues(intervalBins: DataBin[]) {
const values = intervalBins.map(dataBin => dataBin.start);

Expand Down Expand Up @@ -1339,6 +1360,19 @@ export function generateCategoricalData(
}));
}

export function generateCategoricalBarData(
categoryBins: CategoryDataBin[],
startIndex: number
): BarDatum[] {
// x is not the actual data value, it is the normalized data for representation
// y is the actual count value
return categoryBins.map((dataBin: DataBin, index: number) => ({
x: startIndex + index + 1,
y: dataBin.count,
dataBin,
}));
}

export function isLogScaleByValues(values: number[]) {
return (
// empty list is not considered log scale
Expand Down Expand Up @@ -1369,6 +1403,14 @@ export function isEveryBinDistinct(data?: DataBin[]) {
);
}

export const onlyContainsNA = (element: BarDatum): boolean => {
return element.dataBin.specialValue === 'NA';
};

export const doesNotContainNA = (element: BarDatum): boolean => {
return !onlyContainsNA(element);
};

function createRangeForDataBinOrFilter(
start?: number,
end?: number,
Expand Down
Loading
Loading