Skip to content

Commit

Permalink
feat: add bar chart zoom preview
Browse files Browse the repository at this point in the history
  • Loading branch information
olzhasmukayev committed Aug 1, 2024
1 parent 895d50f commit 821508f
Show file tree
Hide file tree
Showing 6 changed files with 281 additions and 65 deletions.
6 changes: 6 additions & 0 deletions src/pages/studyView/StudyViewConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export type StudyViewConfig = StudyView & StudyViewFrontEndConfig;
export enum ChartTypeEnum {
PIE_CHART = 'PIE_CHART',
BAR_CHART = 'BAR_CHART',
BAR_PREVIEW_CHART = 'BAR_PREVIEW_CHART',
SURVIVAL = 'SURVIVAL',
TABLE = 'TABLE',
SCATTER = 'SCATTER',
Expand All @@ -88,6 +89,7 @@ export enum ChartTypeEnum {
export enum ChartTypeNameEnum {
PIE_CHART = 'pie chart',
BAR_CHART = 'bar chart',
BAR_PREVIEW_CHART = 'bar preview chart',
SURVIVAL = 'survival plot',
TABLE = 'table',
SCATTER = 'density plot',
Expand Down Expand Up @@ -186,6 +188,10 @@ const studyViewFrontEnd = {
w: 2,
h: 1,
},
[ChartTypeEnum.BAR_PREVIEW_CHART]: {
w: 2,
h: 2,
},
[ChartTypeEnum.SCATTER]: {
w: 2,
h: 2,
Expand Down
49 changes: 45 additions & 4 deletions src/pages/studyView/StudyViewPageStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -599,6 +599,47 @@ export class StudyViewPageStore
);
}

@action.bound
changePreviewDimension(uniqueKey: string, previewShown: boolean): void {
const dimension = previewShown
? STUDY_VIEW_CONFIG.layout.dimensions[
ChartTypeEnum.BAR_PREVIEW_CHART
]
: STUDY_VIEW_CONFIG.layout.dimensions[ChartTypeEnum.BAR_CHART];
this.chartsDimension.set(uniqueKey, dimension);
}

@action
togglePreview = (uniqueKey: string): void => {
if (this._customDataBinFilterSet.has(uniqueKey)) {
const filterSet = this._customDataBinFilterSet.get(uniqueKey);
const newFilter = _.clone(filterSet!);
newFilter.showPreview = !this.isPreviewShown(uniqueKey);
this.changePreviewDimension(uniqueKey, newFilter.showPreview);
this._customDataBinFilterSet.set(uniqueKey, newFilter as any);
} else {
const filterSet = this.getDataBinFilterSet(uniqueKey);
const newFilter = _.clone(filterSet.get(uniqueKey)!);
newFilter.showPreview = !this.isPreviewShown(uniqueKey);
this.changePreviewDimension(uniqueKey, newFilter.showPreview);
filterSet.set(uniqueKey, newFilter as any);
}
};

public isPreviewShown = (uniqueKey: string): boolean => {
if (this._customDataBinFilterSet.has(uniqueKey)) {
const filter = this._customDataBinFilterSet.get(uniqueKey);
return filter === undefined
? false
: (filter!.showPreview as boolean);
} else {
const filter = this.getDataBinFilterSet(uniqueKey).get(uniqueKey)!;
return filter?.showPreview === undefined
? false
: (filter!.showPreview as boolean);
}
};

constructor(
public appStore: AppStore,
private sessionServiceIsEnabled: boolean,
Expand Down Expand Up @@ -2114,19 +2155,19 @@ export class StudyViewPageStore
>({}, { deep: false });
@observable private _clinicalDataBinFilterSet = observable.map<
ChartUniqueKey,
ClinicalDataBinFilter & { showNA?: boolean }
ClinicalDataBinFilter & { showNA?: boolean; showPreview?: boolean }
>();
@observable private _genomicDataBinFilterSet = observable.map<
ChartUniqueKey,
GenomicDataBinFilter & { showNA?: boolean }
GenomicDataBinFilter & { showNA?: boolean; showPreview?: boolean }
>();
@observable private _genericAssayDataBinFilterSet = observable.map<
ChartUniqueKey,
GenericAssayDataBinFilter & { showNA?: boolean }
GenericAssayDataBinFilter & { showNA?: boolean; showPreview?: boolean }
>();
@observable private _customDataBinFilterSet = observable.map<
ChartUniqueKey,
ClinicalDataBinFilter & { showNA?: boolean }
ClinicalDataBinFilter & { showNA?: boolean; showPreview?: boolean }
>();
@observable.ref private _geneFilterSet = observable.map<
string,
Expand Down
29 changes: 29 additions & 0 deletions src/pages/studyView/chartHeader/ChartHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export interface IChartHeaderProps {
toggleBoxPlot?: () => void;
toggleViolinPlot?: () => void;
toggleNAValue?: () => void;
togglePreview?: () => void;
isLeftTruncationAvailable?: boolean;
toggleSurvivalPlotLeftTruncation?: () => void;
swapAxes?: () => void;
Expand Down Expand Up @@ -79,6 +80,9 @@ export interface ChartControls {
violinPlotChecked?: boolean;
isShowNAChecked?: boolean;
showNAToggle?: boolean;
isShowPreviewChecked?: boolean;
showPreviewToggle?: boolean;
showPreview?: boolean;
showSwapAxes?: boolean;
showSurvivalPlotLeftTruncationToggle?: boolean;
survivalPlotLeftTruncationChecked?: boolean;
Expand Down Expand Up @@ -602,6 +606,31 @@ export class ChartHeader extends React.Component<IChartHeaderProps, {}> {
</li>
);
}
if (this.props.chartControls && this.props.togglePreview) {
items.push(
<li>
<a
className="dropdown-item"
onClick={this.props.togglePreview}
>
<FlexAlignedCheckbox
checked={
!!(
this.props.chartControls &&
this.props.chartControls.showPreview
)
}
label={
<span style={{ marginTop: -3 }}>
Show Zoom Preview
</span>
}
style={{ marginTop: 1, marginBottom: -3 }}
/>
</a>
</li>
);
}
}

if (this.showDownload) {
Expand Down
12 changes: 12 additions & 0 deletions src/pages/studyView/charts/ChartContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ export interface IChartContainerProps {
onToggleViolinPlot?: (chartMeta: ChartMeta) => void;
onToggleBoxPlot?: (chartMeta: ChartMeta) => void;
onToggleNAValue?: (chartMeta: ChartMeta) => void;
onTogglePreview?: (chartMeta: ChartMeta) => void;
onSwapAxes?: (chartMeta: ChartMeta) => void;
logScaleChecked?: boolean;
showLogScaleToggle?: boolean;
Expand All @@ -157,6 +158,8 @@ export interface IChartContainerProps {
showViolinPlotToggle?: boolean;
violinPlotChecked?: boolean;
isShowNAChecked?: boolean;
isShowPreviewChecked?: boolean;
isPreviewShown?: boolean;
showNAToggle?: boolean;
selectedCategories?: string[];
selectedGenes?: any;
Expand Down Expand Up @@ -264,6 +267,9 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
onToggleNAValue: action(() => {
this.props.onToggleNAValue?.(this.props.chartMeta);
}),
onTogglePreview: action(() => {
this.props.onTogglePreview?.(this.props.chartMeta);
}),
onToggleSurvivalPlotLeftTruncation: action(() => {
this.props.onToggleSurvivalPlotLeftTruncation?.(
this.props.chartMeta
Expand Down Expand Up @@ -334,7 +340,9 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
showLogScaleToggle: this.props.showLogScaleToggle,
logScaleChecked: this.props.logScaleChecked,
isShowNAChecked: this.props.isShowNAChecked,
isShowPreviewChecked: this.props.isShowPreviewChecked,
showNAToggle: this.props.showNAToggle,
showPreview: this.props.isPreviewShown,
};
break;
}
Expand Down Expand Up @@ -564,6 +572,9 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
showNAChecked={this.props.store.isShowNAChecked(
this.props.chartMeta.uniqueKey
)}
showPreviewChecked={this.props.store.isPreviewShown(
this.props.chartMeta.uniqueKey
)}
/>
);
}
Expand Down Expand Up @@ -1505,6 +1516,7 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
}
swapAxes={this.handlers.onSwapAxes}
toggleNAValue={this.handlers.onToggleNAValue}
togglePreview={this.handlers.onTogglePreview}
chartControls={this.chartControls}
changeChartType={this.changeChartType}
getSVG={() => Promise.resolve(this.toSVGDOMNode())}
Expand Down
Loading

0 comments on commit 821508f

Please sign in to comment.