click events for axes

[grsr]

Hi - We are using the javascript API to listen for click events on several elements of a plot. We'd like to allow the user to click on an axis label to zoom to the corresponding region (chromosome) on a genomic locus plot. I can see events are generated for clicks, but there is no information that would allow us to identify which axis label/region the user has clicked on, the events look like:

{"type":"click","viewPath":null,"datum":null}

Is there any way to add some information to this event to allow us to zoom to a specific locus as we can with other plot elements?

Thanks,

Graham

[tuner]

Hi Graham,

It works as designed, but we can discuss whether its good design.

Click events are generated for all clicks. The datum/viewPath props indicate whether a data item was clicked or not. Only explicitly specified marks are considered here, implicit elements such as axes and background (and later, legends, grid lines, etc.) are not.

Tracking the clickable, hoverable, etc. objects is based on a tecnique called "picking". There's an isPickingSupported() in View classes controlling whether a subtree in the view hierarchy is pickable. AxisView blocks picking by returning false in the method.

genome-spy/packages/core/src/view/view.js

Line 493 in 81074d2

isPickingSupported() {

Anyway, a couple of years ago all ranged marks were double-clickable, activating a zoom transition to the mark instance with some extra padding. Thus, all cytobands, chromosomes, copy-number segments, etc. could be "focused" with dblclick. However, I did an extensive rewrite/refactor and never reimplemented it. It could be implemented again, but its behavior with user-defined handlers should be decided. Also, should it be enabled by default, how to disable/enable it, should it be disabled/enabled globally, etc. I'd like to keep it simple and not provide an excessive number of configuration options. Your thoughts are welcome!

[tuner]

Hmm. I think zooming to the data item should be the default behavior on double clicks.

If someone would like to use a custom double-click handler, the default behavior could be suppressed by preventing the default. However, it seems that I have only implemented stopPropagation(), not preventDefault(). Have to check how these actually work together in DOM. The idea has been to replicate the behavior of DOM events but in the view hierarchy instead of DOM.

genome-spy/packages/core/src/utils/interactionEvent.js

Line 26 in 81074d2

stopPropagation() {

@grsr, would this "zoom to data item on dblclick" solve your problem? It should be quite easy to implement. The event handling stuff could be figured out later.

[grsr]

Hi @tuner - Thanks for getting back to me. We have already used the API to support zooming to specific data items when the user clicks on them, but default double-click support would also be useful I think, as long as it can be overridden.

The request to make axes clickable is based on some testing with users and they all tried to click on the chromosome labels to no avail! Our current workaround is to have rects identifying the chromosomes in a layer and then mapping a click on these to zoom to the chromosome. This works, but isn't as intuitive as we'd like.

I appreciate that general support for clicking on axes might be more complicated, but I wonder if it could be supported on locus axes in particular, as they are already a special case? Would enabling picking on these in particular be feasible? I haven't dived into the code yet, but will try to have a look myself soon.

[tuner]

I see. I think users are used to IGV and other tools that don't have such smooth zooming and panning using the mouse wheel or trackpad. In IGV, the user has to first choose a discrete chromosome and then zoom in using dblclicks or something like that.

(Dbl)clicking the axes generally do not make much sense, except for the locus scale's chromosomes, where it may, in fact, be the "expected behavior".

I'd like to reserve single clicks for things like selection and dblclicks for zooming into an item. It would be confusing if in some visualizations a single click zooms and elsewhere it selects something. Also, I think the js API is an advanced feature, and most stuff should be doable solely using a visualization specification (or just work out of the box).

Thus, I propose that:

1. Zoom to ranged element using dblclick is implemented.
2. Ensure that chromosomes are properly dblclickable. Now only letters participate in picking although ranged text is used. This can be solved by adding a rect behind the chrom labels, which is only visible to the picking system (set the opacity to zero or something like that).
3. Add support for dblclick events and ensure that the event handler can prevent the default behavior.

It's more work than just exposing the internal implementation of the axis through the API, but I think its overall cleaner and user friendlier.

However, now when I think about the above, picking has to be enabled anyway! So, maybe at first:

1. Add the invisible rects behind chrom labels
2. Make them pickable/clickable

I'll make an issue with some more details...