Highlight not working properly

[lippyDesign]

If I do the follwing:

<XYPlot width={width} height={height}>
<HorizontalGridLines />
<VerticalGridLines />
<XAxis />
<YAxis />
<Highlight onBrushEnd={this.handleZoom} />
<HexbinSeries
    animation
    sizeHexagonsWithCount
    className="hexbin-size-example"
    radius={15}
    data={data}
    onValueClick={(datapoint, event) => {
        console.log({ datapoint, event });
    }}
/>

the highlighting drops randomly and unexpectedly (as if i release mouse), but i am still highlighting, however if I move Highlight to the end:

<XYPlot width={width} height={height}>
<HorizontalGridLines />
<VerticalGridLines />
<XAxis />
<YAxis />
<HexbinSeries
    animation
    sizeHexagonsWithCount
    className="hexbin-size-example"
    radius={15}
    data={data}
    onValueClick={(datapoint, event) => {
        console.log({ datapoint, event });
    }}
/>
<Highlight onBrushEnd={this.handleZoom} />

the highlighting works as expected, but now the Hexbin onValueClick event does not work. This is very annoying and is preventing us from going to prod with this

[Xiot]

I'm working on cleaning up the Highlight component here https://github.com/uber/react-vis/pull/1354

My plan is to split it up so that the Zoom and Window parts of it are separate. But the main advancement is moving the mouse handling to the XYPlot, which avoids the issues that you are seeing.

[prateek-redefcorp]

Any updates on this?