From 0939aef44604858c0a5c64987f56736563135c68 Mon Sep 17 00:00:00 2001
From: Olzhas Mukayev <olzhasmukayev@Mukayev-Olzhas.local>
Date: Fri, 23 Aug 2024 15:24:07 +0500
Subject: [PATCH] feat: add line chart to the Study View

---
 src/pages/studyView/StudyViewConfig.ts        |  15 ++
 src/pages/studyView/StudyViewPageStore.ts     |   5 +
 .../studyView/chartHeader/ChartHeader.tsx     | 127 +++++++----
 src/pages/studyView/charts/ChartContainer.tsx |  25 +++
 .../studyView/charts/barChart/BarChart.tsx    |   2 +-
 .../studyView/charts/lineChart/LineChart.tsx  | 200 ++++++++++++++++++
 src/pages/studyView/tabs/SummaryTab.tsx       |  88 ++++++++
 7 files changed, 418 insertions(+), 44 deletions(-)
 create mode 100644 src/pages/studyView/charts/lineChart/LineChart.tsx

diff --git a/src/pages/studyView/StudyViewConfig.ts b/src/pages/studyView/StudyViewConfig.ts
index 166ef974a1f..968a7a791ac 100644
--- a/src/pages/studyView/StudyViewConfig.ts
+++ b/src/pages/studyView/StudyViewConfig.ts
@@ -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',
@@ -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',
@@ -186,6 +192,10 @@ const studyViewFrontEnd = {
                 w: 2,
                 h: 1,
             },
+            [ChartTypeEnum.LINE_CHART]: {
+                w: 2,
+                h: 1,
+            },
             [ChartTypeEnum.SCATTER]: {
                 w: 2,
                 h: 2,
@@ -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],
+};
diff --git a/src/pages/studyView/StudyViewPageStore.ts b/src/pages/studyView/StudyViewPageStore.ts
index 98d9da7d788..1c23e52d791 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>();
diff --git a/src/pages/studyView/chartHeader/ChartHeader.tsx b/src/pages/studyView/chartHeader/ChartHeader.tsx
index 83a273aa57d..cf7465f5e00 100644
--- a/src/pages/studyView/chartHeader/ChartHeader.tsx
+++ b/src/pages/studyView/chartHeader/ChartHeader.tsx
@@ -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,
@@ -82,6 +86,7 @@ export interface ChartControls {
     showSwapAxes?: boolean;
     showSurvivalPlotLeftTruncationToggle?: boolean;
     survivalPlotLeftTruncationChecked?: boolean;
+    showChartChangeOptions?: boolean;
 }
 
 @observer
@@ -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) {
@@ -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>
             );
         }
diff --git a/src/pages/studyView/charts/ChartContainer.tsx b/src/pages/studyView/charts/ChartContainer.tsx
index ab3c4ea2c8f..4c843ca625d 100644
--- a/src/pages/studyView/charts/ChartContainer.tsx
+++ b/src/pages/studyView/charts/ChartContainer.tsx
@@ -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;
@@ -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;
             }
@@ -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
@@ -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
diff --git a/src/pages/studyView/charts/barChart/BarChart.tsx b/src/pages/studyView/charts/barChart/BarChart.tsx
index 5ac0382c8a0..18dd34d58d1 100644
--- a/src/pages/studyView/charts/barChart/BarChart.tsx
+++ b/src/pages/studyView/charts/barChart/BarChart.tsx
@@ -55,7 +55,7 @@ function generateTheme() {
     return theme;
 }
 
-const VICTORY_THEME = generateTheme();
+export const VICTORY_THEME = generateTheme();
 const TILT_ANGLE = 50;
 
 @observer
diff --git a/src/pages/studyView/charts/lineChart/LineChart.tsx b/src/pages/studyView/charts/lineChart/LineChart.tsx
new file mode 100644
index 00000000000..a0af8d75fe7
--- /dev/null
+++ b/src/pages/studyView/charts/lineChart/LineChart.tsx
@@ -0,0 +1,200 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import {
+    VictoryLine,
+    VictoryChart,
+    VictoryAxis,
+    VictoryTheme,
+    VictoryTooltip,
+    VictoryScatter,
+    VictorySelectionContainer,
+} from 'victory';
+import _ from 'lodash';
+import { makeObservable, observable, computed } from 'mobx';
+import autobind from 'autobind-decorator';
+import BarChartToolTip from '../barChart/BarChartToolTip';
+import { ToolTipModel } from '../barChart/BarChartToolTip';
+import WindowStore from 'shared/components/window/WindowStore';
+import ReactDOM from 'react-dom';
+
+interface IDataBin {
+    id: string;
+    count: number;
+    start: number;
+    end: number;
+    specialValue?: string;
+}
+
+interface ILineChartProps {
+    data: IDataBin[];
+    width: number;
+    height: number;
+    onUserSelection: (selectedData: IDataBin[]) => void;
+}
+
+@observer
+class LineChart extends React.Component<ILineChartProps> {
+    @observable.ref
+    private mousePosition = { x: 0, y: 0 };
+    @observable
+    private currentPointIndex = -1;
+
+    @observable
+    private toolTipModel: ToolTipModel | null = null;
+
+    constructor(props: ILineChartProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    @computed
+    get processedData(): { x: number; y: number; label: number }[] {
+        return _.chain(this.props.data)
+            .filter(item => item.specialValue === undefined)
+            .map(item => ({
+                x: item.start,
+                y: item.count,
+                label: item.count,
+            }))
+            .value();
+    }
+
+    @computed
+    get processedDataLabels(): { x: number; y: number; label: number }[] {
+        return _.chain(this.props.data)
+            .filter(item => item.specialValue === undefined)
+            .map(item => ({
+                x: (item.start + item.end) / 2,
+                y: item.count,
+                label: item.count,
+            }))
+            .value();
+    }
+
+    handleSelection = (points: any, bounds: any) => {
+        if (bounds && bounds.x) {
+            const selectedData = this.props.data.filter(
+                item =>
+                    (item.end ?? item.start ?? 0) >= bounds.x[0] &&
+                    (item.end ?? item.start ?? 0) <= bounds.x[1]
+            );
+            this.props.onUserSelection(selectedData);
+        }
+    };
+
+    @autobind
+    private onMouseMove(event: React.MouseEvent<any>): void {
+        this.mousePosition = { x: event.pageX, y: event.pageY };
+    }
+
+    private get scatterEvents() {
+        const self = this;
+        return [
+            {
+                target: 'data',
+                eventHandlers: {
+                    onMouseEnter: () => {
+                        return [
+                            {
+                                target: 'data',
+                                mutation: (event: any) => {
+                                    self.currentPointIndex =
+                                        event.datum.eventKey;
+                                    self.toolTipModel = {
+                                        start:
+                                            self.props.data[
+                                                self.currentPointIndex
+                                            ].start,
+                                        end:
+                                            self.props.data[
+                                                self.currentPointIndex
+                                            ].end,
+                                        special:
+                                            self.props.data[
+                                                self.currentPointIndex
+                                            ].specialValue,
+                                        sampleCount: event.datum.y,
+                                    };
+                                },
+                            },
+                        ];
+                    },
+                    onMouseLeave: () => {
+                        return [
+                            {
+                                target: 'data',
+                                mutation: () => {
+                                    self.toolTipModel = null;
+                                },
+                            },
+                        ];
+                    },
+                },
+            },
+        ];
+    }
+
+    render() {
+        // Increased the aspect ratio by adjusting the width and height
+        const chartWidth = this.props.width * 1.7; // Increase width by 50%
+        const chartHeight = this.props.height * 1.7; // Increase height by 20%
+
+        return (
+            <div onMouseMove={this.onMouseMove}>
+                <VictoryChart
+                    theme={VictoryTheme.material}
+                    width={chartWidth}
+                    height={chartHeight}
+                    padding={{
+                        left: 60,
+                        right: 40,
+                        top: 30,
+                        bottom: 60,
+                    }}
+                    containerComponent={
+                        <VictorySelectionContainer
+                            onSelection={this.handleSelection}
+                            selectionDimension="x"
+                        />
+                    }
+                >
+                    <VictoryAxis
+                        tickFormat={(t: number) => t.toLocaleString()}
+                        style={{ tickLabels: { fontSize: 18 } }}
+                        fixLabelOverlap={true}
+                    />
+                    <VictoryAxis
+                        dependentAxis
+                        tickFormat={(t: number) => t.toLocaleString()}
+                        style={{ tickLabels: { fontSize: 18 } }}
+                    />
+                    <VictoryLine
+                        data={this.processedData}
+                        style={{ data: { stroke: '#4f72b2' } }}
+                        interpolation="monotoneX"
+                    />
+                    <VictoryScatter
+                        data={this.processedData}
+                        size={5}
+                        style={{ data: { fill: '#c43a31' } }}
+                        labels={({ datum }: { datum: any }) => datum.label}
+                        labelComponent={<></>}
+                        events={this.scatterEvents}
+                    />
+                </VictoryChart>
+                {ReactDOM.createPortal(
+                    <BarChartToolTip
+                        mousePosition={this.mousePosition}
+                        windowWidth={WindowStore.size.width}
+                        model={this.toolTipModel}
+                        totalBars={this.props.data.length}
+                        currentBarIndex={this.currentPointIndex}
+                    />,
+                    document.body
+                )}
+            </div>
+        );
+    }
+}
+
+export default LineChart;
diff --git a/src/pages/studyView/tabs/SummaryTab.tsx b/src/pages/studyView/tabs/SummaryTab.tsx
index e32c44c2057..6ae663ae8b1 100644
--- a/src/pages/studyView/tabs/SummaryTab.tsx
+++ b/src/pages/studyView/tabs/SummaryTab.tsx
@@ -277,6 +277,94 @@ export class StudySummaryTab extends React.Component<
                     isShowNAChecked: this.store.isShowNAChecked(
                         chartMeta.uniqueKey
                     ),
+                    onChangeChartType: this.handlers.onChangeChartType,
+                    downloadTypes: ['Data', 'SVG', 'PDF'],
+                },
+                [ChartMetaDataTypeEnum.GENE_SPECIFIC]: () => ({
+                    promise: this.store.getGenomicChartDataBin(chartMeta),
+                    filters: this.store.getGenomicDataFiltersByUniqueKey(
+                        chartMeta.uniqueKey
+                    ),
+                    onDataBinSelection: this.handlers.onGenomicDataBinSelection,
+                    onResetSelection: this.handlers.onGenomicDataBinSelection,
+                    getData: () =>
+                        this.store.getChartDownloadableData(chartMeta),
+                    showLogScaleToggle: this.store.isLogScaleToggleVisible(
+                        chartMeta.uniqueKey,
+                        this.store.getGenomicChartDataBin(chartMeta).result
+                    ),
+                    showNAToggle: this.store.isShowNAToggleVisible(
+                        this.store.getGenomicChartDataBin(chartMeta).result!
+                    ),
+                }),
+                [ChartMetaDataTypeEnum.GENERIC_ASSAY]: () => ({
+                    promise: this.store.getGenericAssayChartDataBin(chartMeta),
+                    filters: this.store.getGenericAssayDataFiltersByUniqueKey(
+                        chartMeta.uniqueKey
+                    ),
+                    onDataBinSelection: this.handlers
+                        .onGenericAssayDataBinSelection,
+                    onResetSelection: this.handlers
+                        .onGenericAssayDataBinSelection,
+                    getData: () =>
+                        this.store.getChartDownloadableData(chartMeta),
+                    showLogScaleToggle: this.store.isLogScaleToggleVisible(
+                        chartMeta.uniqueKey,
+                        this.store.getGenericAssayChartDataBin(chartMeta).result
+                    ),
+                    showNAToggle: this.store.isShowNAToggleVisible(
+                        this.store.getGenericAssayChartDataBin(chartMeta)
+                            .result!
+                    ),
+                }),
+                [ChartMetaDataTypeEnum.CUSTOM_DATA]: () => ({
+                    promise: this.store.getCustomDataNumerical(chartMeta),
+                    onDataBinSelection: this.handlers
+                        .onCustomChartDataBinSelection,
+                    filters: this.store.getCustomDataFiltersByUniqueKey(
+                        chartMeta.uniqueKey
+                    ),
+                    onResetSelection: this.handlers.onDataBinSelection,
+                    getData: () =>
+                        this.store.getChartDownloadableData(chartMeta),
+                    showLogScaleToggle: this.store.isLogScaleToggleVisible(
+                        chartMeta.uniqueKey,
+                        this.store.getCustomDataNumerical(chartMeta).result
+                    ),
+                    showNAToggle: this.store.isShowNAToggleVisible(
+                        this.store.getCustomDataNumerical(chartMeta).result!
+                    ),
+                }),
+                [ChartMetaDataTypeEnum.CLINICAL]: () => ({
+                    promise: this.store.getClinicalDataBin(chartMeta),
+                    onDataBinSelection: this.handlers.onDataBinSelection,
+                    filters: this.store.getClinicalDataFiltersByUniqueKey(
+                        chartMeta.uniqueKey
+                    ),
+                    onResetSelection: this.handlers.onDataBinSelection,
+                    getData: () =>
+                        this.store.getChartDownloadableData(chartMeta),
+                    showLogScaleToggle: this.store.isLogScaleToggleVisible(
+                        chartMeta.uniqueKey,
+                        this.store.getClinicalDataBin(chartMeta).result
+                    ),
+                    showNAToggle: this.store.isShowNAToggleVisible(
+                        this.store.getClinicalDataBin(chartMeta).result!
+                    ),
+                }),
+            }),
+            [ChartTypeEnum.LINE_CHART]: () => ({
+                commonProps: {
+                    onToggleNAValue: this.handlers.onToggleNAValue,
+                    logScaleChecked: this.store.isLogScaleChecked(
+                        chartMeta.uniqueKey
+                    ),
+                    isShowNAChecked: this.store.isShowNAChecked(
+                        chartMeta.uniqueKey
+                    ),
+                    onTogglePreview: this.handlers.onTogglePreview,
+                    previewShown: false,
+                    onChangeChartType: this.handlers.onChangeChartType,
                     downloadTypes: ['Data', 'SVG', 'PDF'],
                 },
                 [ChartMetaDataTypeEnum.GENE_SPECIFIC]: () => ({