Integrate rich cursor and fix tooltip pointer events by MatthewKhouzam · Pull Request #395 · eclipse-cdt-cloud/vscode-trace-extension

MatthewKhouzam · 2026-05-14T00:15:35Z

What it does

Add TimeGraphChartRichCursor layer to gantt chart
Set tooltip pointerEvents to 'none' to avoid blocking canvas events
Add pixi.js-legacy resolution to force 7.x from linked timeline-chart

How to test

Open a timegraph

Follow-ups

Review checklist

As an author, I have thoroughly tested my changes and carefully followed the instructions in this template

Summary by CodeRabbit

New Features
- Added a rich cursor visualization and interaction layer to charts for enhanced data exploration with improved pointer feedback.
Bug Fixes
- Fixed tooltip behavior to ignore pointer events and prevent interference with other UI interactions.
Chores
- Updated dependency resolution configuration for build compatibility.

- Add TimeGraphChartRichCursor layer to gantt chart - Set tooltip pointerEvents to 'none' to avoid blocking canvas events - Add pixi.js-legacy resolution to force 7.x from linked timeline-chart

coderabbitai · 2026-05-14T00:15:48Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b2d4d151-8e61-46a1-bb94-4002e035953e

📥 Commits

Reviewing files that changed from the base of the PR and between d055f6e and b7dec2b.

⛔ Files ignored due to path filters (1)

yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (3)

local-libs/traceviewer-libs/react-components/src/components/abstract-gantt-output-component.tsx
local-libs/traceviewer-libs/react-components/src/components/tooltip-component.tsx
package.json

📝 Walkthrough

Walkthrough

The pull request adds a rich cursor visualization layer to the gantt chart component, disables tooltip pointer events to prevent interference, and resolves the pixi.js-legacy dependency required by the new layer.

Changes

Rich Cursor Visualization

Layer / File(s)	Summary
Rich Cursor Layer Integration `local-libs/traceviewer-libs/react-components/src/components/abstract-gantt-output-component.tsx`	Imports `TimeGraphChartRichCursor` and configures it as a new layer in the chart, positioned after `rangeEventsLayer`.
Pointer Interaction and Dependency Resolution `local-libs/traceviewer-libs/react-components/src/components/tooltip-component.tsx`, `package.json`	Changes tooltip `pointerEvents` from `'auto'` to `'none'` to prevent tooltip interaction with cursor, and adds `pixi.js-legacy` to package resolutions.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A cursor so rich, now dancing in sight,
Gliding through gantt charts, rendering just right!
No tooltips shall block this majestic display,
With pixels resolved, the visualization comes into play! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Integrate rich cursor and fix tooltip pointer events' directly and specifically summarizes the two main changes: adding the rich cursor layer and fixing tooltip pointer events.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

MatthewKhouzam · 2026-05-14T00:15:59Z

@JonatanAntoni and @thorstendb-ARM

jreineckearm · 2026-05-18T14:54:28Z

Requires eclipse-cdt-cloud/timeline-chart#338

JonatanAntoni · 2026-05-19T10:00:11Z

I confirm the cursor on a time-line chart gets a row-based overlay label reflecting the full state label at the cursor position.

I do observe a strange behaviour though: Initially, after clicking into the time chart canvas, the cursor moves along with the mouse. But after a while the cursor becomes sticky and does not follow the mouse movement anymore. Once I click again into the canvas, the cursor moves again.

Opinion: I'd expect the cursor to span all visible time-based graphs and being shown in a similar way. With this change, the cursor on other views is just set the the time position where the mouse click appears but does not move along with the mouse pointer, nor does it show similar signal markers. E.g., in a time XY with multiple signals, we should have current value displayed at the cursor position as well while the cursor follows the mouse pointer.

JonatanAntoni · 2026-05-19T10:11:35Z

        "@vscode/vsce": "2.25.0",
-        "@types/react": "18.3.8"
+        "@types/react": "18.3.8",
+        "pixi.js-legacy": "^7.3.2"


Do we need to repeat this transitive dependency here?

This one is a big one, we upgraded from 5 - 7, but maybe no, we can test later! ;)

Integrate rich cursor and fix tooltip pointer events

b7dec2b

- Add TimeGraphChartRichCursor layer to gantt chart - Set tooltip pointerEvents to 'none' to avoid blocking canvas events - Add pixi.js-legacy resolution to force 7.x from linked timeline-chart

JonatanAntoni reviewed May 19, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integrate rich cursor and fix tooltip pointer events#395

Integrate rich cursor and fix tooltip pointer events#395
MatthewKhouzam wants to merge 1 commit into
eclipse-cdt-cloud:masterfrom
MatthewKhouzam:tooltips_plusplus

MatthewKhouzam commented May 14, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 14, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

MatthewKhouzam commented May 14, 2026

Uh oh!

jreineckearm commented May 18, 2026

Uh oh!

JonatanAntoni commented May 19, 2026 •

edited

Loading

Uh oh!

JonatanAntoni May 19, 2026

Uh oh!

MatthewKhouzam May 20, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

MatthewKhouzam commented May 14, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What it does

How to test

Follow-ups

Review checklist

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

MatthewKhouzam commented May 14, 2026

Uh oh!

jreineckearm commented May 18, 2026

Uh oh!

JonatanAntoni commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JonatanAntoni May 19, 2026

Choose a reason for hiding this comment

Uh oh!

MatthewKhouzam May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MatthewKhouzam commented May 14, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 14, 2026 •

edited

Loading

JonatanAntoni commented May 19, 2026 •

edited

Loading

MatthewKhouzam May 20, 2026 •

edited

Loading