Dash-Bio: NglViewer multiple representations with multiple objects

Hey dash community!
Love the tool, i just finished deploying my first dashboard for a paper i wrote.

But now I’m wondering if its possible to visualize two different objects with different molecular styles?

E.g. now i can pass two objects and select one style for both objects
(From NglMoleculeViewer | Dash for Python Documentation | Plotly)

    molstyles_dict = {
        "representations": "cartoon",
        "chosenAtomsColor": "red",
        "chosenAtomsRadius": 1,
        "molSpacingXaxis": 100,
        "sideByside": sidebyside_bool

    data_list = [ngl_parser.get_data(data_path=data_path, pdb_id=molecule, color='red',
                                     reset_view=True, local=False)
                 for molecule in ['NSP2', 'NSP4']]

    return data_list, molstyles_dict

I can add another representation for both objects with a list of representations

"representations": ["cartoon", "ball+stick"]

But i want to have a single style for each object, e.g. object one with cartoon, object two with ball+stick representation.

I tried passing a list of molstyles just as passing a list of data objects. Unfortunately this didn’t work.

Does anyone know if its possible to overlap two different objects with each object having their own representation style?

Hello @karelc,

Welcome to the community!

It’s really cool that you wrote a paper about Dash. :grin:

I’m not entirely sure what you mean by overlapping, but I am sure you can pass different styles to different figures.

If possible, could you elaborate with like a picture of what you are after? And also posting an MRE is helpful:

Hey, thanks for replying.

So i am trying to make a visualization tool where we can show the protein interacting with specific atoms. For this i would like to be able switch from the red, orange or blue atoms while keeping the same protein object (in green).

Since i can’t upload the protein files here i’ve added small examples you can grab from pastebin:

wget https://pastebin.com/raw/SvHttSxr -O protein.pdb
wget https://pastebin.com/raw/L3eGL9fV -O waters.pdb
wget https://pastebin.com/raw/rL9MDuF6 -O irons.pdb
mv *.pdb assets/

Below is a minimal working example.

from dash import Dash, dcc, html, Input, Output
import dash_bootstrap_components as dbc
import dash_bio as dashbio
import dash_bio.utils.ngl_parser as ngl_parser

compounds_path = 'assets/'

app = Dash(__name__)

    Output('molecular_viewer', 'data'),
    Output('molecular_viewer', 'molStyles'),
    Input('radioitems', 'value'),
def display_3D(value):
    if (value is None):
        raise PreventUpdate
    molstyles_dict = {
        'representations' : ['cartoon'],
    data_list = [ngl_parser.get_data(data_path=compounds_path, pdb_id='protein', color='blue', local=True), #I would like to have this representation as 'cartoon'
                 ngl_parser.get_data(data_path=compounds_path, pdb_id=value, color='red', local=True)] #I would like to have this representation as 'spacefill' or 'hyperball'
    return data_list, molstyles_dict

app.layout = html.Div([
                        {'label': 'waters', 'value': 'waters'},
                        {'label': 'irons', 'value': 'irons'},


if __name__ == '__main__':
    app.run_server(host='', debug=True)

I can combine different visual representations with

    molstyles_dict = {
        'representations' : ['cartoon', 'hyperball'],

But this will apply both cartoon and hyperball representation to both the protein and iron/water compounds. I would like to apply cartoon to the protein, and hyperball representation to the iron/water compounds.

I think this should be possible? I might be just missing how to do it in the documentation, as i know this is possible with the nglviewer within jupyter notebooks.

Thanks again!

1 Like