glue-viz / bqplot-image-gl

Jupyter widget for displaying images with a focus on astronomy
MIT License
19 stars 13 forks source link

Feat circular brush #17

Closed maartenbreddels closed 4 years ago

maartenbreddels commented 4 years ago

This is for us a quick way to release https://github.com/bloomberg/bqplot/pull/1050 so we can use it in https://github.com/glue-viz/glue-jupyter/pull/165

This wasn't trivial, so I think it's good to describe the issue a bit, and how it was solved.

d3-selection uses a global event variable, which is used in d3-drag. bqplot and bqplot-image-gl both have their own copy of d3, and thus also of this event variable. This was very difficult to 'see', since the sourcemapping shows the same file for both versions of the library loaded. Using devtoolModuleFilenameTemplate: 'webpack://bqplot-image-gl/[namespace]/[resource-path]?[loaders]', in webpack, it makes it easier to see which d3 you are in when debugging.

Initially we had:

this.parent.bg_events.call(d3_drag_1.drag().on("start", () =

Where this.parent.bg_events is an instance of a d3 selection, made in bqplot, with bqplot's d3. Invoking its call, would attach the event handler in bqplot's d3 (and setting the global event in bqplot's copy), but would result in bqplot-image-gl's event handler, which would see an event == null. If instead, we make a new selection:

const bg_events = d3.select(this.parent.bg_events.node())

All the event handling happens in our copy of d3.