feat: add bar chart zoom preview

cBioPortal · Aug 1, 2024 · 7b990ad · 7b990ad
1 parent 895d50f
commit 7b990ad
Show file tree

Hide file tree

Showing 6 changed files with 287 additions and 65 deletions.
diff --git a/src/pages/studyView/StudyViewConfig.ts b/src/pages/studyView/StudyViewConfig.ts
@@ -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',
@@ -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',
@@ -186,6 +188,10 @@ const studyViewFrontEnd = {
                 w: 2,
                 h: 1,
             },
+            [ChartTypeEnum.BAR_PREVIEW_CHART]: {
+                w: 2,
+                h: 2,
+            },
             [ChartTypeEnum.SCATTER]: {
                 w: 2,
                 h: 2,

diff --git a/src/pages/studyView/StudyViewPageStore.ts b/src/pages/studyView/StudyViewPageStore.ts
@@ -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,
@@ -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,

diff --git a/src/pages/studyView/chartHeader/ChartHeader.tsx b/src/pages/studyView/chartHeader/ChartHeader.tsx
@@ -42,6 +42,7 @@ export interface IChartHeaderProps {
     toggleBoxPlot?: () => void;
     toggleViolinPlot?: () => void;
     toggleNAValue?: () => void;
+    togglePreview?: () => void;
     isLeftTruncationAvailable?: boolean;
     toggleSurvivalPlotLeftTruncation?: () => void;
     swapAxes?: () => void;
@@ -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;
@@ -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) {

diff --git a/src/pages/studyView/charts/ChartContainer.tsx b/src/pages/studyView/charts/ChartContainer.tsx
@@ -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;
@@ -157,6 +158,8 @@ export interface IChartContainerProps {
     showViolinPlotToggle?: boolean;
     violinPlotChecked?: boolean;
     isShowNAChecked?: boolean;
+    isShowPreviewChecked?: boolean;
+    isPreviewShown?: boolean;
     showNAToggle?: boolean;
     selectedCategories?: string[];
     selectedGenes?: any;
@@ -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
@@ -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;
             }
@@ -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
+                        )}
                     />
                 );
             }
@@ -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())}