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)'})