airbnb / visx

🐯 visx | visualization components
https://airbnb.io/visx
MIT License
19.36k stars 713 forks source link

Shared event delegation #761

Open goaaron opened 4 years ago

goaaron commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

Screen Shot 2020-07-16 at 11 14 40 AM

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

hshoff commented 4 years ago

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