def test_dbsp006_custom_view(dash_duo):
app = dash.Dash(__name__)
app.layout = html.Div(
simple_app_layout(dash_bio.Speck(id=_COMPONENT_ID, data=_data)))
new_view = {
'ao': 0.1,
'outline': 1,
'dofStrength': 0.4,
'resolution': 600,
'atomScale': 0.15,
'relativeAtomScale': 0.51,
'bonds': True,
'bondScale': 0.75
}
simple_app_callback(
app,
dash_duo,
component_id=_COMPONENT_ID,
test_prop_name='view',
test_prop_value=json.dumps(new_view),
prop_value_type='dict',
validation_fn=lambda x: json.dumps(x) == json.dumps(new_view),
take_snapshot=True)
def speck_component(index, molecule):
return dashbio.Speck(id=f'my-dashbio-speck{index}',
view={
'resolution': 500,
'ao': 1,
'atomScale': .25,
'relativeAtomScale': 0.10,
'bonds': True
},
data=molecule)
def test_dbsp005_preset_view_stickball(dash_duo):
app = dash.Dash(__name__)
app.layout = html.Div(
simple_app_layout(dash_bio.Speck(id=_COMPONENT_ID, data=_data)))
simple_app_callback(app,
dash_duo,
component_id=_COMPONENT_ID,
test_prop_name='presetView',
test_prop_value='stickball',
prop_value_type='string',
take_snapshot=True)
def test_dbsp002_click_and_drag(dash_duo):
app = dash.Dash(__name__)
app.layout = html.Div(dash_bio.Speck(id=_COMPONENT_ID, data=_data))
dash_duo.start_server(app)
dash_duo.wait_for_element('#' + _COMPONENT_ID)
speck = dash_duo.find_element('#' + _COMPONENT_ID + ' canvas')
ac = ActionChains(dash_duo.driver)
ac.move_to_element(speck).key_down(Keys.SHIFT).drag_and_drop_by_offset(
speck, -50, 100).key_up(Keys.SHIFT).perform()
dash_duo.percy_snapshot('test-speck_click_and_drag')
def test_dbsp001_rotate(dash_duo):
app = dash.Dash(__name__)
app.layout = html.Div(
dash_bio.Speck(id=_COMPONENT_ID, data=_data, view={"brightness": 0}))
dash_duo.start_server(app)
dash_duo.wait_for_element('#' + _COMPONENT_ID)
speck = dash_duo.find_element('#' + _COMPONENT_ID + ' canvas')
ac = ActionChains(dash_duo.driver)
ac.move_to_element(speck).drag_and_drop_by_offset(speck, 150,
200).perform()
dash_duo.percy_snapshot('test-speck_rotate' + generate_identifier(),
convert_canvases=True)
def tab_content(active_tab, memory):
if 'point' not in memory:
raise PreventUpdate
mol_name = DATA.iloc[memory['point']].xyz_file_name
path = structures_dir + '/' + mol_name
if active_tab == 'tab-speck':
mol = xyz_reader.read_xyz(datapath_or_datastring=path,
is_datafile=True)
mol_plot = dashbio.Speck(
id='my-speck',
data=mol,
view={
'zoom': 0.06,
'resolution': 450,
# 'ao': 0.1,
'outline': 0.001,
'atomScale': 0.15,
'relativeAtomScale': 0.33,
'bonds': True
},
presetView='stickball',
)
else:
mol = aio.read(path)
model_data = xyz_to_json(mol)
mol = xyz_reader.read_xyz(datapath_or_datastring=path,
is_datafile=True)
mol_plot = html.Div([
dashbio.Molecule2dViewer(
id='my-dashbio-molecule2d',
modelData=model_data,
width=450,
height=400,
),
# html.Hr(style={'padding-top': '0pt'}),
html.Div(id='molecule2d-output')
])
return mol_plot
def tab_content(active_tab, memory):
if "point" not in memory:
raise PreventUpdate
mol_name = DATA.iloc[memory["point"]].COMP_names
path = './structures/' + mol_name + '.xyz'
if active_tab == "tab-speck":
mol = aio.read(path)
mol_data = [{
'symbol': a,
'x': xyz[0],
'y': xyz[1],
'z': xyz[2]
} for a, xyz in zip(mol.get_chemical_symbols(), mol.positions)]
mol_plot = dashbio.Speck(
id='my-speck',
data=mol_data,
view={
'zoom': 0.06,
'resolution': 450,
# 'ao': 0.0001,
# 'outline': 0.0001,
'atomScale': 0.15,
'relativeAtomScale': 0.33,
'bonds': True
},
presetView='stickball',
)
else:
svg_file = './images/' + mol_name + '.svg'
encoded = base64.b64encode(open(svg_file, 'rb').read())
svg = 'data:image/svg+xml;base64,{}'.format(encoded.decode())
mol_plot = html.Img(src=svg, style={'width': '100%'})
return mol_plot
'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
'speck_methane.xyz').read()
if PY3:
data = data.decode('utf-8')
data = xyz_reader.read_xyz(data_string=data)
app.layout = html.Div([
dcc.Dropdown(id='speck-preset-views',
options=[{
'label': 'Default',
'value': 'default'
}, {
'label': 'Ball and stick',
'value': 'stickball'
}],
value='default'),
dashbio.Speck(id='my-speck', data=data),
])
@app.callback(dash.dependencies.Output('my-speck', 'presetView'),
[dash.dependencies.Input('speck-preset-views', 'value')])
def update_preset_view(preset_name):
return preset_name
if __name__ == '__main__':
app.run_server(debug=True)
def layout():
return html.Div(id='speck-body', className='app-body', children=[
dcc.Loading(className='dashbio-loading', children=html.Div(
id='speck-container',
children=[
dash_bio.Speck(
id='speck',
view={'resolution': 600, 'zoom': 0.3},
scrollZoom=True
)
]
)),
html.Div(id='speck-control-tabs', className='control-tabs', children=[
dcc.Tabs(id='speck-tabs', value='what-is', children=[
dcc.Tab(
label='About',
value='what-is',
children=html.Div(className='control-tab', children=[
html.H4(className='what-is', children='What is Speck?'),
html.P('Speck is a WebGL-based molecule renderer. By '
'using ambient occlusion, the resolution of '
'the rendering does not suffer as you zoom in.'),
html.P('You can toggle between molecules using the menu under the '
'"Data" tab, and control parameters related to '
'the appearance of the molecule in the "View" tab. '
'These parameters can be controlled at a low level '
'with the sliders provided, or preset views can be '
'applied for a higher-level demonstration of changing '
'atom styles and rendering.')
])
),
dcc.Tab(
label='Data',
value='datasets',
children=html.Div(className='control-tab', children=[
html.Div(
className='app-controls-block',
children=[
html.Div(
className='app-controls-name',
children='Preloaded'
),
dcc.Dropdown(
id='speck-molecule-dropdown',
className='speck-dropdown',
options=[
{'label': 'DNA',
'value': '{}dna.xyz'.format(DATAPATH)},
{'label': 'Caffeine',
'value': '{}caffeine.xyz'.format(DATAPATH)},
{'label': 'Methane',
'value': '{}methane.xyz'.format(DATAPATH)},
{'label': 'Testosterone',
'value': '{}testosterone.xyz'.format(DATAPATH)},
{'label': 'Gold nanoparticle',
'value': '{}au.xyz'.format(DATAPATH)},
{'label': 'Thiolated gold nanoparticle',
'value': '{}au_thiol.xyz'.format(DATAPATH)},
{'label': 'Benzene',
'value': '{}benzene.xyz'.format(DATAPATH)},
{'label': 'Protein (4E0O)',
'value': '{}4E0O.xyz'.format(DATAPATH)}
],
value='{}dna.xyz'.format(DATAPATH)
)
]
),
html.Div(id='speck-preloaded-uploaded-alert'),
dcc.Upload(
id='speck-file-upload',
className='control-upload',
children=html.Div([
"Drag and drop .xyz files, or click \
to select files."
])
),
html.A(
html.Button(
'Download sample .xyz data',
id='speck-file-download',
className='control-download'
),
href=os.path.join('assets', 'sample_data',
'speck_4QCI.xyz'),
download='4QCI.xyz'
)
])
),
dcc.Tab(
label='View',
value='view-options',
children=html.Div(className='control-tab', children=[
dcc.Checklist(
id='speck-enable-presets',
options=[{'label': 'Use presets', 'value': 'True'}],
values=[]
),
html.Hr(),
html.Div(id='speck-controls-detailed', children=default_sliders),
html.Div(
id='speck-controls-preset',
className='speck-controls',
children=[
html.Div(className='app-controls-block', children=[
html.Div(className='app-controls-name',
children='Rendering style'),
dcc.Dropdown(
id='speck-preset-rendering-dropdown',
className='speck-dropdown',
options=[
{'label': 'Default/reset',
'value': 'default'},
{'label': 'Toon',
'value': 'toon'},
],
value='default'
)
]),
html.Div(className='app-controls-block', children=[
html.Div(className='app-controls-name', children='Atom style'),
dcc.Dropdown(
id='speck-preset-atom-style-dropdown',
className='speck-dropdown',
options=[
{'label': 'Ball-and-stick',
'value': 'stickball'},
{'label': 'Licorice',
'value': 'licorice'}
],
value='default'
)
])
]
)
])
),
])
]),
dcc.Store(
id='speck-store-preset-rendering',
data=None
),
dcc.Store(
id='speck-store-preset-atom-style',
data=None
),
])
children=[html.Img(src=app.get_asset_url('ESOI-HDNN-MD-introduction2.png'),id="Simple introduction",style={"width":"100%","text-align":"center"})],
className="pretty_container two-thirds columns"
),className="raw flex-display"
)
]+\
[
html.P(children=' ',style={"text-align":"center","height":"20px"}),
html.H5(children="------- E-SOI Layer Structure -------",style={"margin":"auto","text-align":"center"}),
html.P(children=' ',style={"text-align":"center","height":"20px"})
]+\
[
html.Div([
html.Div([doc.Graph(id="ESOI-Layer")],className='pretty_container eight columns'),
html.Div([
dashbio.Speck(id='my-dashbio-speck',
view={'resolution':600,'zoom':0.2,'atomScale':0.2,'bonds':True},\
data=speckdata,presetView='stickball')
],className='pretty_container four columns')
],className="raw flex-display"),
html.Div([doc.Slider(
id="ESOI-Layer Training Stage",
min=0,
max=len(GPARAMS.Esoinn_setting.Model.learn_history_edge),
value=1,
marks={str(i):str(i) for i in range(len(GPARAMS.Esoinn_setting.Model.learn_history_edge)+1)},
step=None
)],style={"width":"100%","margin":"auto","height":"80px"})
]+\
[
html.P(children=' ',style={"text-align":"center","height":"20px"}),
html.H5(children="------- Meta-networks Training Result -------",style={"margin":"auto","text-align":"center"}),
def layout():
return html.Div(
id='speck-body',
children=[
html.Div(id='speck-container',
children=[
dash_bio.Speck(id='speck',
view={'resolution': 600},
scrollZoom=True)
]),
html.Div(id='speck-controls',
children=[
dcc.Dropdown(id='speck-molecule-dropdown',
options=[{
'label':
'DNA',
'value':
'{}dna.xyz'.format(DATAPATH)
}, {
'label':
'Caffeine',
'value':
'{}caffeine.xyz'.format(DATAPATH)
}, {
'label':
'Methane',
'value':
'{}methane.xyz'.format(DATAPATH)
}],
value='{}dna.xyz'.format(DATAPATH)),
dcc.Dropdown(id='speck-preset-dropdown',
options=[{
'label': 'Default',
'value': 'default'
}, {
'label': 'Ball-and-stick',
'value': 'stickball'
}, {
'label': 'Toon',
'value': 'toon'
}, {
'label': 'Licorice',
'value': 'licorice'
}]),
html.Hr(),
dcc.Checklist(id='speck-scroll-zoom-enable',
options=[{
'label': 'Scroll to zoom',
'value': 'scrollzoom'
}],
values=['scrollzoom']),
html.Div(id='speck-zoom-slider-container',
children=[
"Zoom molecule",
html.Br(),
dcc.Slider(
id='speck-zoom-slider',
min=0,
max=0.1,
step=0.0001,
value=0.02,
),
]),
html.Hr(),
]),
])
color='dark',
dark=True,
sticky='top',
)
MOL_LOADING= html.Div(id='speck-body',
className='app-body',
children=[
dcc.Loading(className='dashbio-loading',
children=html.Div(
id='speck-container',
children=[
dash_bio.Speck(
id='speck',
view={'resolution':600, 'zoom':0.1},
scrollZoom=True
)
]),
)
]
)
LEFT_COLUMN =dbc.Jumbotron(
[
html.Div(id='speck-control-tabs',
className='control-tabs',
children=[
dcc.Tabs(id='speck-tabs',
value='what-is',
children=[
]),
dcc.Store(
id='speck-store-preset-rendering',
data=None
),
dcc.Store(
id='speck-store-preset-atom-style',
data=None
),
]),md=4),
dbc.Col(dash_bio.Speck(
id='speck',
#data=data,
view={'resolution': 600, 'zoom': 0.3},
scrollZoom=True), md=8)
]),
])
"""
'Choose smiles to optimize: ',
dcc.Dropdown(
id='smiles-dropdown',
options=[
{'label': 'C[NH+]1CCc2ccccc2Cc2[nH]c3ccccc3c2CC1 ','value': 'C[NH+]1CCc2ccccc2Cc2[nH]c3ccccc3c2CC1'}, #ugly
{'label': 'Nc1cc2c3c(c1)CCC[NH+]3CCC2','value': 'Nc1cc2c3c(c1)CCC[NH+]3CCC2'}, #-23 ok
{'label': 'Cc1ccc(NC(=O)Nc2cc3c4c(c2)CCN4C(=O)CC3)cc1C ','value': 'Cc1ccc(NC(=O)Nc2cc3c4c(c2)CCN4C(=O)CC3)cc1C'}, #great
{'label': 'Cc1ccc2c(c1)c1c3n2CC[NH+](CCC#N)[C@@H]3CCC1 ','value': 'Cc1ccc2c(c1)c1c3n2CC[NH+](CCC#N)[C@@H]3CCC1 '} #-19 good
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_bio as dashbio
import urllib.request as urlreq
import base64
import dash_bio_utils.xyz_reader as xyz_reader
data = urlreq.urlopen("https://raw.githubusercontent.com/plotly/dash-bio/master/tests/dashbio_demos/dash-speck/data/methane.xyz").read().decode("utf-8")
data = xyz_reader.read_xyz(data, is_datafile=False)
component = html.Div(dashbio.Speck(
data=data,
id='speck',
presetView='default',
scrollZoom=True
), style={'transform': 'scale(0.5)',
'margin-top': '-190px'})
component_image = html.Div(html.Img(
src='data:image/png;base64,{}'.format(
base64.b64encode(
open(
'./images/pic_speck.png', 'rb'
).read()
).decode()
),
style={'width': '768px',
'margin-left': '0px',
'float': 'left'}
), style={'transform': 'scale(0.5)'})
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_bio as dashbio
import urllib.request as urlreq
import base64
import dash_bio_utils.xyz_reader as xyz_reader
data = urlreq.urlopen(
"https://raw.githubusercontent.com/plotly/dash-bio/master/tests/dashbio_demos/sample_data/speck_methane.xyz"
).read().decode("utf-8")
data = xyz_reader.read_xyz(data, is_datafile=False)
component = html.Div(dashbio.Speck(data=data,
id='speck',
presetView='default',
scrollZoom=True),
style={
'transform': 'scale(0.5)',
'margin-top': '-190px'
})
component_image = html.Div(html.Img(src='data:image/png;base64,{}'.format(
base64.b64encode(open('./images/pic_speck.png', 'rb').read()).decode()),
style={
'width': '768px',
'margin-left': '0px',
'float': 'left'
}),
style={'transform': 'scale(0.5)'})
