Issue #1818 - When searching in the stack chart, the matched nodes should be highlighted

[js636f]

The initial proposal was to use a border to highlight the matched nodes in the stack chart. But as it turned out the nodes are too tiny and I couldn't find suitable border size. So I just draw another semitransparent rectangle at the top of the matched node. I don't think this is a production-ready solution (I didn't check performance, the appearance of the highlighting can and should be improved), but now we may discuss it and I will improve it.

Fixes #1818

┆Issue is synchronized with this Jira Task

[codecov[bot]]

Codecov Report

Base: 88.56% // Head: 88.56% // Increases project coverage by +0.00% :tada:

Coverage data is based on head (aebecae) compared to base (64cdd7e). Patch coverage: 88.88% of modified lines in pull request are covered.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2957   +/-   ##
=======================================
  Coverage   88.56%   88.56%           
=======================================
  Files         282      282           
  Lines       25333    25342    +9     
  Branches     6817     6821    +4     
=======================================
+ Hits        22435    22443    +8     
- Misses       2696     2697    +1     
  Partials      202      202           

Impacted Files	Coverage Δ
src/components/stack-chart/index.js	97.77% <ø> (ø)
src/test/fixtures/mocks/canvas-context.js	88.88% <ø> (ø)
src/components/stack-chart/Canvas.js	94.17% <88.88%> (-0.27%)	:arrow_down:

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[julienw]

@julienw @gregtatum what do you think about this highlight style?

Definitely not accessible

Can we please have a look at the solution with a border please? :-)

[js636f]

@canova, @julienw Thanks for the feedback! OK, I'm working on this.

[js636f]

@canova, @julienw should it look like this? Or, perhaps I don't understand something and I have to add a frame only to the big nodes, but not to a tiny nodes (this is still something like 'minimal viable product', but the frame is bigger than these tiny nodes).

[julienw]

Sorry it took so long to answer you.

TBH I like it this way :-) even for tiny nodes.

I think there may be a bug, see this example: I'm looking for "MessageLoop", and it looks like that only half of the matches have their border.

But otherwise I think we can move forward this way. What do you think @canova?

[julienw]

Hey @js636f, is that still something you'd like to move forward to the finish line? That's totally OK if you don't, but then please tell us :-) Thanks for your feedback.

[js636f]

Hey, @julienw ! I'm a little busy, but anyway I hope I'll be able to finish this task. But if it's urgent and someone would like to continue work on it and use my code as a base - It's OK for me.

[julienw]

gently ping @js636f :)

[js636f]

Hello, @julienw I'm still hope to finish the task. If I will not be able to finish it in a week from now please give it to someone else. Thanks!

[julienw]

I still think it would be a valuable addition. But we need to highlight the full call node paths and not just the call nodes. So this needs some more work to be able to do that.

I'm keeping the PR open for now.