Skip to content

Commit

Permalink
feat: add line chart to the Study View
Browse files Browse the repository at this point in the history
  • Loading branch information
Olzhas Mukayev authored and Olzhas Mukayev committed Aug 23, 2024
1 parent 50adab2 commit 0939aef
Show file tree
Hide file tree
Showing 7 changed files with 418 additions and 44 deletions.
15 changes: 15 additions & 0 deletions src/pages/studyView/StudyViewConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,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',
LINE_CHART = 'LINE_CHART',
SURVIVAL = 'SURVIVAL',
TABLE = 'TABLE',
SCATTER = 'SCATTER',
Expand All @@ -88,6 +93,7 @@ export enum ChartTypeEnum {
export enum ChartTypeNameEnum {
PIE_CHART = 'pie chart',
BAR_CHART = 'bar chart',
LINE_CHART = 'line chart',
SURVIVAL = 'survival plot',
TABLE = 'table',
SCATTER = 'density plot',
Expand Down Expand Up @@ -186,6 +192,10 @@ const studyViewFrontEnd = {
w: 2,
h: 1,
},
[ChartTypeEnum.LINE_CHART]: {
w: 2,
h: 1,
},
[ChartTypeEnum.SCATTER]: {
w: 2,
h: 2,
Expand Down Expand Up @@ -312,3 +322,8 @@ export const STUDY_VIEW_CONFIG: StudyViewConfig = _.assign(
studyViewFrontEnd,
(getServerConfig() || {}).study_view
);

export const chartChangeOptionsMap: ChangeChartOptionsMap = {
[ChartTypeEnum.LINE_CHART]: [ChartTypeEnum.BAR_CHART],
[ChartTypeEnum.BAR_CHART]: [ChartTypeEnum.LINE_CHART],
};
5 changes: 5 additions & 0 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
127 changes: 84 additions & 43 deletions src/pages/studyView/chartHeader/ChartHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import {
import classnames from 'classnames';
import { action, computed, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import { ChartTypeEnum } from '../StudyViewConfig';
import {
ChartTypeEnum,
ChartTypeNameEnum,
chartChangeOptionsMap,
} from '../StudyViewConfig';
import { ChartMeta, getClinicalAttributeOverlay } from '../StudyViewUtils';
import {
DataType,
Expand Down Expand Up @@ -82,6 +86,7 @@ export interface ChartControls {
showSwapAxes?: boolean;
showSurvivalPlotLeftTruncationToggle?: boolean;
survivalPlotLeftTruncationChecked?: boolean;
showChartChangeOptions?: boolean;
}

@observer
Expand All @@ -90,6 +95,7 @@ export class ChartHeader extends React.Component<IChartHeaderProps, {}> {
@observable downloadSubmenuOpen = false;
@observable comparisonSubmenuOpen = false;
@observable showCustomBinModal: boolean = false;
@observable showChartChangeOptions: boolean = false;
private closeMenuTimeout: number | undefined = undefined;

constructor(props: IChartHeaderProps) {
Expand Down Expand Up @@ -444,54 +450,89 @@ export class ChartHeader extends React.Component<IChartHeaderProps, {}> {
);
}

if (
this.props.chartControls &&
!!this.props.chartControls.showTableIcon
) {
if (this.props.chartControls?.showChartChangeOptions) {
const submenuWidth = 120;
const availableCharts = [
...new Set(
(
this.props.store.availableChartTypes.get(
this.props.chartMeta.uniqueKey
) || []
).concat(chartChangeOptionsMap[this.props.chartType] || [])
),
];
items.push(
<li>
<a
className="dropdown-item"
onClick={() =>
this.props.changeChartType(ChartTypeEnum.TABLE)
<li style={{ position: 'relative' }}>
<div
className={classnames(
'dropdown-item',
styles.dropdownHoverEffect
)}
style={{
display: 'flex',
justifyContent: 'space-between',
padding: '3px 20px',
}}
onMouseEnter={() =>
(this.showChartChangeOptions = true)
}
>
<i
className={classnames(
'fa fa-xs fa-fw',
'fa-table',
styles.menuItemIcon
)}
aria-hidden="true"
/>
Show Table
</a>
</li>
);
}

if (
this.props.chartControls &&
!!this.props.chartControls.showPieIcon
) {
items.push(
<li>
<a
className="dropdown-item"
onClick={() =>
this.props.changeChartType(ChartTypeEnum.PIE_CHART)
onMouseLeave={() =>
(this.showChartChangeOptions = false)
}
>
<div style={{ display: 'flex', alignItems: 'center' }}>
<i
className={classnames(
'fa fa-xs',
'fa-exchange',
styles.menuItemIcon
)}
aria-hidden="true"
/>
<span>Change Chart</span>
</div>
<i
className={classnames(
'fa fa-xs fa-fw',
'fa-pie-chart',
styles.menuItemIcon
)}
aria-hidden="true"
className={'fa fa-xs fa-fw fa-caret-right'}
style={{ lineHeight: 'inherit' }}
/>
Show Pie
</a>
{this.showChartChangeOptions && (
<ul
className={classnames('dropdown-menu', {
show: this.showChartChangeOptions,
})}
style={{
top: 0,
margin: '-6px 0',
left:
this.props.placement === 'left'
? -submenuWidth
: '100%',
}}
>
<li>
{availableCharts
?.filter(
(chartType, id) =>
chartType !=
this.props.chartType
)
.map((chartType, id) => (
<a
key={id}
className="dropdown-item text-capitalize"
onClick={() =>
this.props.changeChartType(
chartType
)
}
>
{ChartTypeNameEnum[chartType]}
</a>
))}
</li>
</ul>
)}
</div>
</li>
);
}
Expand Down
25 changes: 25 additions & 0 deletions src/pages/studyView/charts/ChartContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ import {
} from 'pages/studyView/table/StructuralVariantMultiSelectionTable';
import { StructVarGenePair } from 'pages/studyView/StructVarUtils';
import { Modal } from 'react-bootstrap';
import LineChart from './lineChart/LineChart';

export interface AbstractChart {
toSVGDOMNode: () => Element;
Expand Down Expand Up @@ -335,6 +336,7 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
logScaleChecked: this.props.logScaleChecked,
isShowNAChecked: this.props.isShowNAChecked,
showNAToggle: this.props.showNAToggle,
showChartChangeOptions: true,
};
break;
}
Expand Down Expand Up @@ -366,6 +368,12 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
controls = { showPieIcon: true };
break;
}
case ChartTypeEnum.LINE_CHART: {
controls = {
showChartChangeOptions: true,
};
break;
}
case ChartTypeEnum.SURVIVAL: {
controls = {
showSurvivalPlotLeftTruncationToggle: this.props
Expand Down Expand Up @@ -567,6 +575,23 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
/>
);
}
case ChartTypeEnum.LINE_CHART: {
return () => (
<LineChart
width={getWidthByDimension(
this.props.dimension,
this.borderWidth
)}
height={getHeightByDimension(
this.props.dimension,
this.chartHeaderHeight
)}
ref={this.handlers.ref}
data={this.props.promise.result}
onUserSelection={this.handlers.onDataBinSelection}
/>
);
}
case ChartTypeEnum.TABLE: {
return () => (
<ClinicalTable
Expand Down
2 changes: 1 addition & 1 deletion src/pages/studyView/charts/barChart/BarChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function generateTheme() {
return theme;
}

const VICTORY_THEME = generateTheme();
export const VICTORY_THEME = generateTheme();
const TILT_ANGLE = 50;

@observer
Expand Down
Loading

0 comments on commit 0939aef

Please sign in to comment.