From 8f83fcce4c1cfbc4f77fe69848dd1cd0ab632370 Mon Sep 17 00:00:00 2001
From: mukayevolzhas <olzhas.mukayev@nu.edu.kz>
Date: Thu, 25 Jul 2024 01:04:27 +0300
Subject: [PATCH] feat: add category bar chart

---
 src/pages/studyView/StudyViewConfig.ts        |  27 ++
 src/pages/studyView/StudyViewPageStore.ts     |  85 ++++-
 src/pages/studyView/StudyViewUtils.tsx        |  18 +
 .../studyView/chartHeader/ChartHeader.tsx     | 140 ++++---
 src/pages/studyView/charts/ChartContainer.tsx |  44 ++-
 .../categoryBarChart/CategoryBarChart.tsx     | 353 ++++++++++++++++++
 .../CategoryBarChartAxisLabel.tsx             |  70 ++++
 .../CategoryBarChartToolTip.tsx               |  95 +++++
 .../categoryBarChart/CustomBinsModal.tsx      | 313 ++++++++++++++++
 src/pages/studyView/tabs/SummaryTab.tsx       |  29 ++
 10 files changed, 1105 insertions(+), 69 deletions(-)
 create mode 100644 src/pages/studyView/charts/categoryBarChart/CategoryBarChart.tsx
 create mode 100644 src/pages/studyView/charts/categoryBarChart/CategoryBarChartAxisLabel.tsx
 create mode 100644 src/pages/studyView/charts/categoryBarChart/CategoryBarChartToolTip.tsx
 create mode 100644 src/pages/studyView/charts/categoryBarChart/CustomBinsModal.tsx

diff --git a/src/pages/studyView/StudyViewConfig.ts b/src/pages/studyView/StudyViewConfig.ts
index 166ef974a1f..5bfb5976e1b 100644
--- a/src/pages/studyView/StudyViewConfig.ts
+++ b/src/pages/studyView/StudyViewConfig.ts
@@ -23,6 +23,7 @@ export type StudyViewColorTheme = {
 
 export type StudyViewThreshold = {
     pieToTable: number;
+    pieToBar: number;
     piePadding: number;
     barRatio: number;
     rowsInTableForOneGrid: number;
@@ -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',
@@ -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',
@@ -160,6 +167,7 @@ const studyViewFrontEnd = {
     },
     thresholds: {
         pieToTable: 20,
+        pieToBar: 5,
         piePadding: 20,
         barRatio: 0.8,
         rowsInTableForOneGrid: 4,
@@ -186,6 +194,10 @@ const studyViewFrontEnd = {
                 w: 2,
                 h: 1,
             },
+            [ChartTypeEnum.BAR_CATEGORICAL_CHART]: {
+                w: 2,
+                h: 1,
+            },
             [ChartTypeEnum.SCATTER]: {
                 w: 2,
                 h: 2,
@@ -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,
+    ],
+};
diff --git a/src/pages/studyView/StudyViewPageStore.ts b/src/pages/studyView/StudyViewPageStore.ts
index 98d9da7d788..48ab882d2ba 100644
--- a/src/pages/studyView/StudyViewPageStore.ts
+++ b/src/pages/studyView/StudyViewPageStore.ts
@@ -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>();
@@ -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);
                 }
             });
@@ -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);
                 }
             });
@@ -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);
             });
         },
@@ -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);
 
@@ -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
             );
         }
     }
@@ -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,
@@ -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);
             }
         );
     }
@@ -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,
+                ]);
             }
         }
     }
diff --git a/src/pages/studyView/StudyViewUtils.tsx b/src/pages/studyView/StudyViewUtils.tsx
index e2e8b78bc78..86f7ba89e27 100644
--- a/src/pages/studyView/StudyViewUtils.tsx
+++ b/src/pages/studyView/StudyViewUtils.tsx
@@ -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[] = [
@@ -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);
 
diff --git a/src/pages/studyView/chartHeader/ChartHeader.tsx b/src/pages/studyView/chartHeader/ChartHeader.tsx
index 83a273aa57d..a921ce7a343 100644
--- a/src/pages/studyView/chartHeader/ChartHeader.tsx
+++ b/src/pages/studyView/chartHeader/ChartHeader.tsx
@@ -8,7 +8,7 @@ import {
 import classnames from 'classnames';
 import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { ChartTypeEnum } from '../StudyViewConfig';
+import { ChartTypeEnum, ChartTypeNameEnum } from '../StudyViewConfig';
 import { ChartMeta, getClinicalAttributeOverlay } from '../StudyViewUtils';
 import {
     DataType,
@@ -82,6 +82,7 @@ export interface ChartControls {
     showSwapAxes?: boolean;
     showSurvivalPlotLeftTruncationToggle?: boolean;
     survivalPlotLeftTruncationChecked?: boolean;
+    showChartChangeOptions?: boolean;
 }
 
 @observer
@@ -90,6 +91,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) {
@@ -414,6 +416,85 @@ export class ChartHeader extends React.Component<IChartHeaderProps, {}> {
             );
         }
 
+        if (
+            this.props.chartControls &&
+            !!this.props.chartControls.showChartChangeOptions
+        ) {
+            const submenuWidth = 120;
+            const availableCharts =
+                this.props.store.availableChartTypes.get(
+                    this.props.chartMeta.uniqueKey
+                ) || [];
+            items.push(
+                <li style={{ position: 'relative' }}>
+                    <div
+                        className={classnames(
+                            'dropdown-item',
+                            styles.dropdownHoverEffect
+                        )}
+                        style={{
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            padding: '3px 20px',
+                        }}
+                        onMouseEnter={() =>
+                            (this.showChartChangeOptions = true)
+                        }
+                        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={'fa fa-xs fa-fw fa-caret-right'}
+                            style={{ lineHeight: 'inherit' }}
+                        />
+                        {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?.map((chartType, id) => (
+                                        <a
+                                            key={id}
+                                            className="dropdown-item text-capitalize"
+                                            onClick={() =>
+                                                this.props.changeChartType(
+                                                    chartType
+                                                )
+                                            }
+                                        >
+                                            {ChartTypeNameEnum[chartType]}
+                                        </a>
+                                    ))}
+                                </li>
+                            </ul>
+                        )}
+                    </div>
+                </li>
+            );
+        }
+
         if (
             this.props.chartControls &&
             this.props.chartControls.showBoxPlotToggle &&
@@ -444,58 +525,6 @@ export class ChartHeader extends React.Component<IChartHeaderProps, {}> {
             );
         }
 
-        if (
-            this.props.chartControls &&
-            !!this.props.chartControls.showTableIcon
-        ) {
-            items.push(
-                <li>
-                    <a
-                        className="dropdown-item"
-                        onClick={() =>
-                            this.props.changeChartType(ChartTypeEnum.TABLE)
-                        }
-                    >
-                        <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)
-                        }
-                    >
-                        <i
-                            className={classnames(
-                                'fa fa-xs fa-fw',
-                                'fa-pie-chart',
-                                styles.menuItemIcon
-                            )}
-                            aria-hidden="true"
-                        />
-                        Show Pie
-                    </a>
-                </li>
-            );
-        }
-
         if (
             this.props.chartControls &&
             this.props.chartControls.showComparisonPageIcon
@@ -540,7 +569,10 @@ export class ChartHeader extends React.Component<IChartHeaderProps, {}> {
             );
         }
 
-        if (this.props.chartType === ChartTypeEnum.BAR_CHART) {
+        if (
+            this.props.chartType === ChartTypeEnum.BAR_CHART ||
+            this.props.chartType === ChartTypeEnum.BAR_CATEGORICAL_CHART
+        ) {
             items.push(
                 <li>
                     <a
diff --git a/src/pages/studyView/charts/ChartContainer.tsx b/src/pages/studyView/charts/ChartContainer.tsx
index ab3c4ea2c8f..b715b13df1c 100644
--- a/src/pages/studyView/charts/ChartContainer.tsx
+++ b/src/pages/studyView/charts/ChartContainer.tsx
@@ -20,6 +20,7 @@ import SurvivalChart, {
 } from '../../resultsView/survival/SurvivalChart';
 
 import BarChart from './barChart/BarChart';
+import CategoryBarChart from './categoryBarChart/CategoryBarChart';
 import {
     ChartMeta,
     ChartType,
@@ -198,6 +199,7 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
     @observable chartType: ChartType;
 
     @observable newlyAdded = false;
+    @observable chartChanged = false;
     @observable private selectedRowsKeys: string[] = [];
 
     @observable alertContent: JSX.Element | string | null = null;
@@ -300,6 +302,7 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
             },
             onChangeChartType: (newChartType: ChartType) => {
                 this.mouseInChart = false;
+                this.chartChanged = true;
                 this.props.onChangeChartType(
                     this.props.chartMeta,
                     newChartType
@@ -359,11 +362,19 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
                 };
                 break;
             case ChartTypeEnum.PIE_CHART: {
-                controls = { showTableIcon: true };
+                controls = { showChartChangeOptions: true };
                 break;
             }
             case ChartTypeEnum.TABLE: {
-                controls = { showPieIcon: true };
+                controls = { showChartChangeOptions: true };
+                break;
+            }
+            case ChartTypeEnum.BAR_CATEGORICAL_CHART: {
+                controls = {
+                    showChartChangeOptions: true,
+                    showNAToggle: this.props.showNAToggle,
+                    isShowNAChecked: this.props.isShowNAChecked,
+                };
                 break;
             }
             case ChartTypeEnum.SURVIVAL: {
@@ -414,6 +425,7 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
             switch (this.props.chartType) {
                 case ChartTypeEnum.PIE_CHART:
                 case ChartTypeEnum.TABLE:
+                case ChartTypeEnum.BAR_CATEGORICAL_CHART:
                     this.props.store.openComparisonPage(this.props.chartMeta, {
                         clinicalAttributeValues: this.props.promise
                             .result! as ClinicalDataCountSummary[],
@@ -567,6 +579,27 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
                     />
                 );
             }
+            case ChartTypeEnum.BAR_CATEGORICAL_CHART: {
+                return () => (
+                    <CategoryBarChart
+                        width={getWidthByDimension(
+                            this.props.dimension,
+                            this.borderWidth
+                        )}
+                        height={getHeightByDimension(
+                            this.props.dimension,
+                            this.chartHeaderHeight
+                        )}
+                        ref={this.handlers.ref}
+                        onUserSelection={this.handlers.onDataBinSelection}
+                        filters={this.props.filters}
+                        data={this.props.promise.result}
+                        showNAChecked={this.props.store.isShowNAChecked(
+                            this.props.chartMeta.uniqueKey
+                        )}
+                    />
+                );
+            }
             case ChartTypeEnum.TABLE: {
                 return () => (
                     <ClinicalTable
@@ -1436,7 +1469,7 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
 
     @computed
     get highlightChart() {
-        return this.newlyAdded;
+        return this.newlyAdded || this.chartChanged;
     }
 
     @action.bound
@@ -1451,6 +1484,11 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
                 () => (this.newlyAdded = false),
                 STUDY_VIEW_CONFIG.thresholds.chartHighlight
             );
+        } else if (this.chartChanged) {
+            setTimeout(
+                () => (this.chartChanged = false),
+                STUDY_VIEW_CONFIG.thresholds.chartHighlight
+            );
         }
     }
 
diff --git a/src/pages/studyView/charts/categoryBarChart/CategoryBarChart.tsx b/src/pages/studyView/charts/categoryBarChart/CategoryBarChart.tsx
new file mode 100644
index 00000000000..28f2d7ae08b
--- /dev/null
+++ b/src/pages/studyView/charts/categoryBarChart/CategoryBarChart.tsx
@@ -0,0 +1,353 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import {
+    VictoryAxis,
+    VictoryBar,
+    VictoryChart,
+    VictoryLabel,
+    VictorySelectionContainer,
+} from 'victory';
+import { computed, observable, makeObservable } from 'mobx';
+import _ from 'lodash';
+import { DataFilterValue } from 'cbioportal-ts-api-client';
+import { AbstractChart } from 'pages/studyView/charts/ChartContainer';
+import autobind from 'autobind-decorator';
+import CategoryBarChartAxisLabel from './CategoryBarChartAxisLabel';
+import {
+    filterCategoryBins,
+    clinicalDataToDataBin,
+    generateCategoricalData,
+    DataBin,
+    isDataBinSelected,
+    ClinicalDataCountSummary,
+} from '../../StudyViewUtils';
+import { STUDY_VIEW_CONFIG } from '../../StudyViewConfig';
+import { DEFAULT_NA_COLOR } from 'shared/lib/Colors';
+import CategoryBarChartToolTip, {
+    ToolTipModel,
+} from './CategoryBarChartToolTip';
+import WindowStore from 'shared/components/window/WindowStore';
+import ReactDOM from 'react-dom';
+import {
+    CBIOPORTAL_VICTORY_THEME,
+    calcPlotBottomPadding,
+} from 'cbioportal-frontend-commons';
+
+export interface IBarChartProps {
+    data: ClinicalDataCountSummary[];
+    width: number;
+    height: number;
+    filters: DataFilterValue[];
+    onUserSelection: (dataBins: DataBin[]) => void;
+    showNAChecked: boolean;
+}
+
+export type BarDatum = {
+    x: number;
+    y: number;
+    dataBin: DataBin;
+};
+
+function generateTheme() {
+    const theme = _.cloneDeep(CBIOPORTAL_VICTORY_THEME);
+    theme.axis.style.tickLabels.fontSize *= 0.85;
+
+    return theme;
+}
+
+const VICTORY_THEME = generateTheme();
+const TILT_ANGLE = 30;
+
+@observer
+export default class CategoryBarChart
+    extends React.Component<IBarChartProps, {}>
+    implements AbstractChart {
+    private svgContainer: any;
+
+    @observable.ref
+    private mousePosition = { x: 0, y: 0 };
+
+    @observable
+    private currentBarIndex = -1;
+
+    @observable
+    private toolTipModel: ToolTipModel | null = null;
+
+    constructor(props: IBarChartProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    @autobind
+    private onSelection(bars: { data: BarDatum[] }[]): void {
+        const dataBins = _.flatten(
+            bars.map(bar => bar.data.map(barDatum => barDatum.dataBin))
+        );
+        this.props.onUserSelection(dataBins);
+    }
+
+    public toSVGDOMNode(): Element {
+        return this.svgContainer.firstChild;
+    }
+
+    @computed
+    get categoryBins(): DataBin[] {
+        return clinicalDataToDataBin(this.props.data);
+    }
+
+    @computed
+    get categoricalData(): BarDatum[] {
+        return generateCategoricalData(this.categoryBins, 0);
+    }
+
+    @computed
+    get barData(): BarDatum[] {
+        return [...this.categoricalData];
+    }
+
+    @computed
+    get barDataBasedOnNA(): BarDatum[] {
+        return this.props.showNAChecked
+            ? this.barData
+            : this.barData.filter(doesNotContainNA);
+    }
+
+    @computed
+    get categories(): string[] {
+        return this.categoryBins.map(dataBin =>
+            dataBin.specialValue === undefined
+                ? `${dataBin.start}`
+                : dataBin.specialValue
+        );
+    }
+
+    @computed
+    get tickValues(): number[] {
+        const values = [];
+        for (let i = 1; i <= this.categories.length; i++) {
+            values.push(i);
+        }
+        return values;
+    }
+
+    @computed
+    get barDataWithNA(): BarDatum[] {
+        return this.barData.filter(onlyContainsNA);
+    }
+
+    @computed
+    get numberOfNA(): number {
+        return this.barDataWithNA.length;
+    }
+
+    @computed
+    get tickValuesBasedOnNA(): number[] {
+        if (this.props.showNAChecked || !this.numberOfNA) {
+            return this.tickValues;
+        }
+        const tickValuesWithoutNA = this.tickValues.slice(0, -this.numberOfNA);
+        return tickValuesWithoutNA;
+    }
+
+    @computed
+    get tickFormat(): (string | string[])[] {
+        return [...this.categories];
+    }
+
+    @computed
+    get bottomPadding(): number {
+        return calcPlotBottomPadding(
+            VICTORY_THEME.axis.style.tickLabels.fontFamily,
+            VICTORY_THEME.axis.style.tickLabels.fontSize,
+            this.tickFormat,
+            TILT_ANGLE,
+            30,
+            10
+        );
+    }
+
+    @computed
+    get barRatio(): number {
+        return STUDY_VIEW_CONFIG.thresholds.barRatio;
+    }
+
+    @autobind
+    private onMouseMove(event: React.MouseEvent<any>): void {
+        this.mousePosition = { x: event.pageX, y: event.pageY };
+    }
+
+    /*
+     * Supplies the CategoryBarPlot with the event handlers needed to record when the mouse enters
+     * or leaves a bar on the plot.
+     */
+    private get barPlotEvents() {
+        const self = this;
+        return [
+            {
+                target: 'data',
+                eventHandlers: {
+                    onMouseEnter: () => {
+                        return [
+                            {
+                                target: 'data',
+                                mutation: (event: any) => {
+                                    self.currentBarIndex = event.datum.eventKey;
+                                    self.toolTipModel = {
+                                        start:
+                                            self.barData[self.currentBarIndex]
+                                                .dataBin.start,
+                                        end:
+                                            self.barData[self.currentBarIndex]
+                                                .dataBin.end,
+                                        special:
+                                            self.barData[self.currentBarIndex]
+                                                .dataBin.specialValue,
+                                        sampleCount: event.datum.y,
+                                    };
+                                },
+                            },
+                        ];
+                    },
+                    onMouseLeave: () => {
+                        return [
+                            {
+                                target: 'data',
+                                mutation: () => {
+                                    self.toolTipModel = null;
+                                },
+                            },
+                        ];
+                    },
+                },
+            },
+        ];
+    }
+
+    @computed
+    get maximumX(): number {
+        return (
+            this.tickValuesBasedOnNA[this.tickValuesBasedOnNA.length - 1] + 1
+        );
+    }
+
+    @computed
+    get maximumY(): number {
+        const barDataWithoutNA = this.barData.filter(doesNotContainNA);
+        return Math.max(
+            ...barDataWithoutNA.map((element: BarDatum) => element.y)
+        );
+    }
+
+    @computed
+    get labelShowingNA(): JSX.Element | null {
+        if (!this.props.showNAChecked && this.numberOfNA) {
+            const labelNA = this.barDataWithNA
+                .map((element: BarDatum) => element.dataBin.count)
+                .join(', ');
+            return (
+                <VictoryLabel
+                    text={`NA: ${labelNA}`}
+                    textAnchor="end"
+                    datum={{ x: this.maximumX, y: this.maximumY }}
+                    style={{
+                        fontFamily:
+                            VICTORY_THEME.axis.style.tickLabels.fontFamily,
+                        fontSize: VICTORY_THEME.axis.style.tickLabels.fontSize,
+                    }}
+                />
+            );
+        }
+        return null;
+    }
+
+    public render() {
+        return (
+            <div onMouseMove={this.onMouseMove}>
+                {this.barData.length > 0 && (
+                    <VictoryChart
+                        containerComponent={
+                            <VictorySelectionContainer
+                                containerRef={(ref: any) =>
+                                    (this.svgContainer = ref)
+                                }
+                                selectionDimension="x"
+                                onSelection={this.onSelection}
+                            />
+                        }
+                        style={{
+                            parent: {
+                                width: this.props.width,
+                                height: this.props.height,
+                            },
+                        }}
+                        height={this.props.height - this.bottomPadding}
+                        width={this.props.width}
+                        padding={{
+                            left: 40,
+                            right: 20,
+                            top: 10,
+                            bottom: this.bottomPadding,
+                        }}
+                        theme={VICTORY_THEME}
+                    >
+                        <VictoryAxis
+                            tickValues={this.tickValuesBasedOnNA}
+                            tickFormat={(t: number) => this.tickFormat[t - 1]}
+                            domain={[0, this.maximumX]}
+                            tickLabelComponent={<CategoryBarChartAxisLabel />}
+                            style={{
+                                tickLabels: {
+                                    angle: TILT_ANGLE,
+                                    verticalAnchor: 'start',
+                                    textAnchor: 'start',
+                                },
+                            }}
+                        />
+                        <VictoryAxis
+                            dependentAxis={true}
+                            tickFormat={(t: number) =>
+                                Number.isInteger(t) ? t.toFixed(0) : ''
+                            }
+                        />
+                        <VictoryBar
+                            barRatio={this.barRatio}
+                            style={{
+                                data: {
+                                    fill: (d: BarDatum) =>
+                                        isDataBinSelected(
+                                            d.dataBin,
+                                            this.props.filters
+                                        ) || this.props.filters.length === 0
+                                            ? STUDY_VIEW_CONFIG.colors.theme
+                                                  .primary
+                                            : DEFAULT_NA_COLOR,
+                                },
+                            }}
+                            data={this.barDataBasedOnNA}
+                            events={this.barPlotEvents}
+                        />
+                        {this.labelShowingNA}
+                    </VictoryChart>
+                )}
+                {ReactDOM.createPortal(
+                    <CategoryBarChartToolTip
+                        mousePosition={this.mousePosition}
+                        windowWidth={WindowStore.size.width}
+                        model={this.toolTipModel}
+                        totalBars={this.barData.length}
+                        currentBarIndex={this.currentBarIndex}
+                    />,
+                    document.body
+                )}
+            </div>
+        );
+    }
+}
+
+const onlyContainsNA = (element: BarDatum): boolean => {
+    return element.dataBin.specialValue === 'NA';
+};
+
+const doesNotContainNA = (element: BarDatum): boolean => {
+    return !onlyContainsNA(element);
+};
diff --git a/src/pages/studyView/charts/categoryBarChart/CategoryBarChartAxisLabel.tsx b/src/pages/studyView/charts/categoryBarChart/CategoryBarChartAxisLabel.tsx
new file mode 100644
index 00000000000..76acc1d3aad
--- /dev/null
+++ b/src/pages/studyView/charts/categoryBarChart/CategoryBarChartAxisLabel.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { VictoryLabel, Helpers } from 'victory';
+import { Tooltip, OverlayTrigger } from 'react-bootstrap';
+
+export class CategoryBarChartAxisLabel extends VictoryLabel {
+    // Contents mostly copied from https://github.com/FormidableLabs/victory-core/blob/master/src/victory-label/victory-label.js
+    // The original renderElements function is designed to create multi-line labels.
+    // This one is designed to create labels with superscript.
+    renderElements(props: any, content: string[]) {
+        const { datum, active, inline, className, title, desc, events } = props;
+        const style = this.getStyles(props);
+        const lineHeight = this.getHeight(props, 'lineHeight');
+        const textAnchor = props.textAnchor
+            ? Helpers.evaluateProp(props.textAnchor, datum, active)
+            : 'start';
+        const dx = props.dx ? Helpers.evaluateProp(props.dx, datum, active) : 0;
+        const dy = this.getDy(props, style, content, lineHeight);
+        const transform = this.getTransform(props, style);
+        const x =
+            props.x !== undefined ? props.x : this.getPosition(props, 'x');
+        const y =
+            props.y !== undefined ? props.y : this.getPosition(props, 'y');
+
+        const tspanProps = {
+            x: !inline ? props.x : undefined,
+            dx,
+            textAnchor: style[0].textAnchor || textAnchor,
+            style: style[0],
+            key: style[0].textAnchor || textAnchor,
+        };
+
+        let tspan: any = [];
+
+        const tooltip = (
+            <Tooltip id={`tooltip-${datum}`}>{`${content.join(' ')}`}</Tooltip>
+        );
+
+        content.forEach((line, index) => {
+            const isSuperscript = index > 0;
+            const superscriptStyle = isSuperscript
+                ? {
+                      dy: -style[0].fontSize / 2,
+                      style: { ...style[0], fontSize: style[0].fontSize * 0.7 },
+                  }
+                : {};
+
+            tspan.push(
+                <OverlayTrigger placement="top" overlay={tooltip}>
+                    <tspan {...tspanProps} {...superscriptStyle}>
+                        {line.length > 4
+                            ? line.slice(0, 4).trim() + '...'
+                            : line}
+                    </tspan>
+                </OverlayTrigger>
+            );
+        });
+
+        return React.cloneElement(
+            props.textComponent,
+            { dx, dy, x, y, events, transform, className, title, desc },
+            tspan
+        );
+    }
+}
+
+// we need to ignore the type of CategoryBarChartAxisLabel to avoid typescript error
+// TS2605: JSX element type 'CategoryBarChartAxisLabel' is not a constructor function for JSX elements.
+// we get this error because VictoryLabel cannot be resolved as a valid react component (due to missing victory types)
+const BarChartAxisLabelIgnoreType = CategoryBarChartAxisLabel as any;
+export default BarChartAxisLabelIgnoreType;
diff --git a/src/pages/studyView/charts/categoryBarChart/CategoryBarChartToolTip.tsx b/src/pages/studyView/charts/categoryBarChart/CategoryBarChartToolTip.tsx
new file mode 100644
index 00000000000..92d10063cbc
--- /dev/null
+++ b/src/pages/studyView/charts/categoryBarChart/CategoryBarChartToolTip.tsx
@@ -0,0 +1,95 @@
+import * as React from 'react';
+import _ from 'lodash';
+import { computed, makeObservable } from 'mobx';
+import { Popover } from 'react-bootstrap';
+import classnames from 'classnames';
+import { formatRange } from 'pages/studyView/StudyViewUtils';
+import { observer } from 'mobx-react';
+
+export type ToolTipModel = {
+    start: number | undefined;
+    end: number | undefined;
+    special: string | undefined;
+    sampleCount: number;
+};
+
+export type CategoryBarChartToolTipProps = {
+    mousePosition: { x: number; y: number };
+    totalBars: number;
+    currentBarIndex: number;
+    model: ToolTipModel | null;
+    windowWidth: number;
+};
+
+export const VERTICAL_OFFSET = 17;
+export const HORIZONTAL_OFFSET = 8;
+
+const WIDTH = 150;
+
+@observer
+export default class CategoryBarChartToolTip extends React.Component<
+    CategoryBarChartToolTipProps,
+    {}
+> {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+    /**
+     * When the active bar is past the middle of the plot, render on the left side of the bar
+     */
+    @computed
+    get placement(): 'left' | 'right' {
+        return this.props.totalBars < this.props.currentBarIndex * 2
+            ? 'left'
+            : 'right';
+    }
+
+    @computed
+    get positionLeft(): number {
+        if (this.placement === 'left') {
+            return this.props.mousePosition.x - (HORIZONTAL_OFFSET + WIDTH);
+        } else {
+            return this.props.mousePosition.x + HORIZONTAL_OFFSET;
+        }
+    }
+
+    @computed
+    get transform(): string | undefined {
+        return this.placement === 'left' ? 'translate(-100%,0%)' : undefined;
+    }
+
+    render() {
+        if (!this.props.model) {
+            return null;
+        }
+
+        return (
+            <Popover
+                arrowOffsetTop={VERTICAL_OFFSET}
+                className={classnames('cbioportal-frontent', 'cbioTooltip')}
+                positionLeft={this.positionLeft}
+                positionTop={this.props.mousePosition.y - VERTICAL_OFFSET}
+                style={{ width: WIDTH }}
+                placement={this.placement}
+            >
+                <div>
+                    <div>
+                        Number of samples:{' '}
+                        <strong>{this.props.model.sampleCount}</strong>
+                    </div>
+                    <div>
+                        Category:{' '}
+                        <strong>
+                            {formatRange(
+                                this.props.model.start,
+                                this.props.model.end,
+                                this.props.model.special
+                            )}
+                        </strong>
+                    </div>
+                </div>
+            </Popover>
+        );
+    }
+}
diff --git a/src/pages/studyView/charts/categoryBarChart/CustomBinsModal.tsx b/src/pages/studyView/charts/categoryBarChart/CustomBinsModal.tsx
new file mode 100644
index 00000000000..22875f89945
--- /dev/null
+++ b/src/pages/studyView/charts/categoryBarChart/CustomBinsModal.tsx
@@ -0,0 +1,313 @@
+import * as React from 'react';
+import _, { isInteger, isNumber } from 'lodash';
+import { ChartMeta, customBinsAreValid } from 'pages/studyView/StudyViewUtils';
+import autobind from 'autobind-decorator';
+import { action, computed, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import {
+    ControlLabel,
+    FormControl,
+    FormGroup,
+    Modal,
+    Radio,
+} from 'react-bootstrap';
+import {
+    BinMethodOption,
+    StudyViewPageStore,
+} from 'pages/studyView/StudyViewPageStore';
+import { BinsGeneratorConfig } from 'cbioportal-ts-api-client';
+
+export type ICustomBinsProps = {
+    show: boolean;
+    onHide: () => void;
+    chartMeta: ChartMeta;
+    currentBins: number[];
+    updateCustomBins: (
+        uniqueKey: string,
+        bins: number[],
+        binMethod: BinMethodOption,
+        binsGeneratorConfig: BinsGeneratorConfig
+    ) => void;
+    onChangeBinMethod: (uniqueKey: string, binMethod: BinMethodOption) => void;
+    onChangeBinsGeneratorConfig: (
+        uniqueKey: string,
+        binSize: number,
+        anchorValue: number
+    ) => void;
+    store: StudyViewPageStore;
+};
+
+@observer
+export default class CustomBinsModal extends React.Component<
+    ICustomBinsProps,
+    {}
+> {
+    binSeparator: string = ',';
+    @observable private currentBinsValue = '';
+    defaultBinMethod = BinMethodOption.CUSTOM;
+    defaultBinsGeneratorConfig = { binSize: 0, anchorValue: 0 };
+
+    constructor(props: Readonly<ICustomBinsProps>) {
+        super(props);
+        makeObservable(this);
+        if (this.props.currentBins) {
+            const bins = _.sortBy(this.props.currentBins);
+            this.currentBinsValue = bins.join(`${this.binSeparator} `);
+        }
+    }
+
+    @computed get currentBinMethod() {
+        return (
+            this.props.store.chartsBinMethod[this.uniqueChartId] ||
+            this.defaultBinMethod
+        );
+    }
+
+    @computed get currentBinsGeneratorConfig() {
+        return (
+            this.props.store.chartsBinsGeneratorConfigs.get(
+                this.uniqueChartId
+            ) || this.defaultBinsGeneratorConfig
+        );
+    }
+
+    @computed get uniqueChartId() {
+        return this.props.chartMeta.uniqueKey;
+    }
+
+    @autobind
+    updateCurrentBinsValue() {
+        let newBins: number[] = [];
+        if (this.currentBinMethod === BinMethodOption.CUSTOM) {
+            newBins = _.sortBy(
+                this.newStringBins
+                    .filter(item => item !== '')
+                    .map(item => Number(item.trim()))
+            );
+            this.currentBinsValue = newBins.join(`${this.binSeparator} `);
+        }
+
+        this.props.onChangeBinsGeneratorConfig(
+            this.props.chartMeta.uniqueKey,
+            this.currentBinsGeneratorConfig.binSize,
+            this.currentBinsGeneratorConfig.anchorValue
+        );
+
+        this.props.updateCustomBins(
+            this.props.chartMeta.uniqueKey,
+            newBins,
+            this.currentBinMethod,
+            this.currentBinsGeneratorConfig
+        );
+
+        this.props.onHide();
+    }
+
+    @computed
+    get newStringBins() {
+        return this.currentBinsValue.trim().split(this.binSeparator);
+    }
+
+    @computed
+    get contentIsValid(): boolean {
+        return customBinsAreValid(this.newStringBins);
+    }
+
+    // TODO delegate to method in StudyViewPageStore
+    @action
+    changeBinsCheckbox(option: BinMethodOption) {
+        this.props.onChangeBinMethod(this.uniqueChartId, option);
+    }
+
+    @action
+    updateBinSize(value: number) {
+        if (_.isNumber(value) && !_.isNaN(value)) {
+            this.props.onChangeBinsGeneratorConfig(
+                this.uniqueChartId,
+                value,
+                this.currentBinsGeneratorConfig.anchorValue
+            );
+        }
+    }
+
+    @action
+    updateAnchorValue(value: number) {
+        if (_.isNumber(value) && !_.isNaN(value)) {
+            this.props.onChangeBinsGeneratorConfig(
+                this.uniqueChartId,
+                this.currentBinsGeneratorConfig.binSize,
+                value
+            );
+        }
+    }
+
+    render() {
+        return (
+            <Modal show={this.props.show} onHide={this.props.onHide} keyboard>
+                <Modal.Header closeButton>
+                    <Modal.Title>Custom Bins</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <div>
+                        <FormGroup>
+                            <Radio
+                                name="radioGroup"
+                                defaultChecked={true}
+                                checked={
+                                    this.currentBinMethod ===
+                                    BinMethodOption.QUARTILE
+                                }
+                                onChange={event =>
+                                    this.changeBinsCheckbox(
+                                        BinMethodOption.QUARTILE
+                                    )
+                                }
+                            >
+                                Quartiles
+                            </Radio>
+                        </FormGroup>
+                        <FormGroup>
+                            <Radio
+                                name="radioGroup"
+                                checked={
+                                    this.currentBinMethod ===
+                                    BinMethodOption.MEDIAN
+                                }
+                                onChange={event =>
+                                    this.changeBinsCheckbox(
+                                        BinMethodOption.MEDIAN
+                                    )
+                                }
+                            >
+                                Median split
+                            </Radio>
+                        </FormGroup>
+                        <FormGroup>
+                            <Radio
+                                name="radioGroup"
+                                checked={
+                                    this.currentBinMethod ===
+                                    BinMethodOption.GENERATE
+                                }
+                                onChange={event =>
+                                    this.changeBinsCheckbox(
+                                        BinMethodOption.GENERATE
+                                    )
+                                }
+                            >
+                                Generate bins
+                            </Radio>
+                        </FormGroup>
+                        <FormGroup>
+                            <Radio
+                                name="radioGroup"
+                                checked={
+                                    this.currentBinMethod ===
+                                    BinMethodOption.CUSTOM
+                                }
+                                onChange={event =>
+                                    this.changeBinsCheckbox(
+                                        BinMethodOption.CUSTOM
+                                    )
+                                }
+                            >
+                                Custom bins
+                            </Radio>
+                        </FormGroup>
+                    </div>
+
+                    {this.currentBinMethod === BinMethodOption.GENERATE && (
+                        <div>
+                            <FormGroup>
+                                <ControlLabel>Bin size</ControlLabel>{' '}
+                                <FormControl
+                                    type="text"
+                                    style={{ width: 70 }}
+                                    data-test={'bin-size-input'}
+                                    defaultValue={
+                                        this.currentBinsGeneratorConfig.binSize
+                                    }
+                                    onChange={event => {
+                                        const value = Number(
+                                            ((event.currentTarget as unknown) as HTMLInputElement)
+                                                .value
+                                        );
+                                        if (isNaN(value)) {
+                                            ((event.currentTarget as unknown) as HTMLInputElement).value =
+                                                '';
+                                        } else {
+                                            this.updateBinSize(Number(value));
+                                        }
+                                    }}
+                                />
+                            </FormGroup>
+                            <FormGroup>
+                                <ControlLabel>Min value</ControlLabel>{' '}
+                                <FormControl
+                                    type="text"
+                                    style={{ width: 70 }}
+                                    data-test={'anchorvalue-input'}
+                                    defaultValue={
+                                        this.currentBinsGeneratorConfig
+                                            .anchorValue
+                                    }
+                                    onChange={event => {
+                                        const value = Number(
+                                            ((event.currentTarget as unknown) as HTMLInputElement)
+                                                .value
+                                        );
+                                        if (isNaN(value)) {
+                                            ((event.currentTarget as unknown) as HTMLInputElement).value =
+                                                '';
+                                        } else {
+                                            this.updateAnchorValue(
+                                                Number(value)
+                                            );
+                                        }
+                                    }}
+                                />
+                            </FormGroup>
+                        </div>
+                    )}
+
+                    {this.currentBinMethod === BinMethodOption.CUSTOM && (
+                        <div>
+                            <p>Please specify bin boundaries of the x axis</p>
+                            <textarea
+                                style={{ resize: 'none' }}
+                                rows={5}
+                                data-test={'custom-bins-textarea'}
+                                value={this.currentBinsValue}
+                                className="form-control input-sm"
+                                onChange={event =>
+                                    (this.currentBinsValue =
+                                        event.currentTarget.value)
+                                }
+                            />
+                        </div>
+                    )}
+
+                    {!this.contentIsValid && (
+                        <div
+                            className="alert alert-danger"
+                            role="alert"
+                            style={{ marginTop: '10px', marginBottom: '0' }}
+                        >
+                            Invalid bins
+                        </div>
+                    )}
+                </Modal.Body>
+                <Modal.Footer>
+                    <button
+                        className="btn btn-primary btn-sm"
+                        onClick={this.updateCurrentBinsValue}
+                        disabled={!this.contentIsValid}
+                        style={{ marginTop: '10px', marginBottom: '0' }}
+                    >
+                        Update
+                    </button>
+                </Modal.Footer>
+            </Modal>
+        );
+    }
+}
diff --git a/src/pages/studyView/tabs/SummaryTab.tsx b/src/pages/studyView/tabs/SummaryTab.tsx
index e32c44c2057..5192cd8bbdb 100644
--- a/src/pages/studyView/tabs/SummaryTab.tsx
+++ b/src/pages/studyView/tabs/SummaryTab.tsx
@@ -42,6 +42,7 @@ import {
     getGenesCNADownloadData,
     getPatientTreatmentDownloadData,
     getSampleTreatmentDownloadData,
+    clinicalDataToDataBin,
 } from '../StudyViewUtils';
 import { DataType } from 'cbioportal-frontend-commons';
 import DelayedRender from 'shared/components/DelayedRender';
@@ -352,6 +353,34 @@ export class StudySummaryTab extends React.Component<
                     ),
                 }),
             }),
+            [ChartTypeEnum.BAR_CATEGORICAL_CHART]: () => ({
+                commonProps: {
+                    onToggleNAValue: this.handlers.onToggleNAValue,
+                    onChangeChartType: this.handlers.onChangeChartType,
+                    getData: (dataType?: DataType) =>
+                        this.store.getChartDownloadableData(
+                            chartMeta,
+                            dataType
+                        ),
+                    isShowNAChecked: this.store.isShowNAChecked(
+                        chartMeta.uniqueKey
+                    ),
+                    downloadTypes: ['Summary Data', 'Full Data', 'SVG', 'PDF'],
+                },
+                [ChartMetaDataTypeEnum.CLINICAL]: () => ({
+                    promise: this.store.getClinicalDataCount(chartMeta),
+                    onDataBinSelection: this.handlers.onDataBinSelection,
+                    filters: this.store.getClinicalDataFiltersByUniqueKey(
+                        chartMeta.uniqueKey
+                    ),
+                    onResetSelection: this.handlers.onDataBinSelection,
+                    showNAToggle: this.store.isShowNAToggleVisible(
+                        clinicalDataToDataBin(
+                            this.store.getClinicalDataCount(chartMeta).result!
+                        )
+                    ),
+                }),
+            }),
             [ChartTypeEnum.TABLE]: () => ({
                 commonProps: {
                     onChangeChartType: this.handlers.onChangeChartType,