ADD Custom color scheme API

[hainm]

A live version here: https://nbviewer.jupyter.org/github/arose/nglview/blob/644fa66a8461b52c01a5e4df4d2a99486b690fea/notebooks/custom_color.ipynb
(might need to Zoom Out to see the full page: #840 )

Code

Selection Scheme

import nglview as nv
from nglview.color import ColormakerRegistry

cm = ColormakerRegistry
cm.add_selection_scheme("awesome",
        [['blue', '1-10']])

_ColormakerRegistry()

v0 = nv.demo(default=False)
v0.center()
v0.add_cartoon(color='awesome')
v0

NGLWidget()

assert v0._ngl_repr_dict['0']['0']['params']['colorScheme'] == 'awesome'

Function

cm.add_scheme_func('bla_bla','''
 this.atomColor = function (atom) {
     if (atom.serial < 1000) {
       return 0x0000FF // blue
     } else if (atom.serial > 2000) {
       return 0xFF0000 // red
     } else {
       return 0x00FF00 // green
     }
 }
''')

v1 = nv.demo(default=False)
v1.center()
v1.add_cartoon(color='bla_bla')
v1

NGLWidget()

# nv.write_html('index.html', [v0, v1])

# !open index.html
# !google-chrome index.html

# NOTE: If using master branch, make sure to copy nglview/static/index.js to <this folder>/nglview-js-widgets.js

[sperezconesa]

Hello,
Could you give an example function in which a color scale and not discrete colors are used? Thank you!
Best,
Sergio

[hainm]

@sperezconesa I personally don't know "how". @arose Do you have any suggestion? thanks.

[seanrjohnson]

Hi,

I can't get this example to work in Colab (works in local notebooks though).

Is there a way to do custom coloring by residue in colab?

Here is the code I tried.

Output from colab was a completely white structure
Output from local notebook was as shown above, with the blue section.

Cell 1

!pip install -q nglview pytraj
from google.colab import output
output.enable_custom_widget_manager()

Cell 2

import nglview as nv
from nglview.color import ColormakerRegistry

cm = ColormakerRegistry
cm.add_selection_scheme("awesome",
        [['blue', '1-10']])

v0 = nv.demo(default=False)
v0.center()
v0.add_cartoon(color='awesome')
v0

[hainm]

Hi,

I can't get this example to work in Colab (works in local notebooks though).

Is there a way to do custom coloring by residue in colab?

Here is the code I tried.

Output from colab was a completely white structure Output from local notebook was as shown above, with the blue section.

Cell 1

!pip install -q nglview pytraj
from google.colab import output
output.enable_custom_widget_manager()

Cell 2

import nglview as nv
from nglview.color import ColormakerRegistry

cm = ColormakerRegistry
cm.add_selection_scheme("awesome",
        [['blue', '1-10']])

v0 = nv.demo(default=False)
v0.center()
v0.add_cartoon(color='awesome')
v0

hi @seanrjohnson, there is nothing we can do about colab besides waiting for google to improve it.

[wangm23456]

This seems to be the only effective way at present.

nglview/nglview/tests/test_widget.py

Line 442 in a0b53a4

scheme = nv.color._ColorScheme([['red', '1-6'], ['yellow', '20-30']],

[mretier]

Is this also supported for surfaces? I can't seem to get it to work. The surface gets created, but it is all white. It does work for the cartoon representation.

from nglview.color import ColormakerRegistry
cm = ColormakerRegistry
cm.add_selection_scheme('awesome', [['red', '1-10'], ['yellow', '222-300']])
view.add_representation('surface', component=2, color='awesome')

[hainm]

@mretier would you mind ask something like 'is is possible to custom color of the surface repr or not?', in NGL repo: https://github.com/nglviewer/ngl

cheers.

[mretier]

@hainm I asked them here. I'll keep you posted.

[hainm]

thanks @mretier

[mretier]

@hainm please check out the response in the above mentioned thread. It appears to be possible.

[hainm]

Is this also supported for surfaces? I can't seem to get it to work. The surface gets created, but it is all white. It does work for the cartoon representation.

from nglview.color import ColormakerRegistry
cm = ColormakerRegistry
cm.add_selection_scheme('awesome', [['red', '1-10'], ['yellow', '222-300']])
view.add_representation('surface', component=2, color='awesome')

@mretier You are using component=2 here, is that your intention?

[mretier]

@hainm yes, it was my intention in this specific case. When using the same code to apply to the cartoon representation it worked

[hainm]

@mretier I've made a comment here, is that similar to what you're trying? nglviewer/ngl#1005 (comment)

[mretier]

@hainm thanks for the comment. I was able to reproduce your results. Howevever, it does not seem to work with my own code that's a bit different. It's not clear to me why it wouldn't work in my case:

import nglview as nv
from nglview.color import ColormakerRegistry
from Bio.PDB import *

# new cell
parser = PDBParser()
# load Zymomonas mobilis alcohol dehydrogenase
Zmadh = parser.get_structure('3OWO', './3owo_Zmadh.pdb')
# remove second dimer structure (PDB file stores two dimer copies)
Zmadh[0].detach_child('C')
Zmadh[0].detach_child('D')

# new cell
cm = ColormakerRegistry
cm.add_selection_scheme('awesome', [['red', '1-10'], ['yellow', '222-300']])

# new cell
# display only a monomer of the dimer
view = nv.NGLWidget()
view.add_structure(nv.BiopythonStructure(Zmadh[0]['A']))
view.add_representation('surface', color='awesome')
view

[hainm]

May be your atom selection is not right? Hai

…

On Sun, Dec 10, 2023 at 3:03 PM Michael Reiter ***@***.***> wrote: @hainm <https://github.com/hainm> thanks for the comment. I was able to reproduce your results. Howevever, it does not seem to work with my own code that's a bit different. It's not clear to me why it wouldn't work in my case: import nglview as nv from Bio.PDB import * # new cell parser = PDBParser() # load Zymomonas mobilis alcohol dehydrogenase Zmadh = parser.get_structure('3OWO', './3owo_Zmadh.pdb') # remove second dimer structure Zmadh[0].detach_child('C') Zmadh[0].detach_child('D') — Reply to this email directly, view it on GitHub <#839 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABB645JO4YENUHBARAXGFIDYIYIQPAVCNFSM4IIWRPXKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBUHEYDMNZUGM3A> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[mretier]

@hainm could you elaborate what exactly you mean? How would if find out if my selection was incorrect?

[hainm]

Can you please provide exact code + data so I can reproduce your issue? Hai

…

On Fri, Dec 15, 2023 at 10:00 AM Michael Reiter ***@***.***> wrote: @hainm <https://github.com/hainm> could you elaborate what exactly you mean? How would if find out if my selection was incorrect? — Reply to this email directly, view it on GitHub <#839 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABB645II6RN57VCLKLYVYZLYJRQZ7AVCNFSM4IIWRPXKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBVHAYDCOJWGAZA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[mretier]

@hainm thanks for your effort, the above code should be fully functional. For your convenience I attached the full code here as well as the .pdb file.
code and structure.zip

[hainm]

I could reproduce the issue with your code + file. Let me play more with it. Cheers.