Skip to content

Commit

Permalink
feat: add category bar chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@olzhasmukayev
olzhasmukayev committed Jul 25, 2024
1 parent 9ca3198 commit 8f83fcc
Show file tree
Hide file tree
Showing 10 changed files with 1,105 additions and 69 deletions.
27 changes: 27 additions & 0 deletions src/pages/studyView/StudyViewConfig.ts
View file
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 Expand Up @@ -312,3 +324,18 @@ export const STUDY_VIEW_CONFIG: StudyViewConfig = _.assign(
studyViewFrontEnd,
(getServerConfig() || {}).study_view
);

export const chartChangeOptionsMap: ChangeChartOptionsMap = {
[ChartTypeEnum.PIE_CHART]: [
ChartTypeEnum.BAR_CATEGORICAL_CHART,
ChartTypeEnum.TABLE,
],
[ChartTypeEnum.TABLE]: [
ChartTypeEnum.PIE_CHART,
ChartTypeEnum.BAR_CATEGORICAL_CHART,
],
[ChartTypeEnum.BAR_CATEGORICAL_CHART]: [
ChartTypeEnum.PIE_CHART,
ChartTypeEnum.TABLE,
],
};
85 changes: 73 additions & 12 deletions src/pages/studyView/StudyViewPageStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2155,6 +2155,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 +4537,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 +4564,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 +4593,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 @@ -5843,7 +5848,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 @@ -7600,7 +7608,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 @@ -7643,7 +7651,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 @@ -7792,7 +7800,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 @@ -9879,31 +9887,84 @@ export class StudyViewPageStore
});

@action
showAsPieChart(uniqueKey: string, dataSize: number): void {
showAsPieChart(
uniqueKey: string,
data: ClinicalDataCount[] | string[]
): void {
const { totalCount, naCount } = (data as (
| 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 }
);

const naProportion = totalCount > 0 ? naCount / totalCount : 0;

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

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)
);
this.availableChartTypes.set(uniqueKey, [
ChartTypeEnum.PIE_CHART,
ChartTypeEnum.TABLE,
]);
} 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,
]);
} 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
18 changes: 18 additions & 0 deletions src/pages/studyView/StudyViewUtils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,12 @@ export type DataBin = {
start: number;
};

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

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

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

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

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

Expand Down
Loading

0 comments on commit 8f83fcc

Please sign in to comment.