Shared event delegation

[goaaron]

Updating selections between linked graphs isn't trivial-- I've been coordinating x,y brush selection between multiple visualizations with context & reducers and thought it'd be nice to have something abstracted for this.

Victory has the SharedEvents component that offers a nice api.

I'm wondering if this kind of feature is in line with the vx roadmap?

[williaster]

hey @goaaron 👋, thanks for checking out vx.

this is an interesting idea. I don't think this is out of line with vx, but we may need to think about the API a bit and what exactly this could be used for. personally I find the Victory api strange, particularly the mutations (I don't think that's super aligned with vx, which is more declarative).

I'm actually doing something similar with event/tooltip state in our POC for a higher-level XYChart package (see here). My initial inclination is that you could do this with React Context. In the XYChart POC it also worked well to be able to have a useTooltip hook, which managed state for one component, and then wrap that in Context provider so it could be used for any child consumer as you're describing here. (this may not make as much sense for event delegation, since that's likely always going to be relevant to multiple components)

Curious if you have any more thoughts on what sorts of things you think this could handle. Maybe it could be built as part of the XYChart POC (as a separate package) for fleshing out the API + testing.

curious if @techniq has any thoughts on this.

[hshoff]

Maybe we could explore a global event emitter design? share the emitter through context and use hooks for pubsub.

quick sketch of the idea: https://codesandbox.io/s/vibrant-architecture-24kbx?file=/src/App.js

#x tooltip position is shared across charts and y is local the currently hovered chart. probably a lot more we could do here.

[hshoff]

Looks like long-term, concurrent mode safe, react way will be the new useMutableSource() hook:

• RFC https://github.com/bvaughn/rfcs/blob/useMutableSource/text/0000-use-mutable-source.md
• PR useMutableSource hook facebook/react#18000