Change visuals when clicked

[DA-L3]

Hello,

I would like to customize the click event. I am displaying a cif-file of a protein structure. Per default if I click into the Stage, more precisely onto one residue, the widget is centered around the selection.

Now I would like to modify this click event a bit. First, I would like to color every amino acid white except the selection (so, I want to highlight the selection by color). Second I would like to add additional Shapes, e.g. lets say I have a list of residue indices for which I want to add a line / cylinder from the selection to every residue index in this list --- i.e. list of indices = [2, 4, 10], selected atom is at position 24, then I would like to add a line / cylinder from 24 to the positions 2, 4 and 10.

Is there a way to do this? I am using the nglview-package (python) which does not seem to support this out of the box, therefore I need to use the _execute_js_code method to execute JS code. However since I am not sure what is handled by nglview, I don't know which objects / variables exist and how to access them.

Thanks a lot in advance!

[ppillot]

Hello! That's a lot of different pieces, you'd need to make this work. I don't know how nglview works nor the JS objects it gives access to in the _execute_js_code routine.

• How to deactivate the default mouse click behavior
  • the control is on the clickPick-left event: stage.mouseControls.remove('clickPick-left')
• How to add your own picker method on mouse click:
  • stage.mouseControls.add('clickPick-left', myMethod) where myMethod is a callBack which receives a pickingProxy object. See https://github.com/nglviewer/ngl/blob/master/src/controls/picking-proxy.ts for all its possible properties. Note that these are optional and will depend on wether you are clicking on an atom or a bond or... I'd advise you to return it to the console to inspect it and deal accordingly
• You need to create a selection of the residue from the atom you have clicked. Then adjust your colors based on the new selection
• For the part where you draw shapes between some predefined residues and your new selection: I'd suggest using a distance representation (you can remove the labels if you don't want them) as you can set all the lines in one go through the atomPair: [[23, 189], [56, 189], [83, 189]] property where the indices are the indices of the atoms you want to draw a line between (this avoids an other level of complexity where you need x,y,z coordinates for drawing shapes)

[hainm]

@CodyLDA You can access JS object stage via this.stage in nglview