Dash Bio⑧(NGL分子を可視化)

NGL分子を可視化

NglMoleculeViewerコンポーネントを使うと、NGL分子を可視化することができます。

Dash Enterprise - https://dash.plotly.com/dash-bio/nglmoleculeviewer

上記のDash Enterpriseにあるサンプルを参考にして、NGL分子を可視化してみます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import dash
import dash_bio as dashbio
from dash import dcc, html
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate
import dash_bio.utils.ngl_parser as ngl_parser

app = dash.Dash(__name__)

data_path = "https://raw.githubusercontent.com/plotly/datasets/master/Dash_Bio/Molecular/"

dropdown_options = [
{"label": "1BNA", "value": "1BNA"},
{"label": "MPRO", "value": "MPRO"},
{"label": "PLPR", "value": "PLPR"},
{"label": "5L73", "value": "5L73"},
{"label": "NSP2", "value": "NSP2"}
]

app.layout = html.Div([
dcc.Dropdown(
id="default-ngl-molecule-dropdown",
options=dropdown_options,
placeholder="Select a molecule",
value="1BNA"
),
dashbio.NglMoleculeViewer(id="default-ngl-molecule"),
])

@app.callback(
Output("default-ngl-molecule", 'data'),
Output("default-ngl-molecule", "molStyles"),
Input("default-ngl-molecule-dropdown", "value")
)
def return_molecule(value):

if value is None:
raise PreventUpdate

molstyles_dict = {
"representations": ["cartoon", "axes+box"],
"chosenAtomsColor": "white",
"chosenAtomsRadius": 1,
"molSpacingXaxis": 100,
}

data_list = [ngl_parser.get_data(data_path=data_path, pdb_id=value, color='red',reset_view=True, local=False)]

return data_list, molstyles_dict

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

[ブラウザで表示]

NGL分子を可視化することができました。

左クリックでドラッグをすると角度を変えて表示することができ、右クリックでドラッグすると位置を変えて表示することができます。

またスクロールの上下をすることによって拡大・縮小表示をすることができます。