How to combine Brush and Zoom? What's the best practice?

[timur-valiev]

Hi visx community!

I'm pretty new to data visualisation and I'm exploring visx now. I wanted to build a zoomable+panable timeline with brush/preview below it. Basically, combination of Brush example but with wheel zoom/pan on timeline itself.
I tried 2 ways: 1) add brush and 'preview timeline' inside zoom's children function and 2) have zoom and brush separately and link states via parent's state. No luck with orchestrating zoom's and brush's states.

It looks like a typical case and I wonder if someone can share their approach, it seems like I miss something simple.

[timur-valiev]

Here's a pretty hacky solution - I basically merged Zoom and BaseBrush in one component so both zoom and brush manipulations are triggering same state updates. Zoom's transition matrix is the source of truth

It's definetely not the most elegant solution, but it does what I want. Maybe there is a better way to achieve that?

Here's the sandbox link if anyone is interested https://codesandbox.io/s/muddy-glade-xkuhp