3dmol / 3Dmol.js

WebGL accelerated JavaScript molecular graphics library
Other
770 stars 191 forks source link

Assign Property to selection, select and colour by property #773

Closed JavierSanchez-Utges closed 3 months ago

JavierSanchez-Utges commented 3 months ago

I would like to assign properties or attributes to my selection. This would be the equivalent of ChimeraX attributes:

attribute: binding_site

match mode: 1-to-1

recipient: residues

    #1/A:801    0

    #1/A:802    1

    #1/A:803    3

or PyMol properties:

alter_state 1, 6ej1_A_trans & chain A & resi 801, p.bs = 0

alter_state 1, 6ej1_A_trans & chain A & resi 802, p.bs = 1

alter_state 1, 6ej1_A_trans & chain A & resi 803, p.bs = 3

.

I have my selection strings already for 3DMol.js:

{hetflag: true, model: 1, chain: 'A', resi: 801,}
{hetflag: true, model: 1, chain: 'A', resi: 802,}
{hetflag: true, model: 1, chain: 'A', resi: 803,}

. I suspect there is a way to set a property for an AtomSpec or AtomSelectionSpec with properties and then these can be used to make a selection, and finally colour by the property with setColorByProperty(sel, prop, scheme), but I can't quite figure out how.

What I would like to do is to create a property called "bs" and give each one of these selections a different value:

for {hetflag: true, model: 1, chain: 'A', resi: 801,} --> bs = 0. for {hetflag: true, model: 1, chain: 'A', resi: 802,} --> bs = 1. for {hetflag: true, model: 1, chain: 'A', resi: 803,} --> bs = 3.

Then, colour by the property according to some colour palette.

Also, select by property like so? {properties:'bs == 0'} or something like that. Is this possible?

Here example file: 6ej1_updated.txt. Remember to change .txt to .cif extension.

Thanks!

JavierSanchez-Utges commented 3 months ago

OK. I think I have figured it out:

I can obtain a selection like this:

let mySel = viewer.models[5].atoms.filter(atom => atom.resn === 'EDO');

This selects all the EDO molecules in model 5.

Then I can loop through them and assign values for a given property:

mySel.forEach(atom => {
    atom.properties["bs"] = 0;
});

.

I can then apply styles to a selection based on my custom property like this:

viewer.addStyle({properties: {bs: 0}},{stick:{color:"blue", hidden: false}});

Just working on how to use setColorByProperty() with a custom property.

JavierSanchez-Utges commented 3 months ago

OK, figured it out:

This is my selection: {resn: 'EDO', model: 5, resi: "1766-1772",}.

We can use any one of the predetermined colour gradients like so:

let colorGrad = new $3Dmol.Gradient.RWB(0, 6).

Then, I can generate a colour scheme like so:

let myScheme = {min: 0, max: 6, prop: "bs", gradient: colorGrad}

where min and max determine the range of the values for my property, which is bs, and colorGrad is the previously defined colour gradient.

Finally, we can change the style of our selection, and colour it accordingly with:

viewer.setStyle({resn: 'EDO', model: 5, resi: "1766-1772",}, {stick: {colorscheme: myScheme}});.