onLineEnter() Function Param to Highlight DataCurve

[chanmSC]

Is your feature request related to a problem?

No.

Requested solution or feature

For the DataCurve components to able to take some function parameter such as onLineEnter() to highlight a DataCurve line by increasing its thickness.

Alternatives you've considered

This may be more flexible and fit better with existing patterns as 2 separate functions.

1: Similar to the existing onDataPointEnter function param, an onLineEnter function param to be triggered when a DataCurve line is entered (which would then make sense to also have the corresponding onLineClick and onLineLeave params).

2: To "highlight" a DataCurve, perhaps a new css custom property i.e. --h5w-line-thickness or an integer param on DataCurve i.e. thickness="2" (which would be the same pattern as the existing glyphSize).

Additional context

Particularly for multiline plots, it would be very helpful for visual clarity to have some way to highlight a "current" line.

I currently "solve" this issue by increasing the glyphSize on onDataPointEnter, however, it takes quites a lot of motor dexterity when attempting to hover over the exact pixel of data points.

Being able to visually highlight a particular line (especially when viewing plots with more than 4 lines) would greatly increase the motor accessibility and visual accessibility for all users.

[axelboc]

Hi @chanmSC!

Exposing some events from the internal Three.js line object shouldn't be a problem.

However, pointer precision and line thickness are tricky beasts. Regarding thickness, most WebGL implementations don't support drawing thick lines. The workaround is to use a mesh, but the Line2 and LineMaterial implementations are only available as examples in the Three.JS codebase. To use them, we would have to install three-stdlib or drei in @h5web/lib, which we're not willing to do at this time. We also had concerns with very large datasets, since, if I recall, a mesh-based line geometry would have to be recomputed on resize of the WebGL canvas.

As a quick way forward, I encourage you to maybe try to re-implement your own DataCurve component and adapt it to your use case (notably with Line2 instead of Line). You'll probably need the following building blocks available in @h5web/lib: useGeometry, Glyphs, ErrorBars. You can then expose your own events as well and experiment away with various pointer interactions.

[chanmSC]

Hi @axelboc,

That's great to know it'll be possible to expose the line object events! (This alone will already be tremendously helpful, so people won't need quite the dexterity required to hover or click on data point pixels.)

I really appreciate your quick and detailed response! The suggestion for an alternate solution regarding the DataCurve, and the explanation on the components and packages I'd likely need to look at are a lifeline!

Thank you!