Dash-Bio: NglViewer multiple representations with multiple objects

Dash Python
1

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?

2

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:

3

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).

example_dash
example_dash1318×624 493 KB

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__)

@app.callback(
    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([
                
                dbc.RadioItems(
                    options=[
                        {'label': 'waters', 'value': 'waters'},
                        {'label': 'irons', 'value': 'irons'},
                    ],
                    value='waters',
                    id='radioitems',
                    inline=True,
                ),
                
                dashbio.NglMoleculeViewer(id="molecular_viewer")

])

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', 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
4

Did you find a solution for this. I would like to have the chosen atoms have different representations just a sphere.