MICommunity/ComplexViewer

Event Subscription for hover

Closed this issue · 10 comments

Is there a way of subscribing to 'hover'-event? We would like to have interactivity between the participant table and the interaction-viewer. When hovering over the interaction-viewer, we would like to highlight the same element in the participant table. Maybe also the other way around.

Yes, reciprocally, as well as with the Chord Viewer. And Sameer said it would also work with LiteMol.

This isn't implemented (yet).

Although its straight-forward enough to do, I'm open to suggestions about how it should be implemented so that it fits neatly with the other views (table; chord view; liteMol).

In my lab's cross-link vis software, synchonisation between different views have been achieved by basing everything on BackBone.js. But I guess BackBone isn't helpful as neither the chord-viewer not the complex-portal webpage use it.

SIgnal.js seems a convenient, small library for event subscription/handling.

@joshkh - do you have any suggestions about how to do it so it fits with the chord viewer? @tschaka1904 - same question but re. complex portal page?

Is LiteMol already using any library for event handling/subscription?

Re: litemol: we'll have to find the relevant PDB developer :)

Also to think about: Could we highlight more than one participant at a time? There was a comment during testing this week. (Sangya & I are writing up our notes now and will share them in due course!)

On 07/10/16 10:59, Birgit Meldal wrote:

Could we highlight more than one participant at a time?

You mean a way of selecting a subset of the participants?

In the cross-link viewer I now have it so there is a switch to say
whether clicking is for selecting participants or for toggling them
between circle/bar. Do you want something like this in the complex viewer?

The University of Edinburgh is a charitable body, registered in
Scotland, with registration number SC005336.

Yes, that's what the user suggested yesterday :)

@colin-combe I think Backbone should be fine, and since it's already being used in your lab then it makes sense to stick with it. There is a standalone version of just Backbone's Events that the other viewers and complex portal can implement:

https://www.npmjs.com/package/backbone-events-standalone

Like you said sending messages should be pretty straight forward. We can pass around the same dispatcher object into the viewers:

var dispatcher = {};
_.extend(dispatcher, Backbone.Events);

xlv = new xiNET(targetDiv1, dispatcher);
chord = new chordViewer(targetDiv2, dispatcher);
lMol = new liteMol(targetDiv3, dispatcher);

Then the complex portal can trigger events onto the dispatcher object which will be picked up by the viewers (or the other way around).

The table on the complex portal shows Interactors without stoichiometry expansion, so maybe highlighting participants by their interactorRef is a good place to start?

And on second thought, the viewers won't have to implement Backbone if they haven't already. The dispatcher object will already come with .on and .trigger functions. We'll just need to agree on some event naming conventions, something like:

select:interactor interactorRefString

dispatcher.on("select:interactor", function(interactorRef){
   // Viewers highlight the interactor
});

there's a simplistic way to subsrcibe to hover events now, see https://github.com/MICommunity/ComplexViewer/blob/master/index.html#L157-L159

you may wish to change how this works

this is a hover listener, you can see how to use it in index.html