From ad897a32218837609366d41002259303ded5e124 Mon Sep 17 00:00:00 2001
From: rishisulakhe <rishiprasadsulakhe@gmail.com>
Date: Mon, 10 Mar 2025 17:33:55 +0000
Subject: [PATCH 1/2] Added tooltip for axis label

---
 .../components/plots/BoxScatterPlot.tsx       | 92 +++++++++++++++++++
 1 file changed, 92 insertions(+)

diff --git a/src/shared/components/plots/BoxScatterPlot.tsx b/src/shared/components/plots/BoxScatterPlot.tsx
index a417df682fb..c885c792f53 100644
--- a/src/shared/components/plots/BoxScatterPlot.tsx
+++ b/src/shared/components/plots/BoxScatterPlot.tsx
@@ -101,6 +101,7 @@ export type BoxModel = {
     q3: number;
     x?: number;
     y?: number;
+    eventkey?: number;
 };
 
 const RIGHT_GUTTER = 130; // room for legend
@@ -130,6 +131,7 @@ export default class BoxScatterPlot<
     @observable.ref private container: HTMLDivElement;
     @observable.ref private boxPlotTooltipModel: any | null;
     @observable private mousePosition = { x: 0, y: 0 };
+    @observable.ref private axisLabelTooltipModel: any | null;
 
     private scatterPlotTooltipHelper: ScatterPlotTooltipHelper = new ScatterPlotTooltipHelper();
 
@@ -186,6 +188,41 @@ export default class BoxScatterPlot<
         }
         return [];
     }
+    private get axisLabelEvents() {
+        if (this.props.boxPlotTooltip) {
+            const self = this;
+            return [
+                {
+                    target: 'tickLabels',
+                    eventHandlers: {
+                        onMouseEnter: (event: any, props: any) => {
+                            const groupIndex = props.index;
+                            if (
+                                groupIndex !== undefined &&
+                                self.boxPlotData[groupIndex]
+                            ) {
+                                self.axisLabelTooltipModel = {
+                                    datum: self.boxPlotData[groupIndex],
+                                    eventkey: groupIndex,
+                                };
+                                self.mousePosition = {
+                                    x: event.pageX, // Changed from clientX
+                                    y: event.pageY, // Changed from clientY
+                                };
+                            }
+                            return [];
+                        },
+
+                        onMouseLeave: () => {
+                            self.axisLabelTooltipModel = null;
+                            return [];
+                        },
+                    },
+                },
+            ];
+        }
+        return [];
+    }
 
     private get title() {
         if (this.props.title) {
@@ -602,6 +639,7 @@ export default class BoxScatterPlot<
                         }
                     />
                 }
+                events={this.axisLabelEvents}
             />
         );
     }
@@ -647,6 +685,7 @@ export default class BoxScatterPlot<
                 axisLabelComponent={
                     <VictoryLabel dy={this.yAxisLabelVertOffset} />
                 }
+                events={this.axisLabelEvents}
             />
         );
     }
@@ -760,6 +799,7 @@ export default class BoxScatterPlot<
             } else {
                 box.x = this.categoryCoord(i);
             }
+            box.eventkey = i;
         };
 
         return toBoxPlotData(
@@ -939,6 +979,57 @@ export default class BoxScatterPlot<
         }
     }
 
+    @autobind
+    private getAxisLabelTooltipComponent() {
+        if (
+            this.container &&
+            this.axisLabelTooltipModel &&
+            this.props.boxPlotTooltip
+        ) {
+            const maxWidth = 400;
+            let tooltipPlacement =
+                this.mousePosition.x > WindowStore.size.width - maxWidth
+                    ? 'left'
+                    : 'right';
+
+            return (ReactDOM as any).createPortal(
+                <Popover
+                    arrowOffsetTop={VERTICAL_OFFSET}
+                    className={classnames('cbioportal-frontend', 'cbioTooltip')}
+                    positionLeft={
+                        this.mousePosition.x +
+                        (tooltipPlacement === 'left'
+                            ? -HORIZONTAL_OFFSET
+                            : HORIZONTAL_OFFSET)
+                    }
+                    positionTop={this.mousePosition.y + VERTICAL_OFFSET}
+                    style={{
+                        transform:
+                            tooltipPlacement === 'left'
+                                ? 'translate(-100%,0%)'
+                                : undefined,
+                        maxWidth,
+                    }}
+                    placement={tooltipPlacement}
+                >
+                    <div>
+                        {this.props.boxPlotTooltip(
+                            [this.axisLabelTooltipModel.datum],
+                            [
+                                this.props.data[
+                                    this.axisLabelTooltipModel.datum.eventkey
+                                ].label,
+                            ]
+                        )}
+                    </div>
+                </Popover>,
+                document.body
+            );
+        } else {
+            return <></>;
+        }
+    }
+
     render() {
         if (!this.props.data.length) {
             return <div className={'alert alert-info'}>No data to plot.</div>;
@@ -948,6 +1039,7 @@ export default class BoxScatterPlot<
                 <Observer>{this.getChart}</Observer>
                 <Observer>{this.getScatterPlotTooltip}</Observer>
                 <Observer>{this.getBoxPlotTooltipComponent}</Observer>
+                <Observer>{this.getAxisLabelTooltipComponent}</Observer>
             </div>
         );
     }

From d61e4800d452deb41ad8097c92881e7379db1e48 Mon Sep 17 00:00:00 2001
From: rishisulakhe <rishiprasadsulakhe@gmail.com>
Date: Tue, 11 Mar 2025 17:51:52 +0000
Subject: [PATCH 2/2] Consolidating the tooltip logic

---
 .../components/plots/BoxScatterPlot.tsx       | 88 ++++++-------------
 1 file changed, 26 insertions(+), 62 deletions(-)

diff --git a/src/shared/components/plots/BoxScatterPlot.tsx b/src/shared/components/plots/BoxScatterPlot.tsx
index aea9be0f62a..0c9b217969b 100644
--- a/src/shared/components/plots/BoxScatterPlot.tsx
+++ b/src/shared/components/plots/BoxScatterPlot.tsx
@@ -244,8 +244,8 @@ export default class BoxScatterPlot<
                                     eventkey: groupIndex,
                                 };
                                 self.mousePosition = {
-                                    x: event.pageX, // Changed from clientX
-                                    y: event.pageY, // Changed from clientY
+                                    x: event.pageX,
+                                    y: event.pageY,
                                 };
                             }
                             return [];
@@ -981,13 +981,14 @@ export default class BoxScatterPlot<
     }
 
     @autobind
-    private getBoxPlotTooltipComponent() {
-        if (
-            this.container &&
-            this.boxPlotTooltipModel &&
-            this.props.boxPlotTooltip
-        ) {
+    private getTooltipComponent(
+        tooltipModel: any,
+        verticalOffsetAdjustment: number
+    ) {
+        if (this.container && tooltipModel && this.props.boxPlotTooltip) {
             const maxWidth = 400;
+            const eventKey =
+                tooltipModel.datum.eventKey ?? tooltipModel.datum.eventkey;
             let tooltipPlacement =
                 this.mousePosition.x > WindowStore.size.width - maxWidth
                     ? 'left'
@@ -1002,7 +1003,9 @@ export default class BoxScatterPlot<
                             ? -HORIZONTAL_OFFSET
                             : HORIZONTAL_OFFSET)
                     }
-                    positionTop={this.mousePosition.y - VERTICAL_OFFSET}
+                    positionTop={
+                        this.mousePosition.y + verticalOffsetAdjustment
+                    }
                     style={{
                         transform:
                             tooltipPlacement === 'left'
@@ -1014,12 +1017,8 @@ export default class BoxScatterPlot<
                 >
                     <div>
                         {this.props.boxPlotTooltip(
-                            [this.boxPlotTooltipModel.datum],
-                            [
-                                this.props.data[
-                                    this.boxPlotTooltipModel.datum.eventKey
-                                ].label,
-                            ]
+                            [tooltipModel.datum],
+                            [this.props.data[eventKey]?.label]
                         )}
                     </div>
                 </Popover>,
@@ -1031,54 +1030,19 @@ export default class BoxScatterPlot<
     }
 
     @autobind
-    private getAxisLabelTooltipComponent() {
-        if (
-            this.container &&
-            this.axisLabelTooltipModel &&
-            this.props.boxPlotTooltip
-        ) {
-            const maxWidth = 400;
-            let tooltipPlacement =
-                this.mousePosition.x > WindowStore.size.width - maxWidth
-                    ? 'left'
-                    : 'right';
+    private getBoxPlotTooltipComponent() {
+        return this.getTooltipComponent(
+            this.boxPlotTooltipModel,
+            -VERTICAL_OFFSET
+        );
+    }
 
-            return (ReactDOM as any).createPortal(
-                <Popover
-                    arrowOffsetTop={VERTICAL_OFFSET}
-                    className={classnames('cbioportal-frontend', 'cbioTooltip')}
-                    positionLeft={
-                        this.mousePosition.x +
-                        (tooltipPlacement === 'left'
-                            ? -HORIZONTAL_OFFSET
-                            : HORIZONTAL_OFFSET)
-                    }
-                    positionTop={this.mousePosition.y + VERTICAL_OFFSET}
-                    style={{
-                        transform:
-                            tooltipPlacement === 'left'
-                                ? 'translate(-100%,0%)'
-                                : undefined,
-                        maxWidth,
-                    }}
-                    placement={tooltipPlacement}
-                >
-                    <div>
-                        {this.props.boxPlotTooltip(
-                            [this.axisLabelTooltipModel.datum],
-                            [
-                                this.props.data[
-                                    this.axisLabelTooltipModel.datum.eventkey
-                                ].label,
-                            ]
-                        )}
-                    </div>
-                </Popover>,
-                document.body
-            );
-        } else {
-            return <></>;
-        }
+    @autobind
+    private getAxisLabelTooltipComponent() {
+        return this.getTooltipComponent(
+            this.axisLabelTooltipModel,
+            VERTICAL_OFFSET
+        );
     }
 
     render() {