fix: replace deprecated .interactive with eventMode

Author: MatthewKhouzam

timeline-chart/src/components/time-graph-component.ts

@@ -151,7 +151,7 @@ export abstract class TimeGraphComponent<T> {
     }
 
     addEvent(event: TimeGraphInteractionType, handler: TimeGraphInteractionHandler, displayObject: PIXI.DisplayObject) {
-        displayObject.interactive = true;
+        displayObject.eventMode = 'static';
         displayObject.on(event, ((e: PIXI.FederatedPointerEvent) => {
             if (handler) {
                 handler(e);

timeline-chart/src/layer/__tests__/time-graph-chart-rich-cursor.test.ts

@@ -7,9 +7,12 @@ import { TimeGraphChart } from '../time-graph-chart';
 
 // Mock the chart layer
 function createMockChart(states: any[] = []) {
+    const rowComponents = new Map();
     return {
         getStatesAtTimestamp: jest.fn().mockReturnValue(states),
-        rowComponents: new Map()
+        getRowComponent: (id: number) => rowComponents.get(id),
+        getRowComponents: () => rowComponents,
+        rowComponents
     } as unknown as TimeGraphChart;
 }
 
@@ -50,13 +53,13 @@ describe('TimeGraphChartRichCursor', () => {
         it('registers mousemove and mouseleave handlers', () => {
             const { cursor } = createSetup();
             expect((cursor as any)._mouseMoveHandler).toBeDefined();
-            expect((cursor as any)._mouseLeaveHandler).toBeDefined();
+            expect((cursor as any)._pointerLeaveHandler).toBeDefined();
         });
 
-        it('adds graphics and tooltip container to stage', () => {
-            const { stage } = createSetup();
-            // stage has layer + graphics + tooltipContainer
-            expect(stage.children.length).toBeGreaterThanOrEqual(3);
+        it('adds graphics and tooltip container to layer', () => {
+            const { cursor } = createSetup();
+            // layer has graphics + tooltipContainer
+            expect((cursor as any).layer.children.length).toBeGreaterThanOrEqual(2);
         });
     });
 
@@ -136,7 +139,8 @@ describe('TimeGraphChartRichCursor', () => {
             (chartLayer as any).rowComponents.set(1, { position: { y: 10 } });
 
             (cursor as any).drawCursor(100);
-            expect((cursor as any).tooltipContainer.children.length).toBeGreaterThan(0);
+            const visibleChildren = (cursor as any).tooltipContainer.children.filter((c: any) => c.visible);
+            expect(visibleChildren.length).toBeGreaterThan(0);
         });
 
         it('falls back to row name when state has no label', () => {
@@ -148,7 +152,8 @@ describe('TimeGraphChartRichCursor', () => {
 
             (cursor as any).drawCursor(100);
             // Should still create tooltip children (bg + text)
-            expect((cursor as any).tooltipContainer.children.length).toBe(2);
+            const visibleChildren = (cursor as any).tooltipContainer.children.filter((c: any) => c.visible);
+            expect(visibleChildren.length).toBe(2);
         });
 
         it('does not create tooltip when no label and no row name', () => {
@@ -159,7 +164,8 @@ describe('TimeGraphChartRichCursor', () => {
             (chartLayer as any).rowComponents.set(1, { position: { y: 10 } });
 
             (cursor as any).drawCursor(100);
-            expect((cursor as any).tooltipContainer.children.length).toBe(0);
+            const visibleChildren = (cursor as any).tooltipContainer.children.filter((c: any) => c.visible);
+            expect(visibleChildren.length).toBe(0);
         });
 
         it('flips tooltip to left when near right edge', () => {
@@ -171,9 +177,10 @@ describe('TimeGraphChartRichCursor', () => {
 
             // Draw near right edge (canvas is 800px wide)
             (cursor as any).drawCursor(790);
-            const bg = (cursor as any).tooltipContainer.children[0] as PIXI.Graphics;
-            // The tooltip box should be positioned to the left of cursor
-            expect(bg).toBeTruthy();
+            const textObj = (cursor as any).tooltipContainer.children[1] as PIXI.Text;
+            // The tooltip text should be positioned to the left of cursor
+            expect(textObj).toBeTruthy();
+            expect(textObj.x).toBeLessThan(790);
         });
 
         it('clears tooltips on each redraw', () => {
@@ -184,11 +191,13 @@ describe('TimeGraphChartRichCursor', () => {
             (chartLayer as any).rowComponents.set(1, { position: { y: 10 } });
 
             (cursor as any).drawCursor(100);
-            expect((cursor as any).tooltipContainer.children.length).toBe(2);
+            let visibleChildren = (cursor as any).tooltipContainer.children.filter((c: any) => c.visible);
+            expect(visibleChildren.length).toBe(2);
 
             (cursor as any).drawCursor(200);
-            // Should still be 2 (cleared old, added new)
-            expect((cursor as any).tooltipContainer.children.length).toBe(2);
+            // Should still be 2 visible (cleared old, reused for new)
+            visibleChildren = (cursor as any).tooltipContainer.children.filter((c: any) => c.visible);
+            expect(visibleChildren.length).toBe(2);
         });
 
         it('creates multiple tooltips for multiple hits', () => {
@@ -204,7 +213,8 @@ describe('TimeGraphChartRichCursor', () => {
 
             (cursor as any).drawCursor(100);
             // 3 tooltips × 2 children each (bg + text)
-            expect((cursor as any).tooltipContainer.children.length).toBe(6);
+            const visibleChildren = (cursor as any).tooltipContainer.children.filter((c: any) => c.visible);
+            expect(visibleChildren.length).toBe(6);
         });
     });
 
@@ -217,25 +227,29 @@ describe('TimeGraphChartRichCursor', () => {
             (chartLayer as any).rowComponents.set(1, { position: { y: 10 } });
 
             (cursor as any).drawCursor(100);
-            expect((cursor as any).tooltipContainer.children.length).toBe(2);
+            let visibleChildren = (cursor as any).tooltipContainer.children.filter((c: any) => c.visible);
+            expect(visibleChildren.length).toBe(2);
 
             // Simulate mouseleave
-            (cursor as any)._mouseLeaveHandler();
-            expect((cursor as any).tooltipContainer.children.length).toBe(0);
+            (cursor as any)._pointerLeaveHandler();
+            visibleChildren = (cursor as any).tooltipContainer.children.filter((c: any) => c.visible);
+            expect(visibleChildren.length).toBe(0);
         });
     });
 
     describe('update', () => {
-        it('clears graphics and tooltips on update', () => {
+        it('redraws tooltips on update when mouse is in canvas', () => {
             const hits = [
                 { row: { id: 1, name: 'R' }, state: { label: 'S', range: { start: BigInt(0), end: BigInt(100) } } }
             ];
             const { cursor, chartLayer } = createSetup(hits);
             (chartLayer as any).rowComponents.set(1, { position: { y: 10 } });
 
-            (cursor as any).drawCursor(100);
+            (cursor as any).isMouseInCanvas = true;
+            (cursor as any).lastMouseX = 100;
             cursor.update();
-            expect((cursor as any).tooltipContainer.children.length).toBe(0);
+            const visibleChildren = (cursor as any).tooltipContainer.children.filter((c: any) => c.visible);
+            expect(visibleChildren.length).toBe(2);
         });
     });
 
@@ -244,8 +258,8 @@ describe('TimeGraphChartRichCursor', () => {
             const { cursor, canvas } = createSetup();
             const removeSpy = jest.spyOn(canvas, 'removeEventListener');
             cursor.destroy();
-            expect(removeSpy).toHaveBeenCalledWith('mousemove', expect.any(Function));
-            expect(removeSpy).toHaveBeenCalledWith('mouseleave', expect.any(Function));
+            expect(removeSpy).toHaveBeenCalledWith('pointermove', expect.any(Function));
+            expect(removeSpy).toHaveBeenCalledWith('pointerleave', expect.any(Function));
         });
     });
 

timeline-chart/src/layer/time-graph-chart-cursors.ts

@@ -36,7 +36,7 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
     protected afterAddToContainer() {
         this.mouseSelecting = false;
         this.shiftKeyDown = false
-        this.stage.interactive = true;
+        this.stage.eventMode = 'static';
 
         this._updateHandler = (): void => this.update();
 
@@ -107,8 +107,7 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
                 if ((this.mouseButtons & 1) === 0) {
                     // handle missed button mouseup event
                     this.mouseSelecting = false;
-                    const orig = event.nativeEvent as PointerEvent;
-                    if (!orig.shiftKey || orig.ctrlKey || orig.altKey) {
+                    if (!event.shiftKey || event.ctrlKey || event.altKey) {
                         this.stage.cursor = 'default';
                     }
                     return;
@@ -129,8 +128,7 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
             this.mouseButtons = event.buttons;
             if (this.mouseSelecting && event.button === 0) {
                 this.mouseSelecting = false;
-                const orig = event.nativeEvent as PointerEvent;
-                if (!orig.shiftKey || orig.ctrlKey || orig.altKey) {
+                if (!event.shiftKey || event.ctrlKey || event.altKey) {
                     this.stage.cursor = 'default';
                 }
             }
@@ -296,7 +294,7 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
             this.removeOnCanvasEvent('keydown', this._keyboardShortcutKeyDownHandler);
         }
         if (this._cursorKeyUpHandler) {
-            this.removeOnCanvasEvent('mousedown', this._cursorKeyUpHandler);
+            this.removeOnCanvasEvent('keyup', this._cursorKeyUpHandler);
         }
         if (this.stage) {
             this.stage.off('mousedown', this._stageMouseDownHandler);

timeline-chart/src/layer/time-graph-chart-rich-cursor.ts

@@ -5,13 +5,17 @@ import { TimeGraphRowController } from "../time-graph-row-controller";
 import { TimeGraphChart } from "./time-graph-chart";
 import { TimelineChart } from "../time-graph-model";
 import { BIMath } from "../bigint-utils";
+import { RenderEvents } from "../time-graph-render-controller";
 
 export class TimeGraphChartRichCursor extends TimeGraphChartLayer {
     private graphics: PIXI.Graphics;
     private tooltipContainer: PIXI.Container;
     private _mouseMoveHandler: (event: Event) => void;
+    private _pointerLeaveHandler: (event: Event) => void;
     private lastMouseX: number = -1;
     private isMouseInCanvas: boolean = false;
+    private tooltipPool: { bg: PIXI.Graphics, text: PIXI.Text }[] = [];
+    private tooltipPoolIndex: number = 0;
 
     constructor(id: string, protected chartLayer: TimeGraphChart, protected rowController: TimeGraphRowController,
         private style?: { lineColor?: number, dotColor?: number }) {
@@ -44,11 +48,12 @@ export class TimeGraphChartRichCursor extends TimeGraphChartLayer {
         };
 
         this.onCanvasEvent('pointermove', this._mouseMoveHandler);
-        this.onCanvasEvent('pointerleave', () => {
+        this._pointerLeaveHandler = () => {
             this.graphics.clear();
             this.removeTooltips();
             this.isMouseInCanvas = false;
-        });
+        };
+        this.onCanvasEvent('pointerleave', this._pointerLeaveHandler);
     }
 
     private drawCursor(mouseX: number) {
@@ -59,6 +64,7 @@ export class TimeGraphChartRichCursor extends TimeGraphChartLayer {
 
         this.graphics.clear();
         this.removeTooltips();
+        RenderEvents.startRender();
 
         // Vertical line
         this.graphics.lineStyle(1, lineColor, 0.7);
@@ -72,7 +78,7 @@ export class TimeGraphChartRichCursor extends TimeGraphChartLayer {
         // Draw a dot and tooltip on each row that has a state
         this.graphics.lineStyle(0);
         hits.forEach(hit => {
-            const rowComponent = (this.chartLayer as any).rowComponents.get(hit.row.id);
+            const rowComponent = this.chartLayer.getRowComponent(hit.row.id);
             if (!rowComponent) return;
 
             const y = rowComponent.position.y - this.rowController.verticalOffset;
@@ -91,7 +97,7 @@ export class TimeGraphChartRichCursor extends TimeGraphChartLayer {
         });
 
         // Draw XY value indicators on rows with xySeries
-        const rowComponents: Map<number, any> = (this.chartLayer as any).rowComponents;
+        const rowComponents = this.chartLayer.getRowComponents();
         rowComponents.forEach((rowComponent) => {
             const model: TimelineChart.TimeGraphRowModel | undefined = rowComponent.model;
             if (!model?.xySeries?.length) return;
@@ -143,20 +149,35 @@ export class TimeGraphChartRichCursor extends TimeGraphChartLayer {
     }
 
     private removeTooltips() {
-        this.tooltipContainer.removeChildren();
+        for (let i = 0; i < this.tooltipPool.length; i++) {
+            this.tooltipPool[i].bg.visible = false;
+            this.tooltipPool[i].text.visible = false;
+        }
+        this.tooltipPoolIndex = 0;
+    }
+
+    private getTooltipPair(): { bg: PIXI.Graphics, text: PIXI.Text } {
+        if (this.tooltipPoolIndex < this.tooltipPool.length) {
+            return this.tooltipPool[this.tooltipPoolIndex++];
+        }
+        const bg = new PIXI.Graphics();
+        const text = new PIXI.Text('', { fontSize: 11, fill: 0xffffff, fontFamily: 'Verdana' });
+        this.tooltipContainer.addChild(bg);
+        this.tooltipContainer.addChild(text);
+        const pair = { bg, text };
+        this.tooltipPool.push(pair);
+        this.tooltipPoolIndex++;
+        return pair;
     }
 
-    private drawTooltip(x: number, y: number, text: string) {
+    private drawTooltip(x: number, y: number, label: string) {
         const padding = 4;
         const offsetX = 8;
-        const fontSize = 11;
         const canvasWidth = this.stateController.canvasDisplayWidth;
 
-        const textObj = new PIXI.Text(text, {
-            fontSize,
-            fill: 0xffffff,
-            fontFamily: 'Verdana'
-        });
+        const { bg, text: textObj } = this.getTooltipPair();
+        textObj.text = label;
+        textObj.visible = true;
 
         const boxWidth = textObj.width + padding * 2;
         const boxHeight = textObj.height + padding * 2;
@@ -167,17 +188,21 @@ export class TimeGraphChartRichCursor extends TimeGraphChartLayer {
             boxX = x - offsetX - boxWidth;
         }
         let boxY = y - boxHeight / 2;
+        const canvasHeight = this.stateController.canvasDisplayHeight;
+        if (boxY < 0) {
+            boxY = 0;
+        } else if (boxY + boxHeight > canvasHeight) {
+            boxY = canvasHeight - boxHeight;
+        }
 
-        const bg = new PIXI.Graphics();
+        bg.clear();
         bg.beginFill(0x333333, 0.9);
         bg.drawRoundedRect(boxX, boxY, boxWidth, boxHeight, 3);
         bg.endFill();
+        bg.visible = true;
 
         textObj.x = boxX + padding;
         textObj.y = boxY + padding;
-
-        this.tooltipContainer.addChild(bg);
-        this.tooltipContainer.addChild(textObj);
     }
 
     update() {
@@ -192,6 +217,9 @@ export class TimeGraphChartRichCursor extends TimeGraphChartLayer {
         if (this._mouseMoveHandler) {
             this.removeOnCanvasEvent('pointermove', this._mouseMoveHandler);
         }
+        if (this._pointerLeaveHandler) {
+            this.removeOnCanvasEvent('pointerleave', this._pointerLeaveHandler);
+        }
         super.destroy();
     }
 }