✨ (explorer) make selected entity travel on top

[sophiamersmann]

• In the explorer's entity picker, selecting an entity makes the entity travel to the top
• While the animation is running, the animated entity is sometimes hidden behind other entities
• It would be better if the animated entity would always be visible and on top of the entity list
  https://github.com/owid/owid-grapher/assets/12461810/f54bd07c-e60d-4974-b5cd-09a15f142c2b

after.mov

[sophiamersmann]

• ✨ (explorer) make selected entity travel on top #3393 👈
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[marcelgerber]

Disclaimer: I have spent way too much time looking at this PR, and trying to find any other clever way to find out which element is currently animated because of a selection change.

But I couldn't really find a clever way that also works well.
My best attempt, I think, was to maintain an animatingEntityNames set, and all these entries would then get an isAnimating prop set. I think that works quite well in the case where a single entry is animated, but not for the case when multiple ones are at the same time - which is a rare occurrence at the spring settings we use, anyway.

Anyway, I don't really know where this review is going. In my mind, this change is almost a bit too complicated for something that doesn't work perfectly, and that is hard to spot anyway. But, as outlined above, I can't really provide too much of a feedback as to what to do differently :/

[marcelgerber]

Setting the class this way is, sadly, a bit fickle:
The classname will be reset the next time the React tree renders - which is, for example, the case as soon as you hover over any other PickerEntry.

An alternative could be to set isAnimating as a React state, or alternatively to pass it in as another prop from the parent somehow.

[sophiamersmann]

Good catch!

[sophiamersmann]

Maybe like this? The code is not much nicer, but at least it works as expected. "Most recently selected entity name" is a bit of a weird concept, and the most recently selected entity keeping its higher z-index even after the animation has stopped is not ideal. But it also doesn't hurt?

The reason I'm working on this is that I'm evaluating whether to use the react-flip-toolkit library for Grapher's entity selector. This is a bug that I wouldn't want the new entity selector to have. If there is no good solution here, then I would start looking into other 3rd party libraries that provide similar behaviour.

[marcelgerber]

Yes, I think this works well now.
Obviously it doesn't work well in the case when multiple entities are being selected at the same time - but as stated above, that is almost impossible to do with the current spring settings.

[sophiamersmann]

Coming back to it after a short break, this PR makes me a bit sad :(

I think I'll leave it open while working on the new entity selector. Maybe working with the reach-flip-toolkit library a bit more will show us another way...

If anything else comes to your mind regarding this, let me know :)