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 Line Chart to the Study View #4977

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+418 −44
Open

Add Line Chart to the Study View #4977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 15 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 @@ -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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading