def test_dbm2003_select_atoms_via_callback(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(
        simple_app_layout(
            dash_bio.Molecule2dViewer(id=_COMPONENT_ID, modelData=_data)))

    simple_app_callback(
        app,
        dash_duo,
        component_id=_COMPONENT_ID,
        test_prop_name='selectedAtomIds',
        test_prop_value=json.dumps([1, 4]),
        prop_value_type='list',
        validation_fn=lambda x: json.dumps(x) == json.dumps([1, 4]))

    assert len(
        dash_duo.find_elements(
            'g.nodes-container > g.node.selected[index="1"]')) == 1
    assert len(
        dash_duo.find_elements(
            'g.nodes-container > g.node.selected[index="2"]')) == 0
    assert len(
        dash_duo.find_elements(
            'g.nodes-container > g.node.selected[index="3"]')) == 0
    assert len(
        dash_duo.find_elements(
            'g.nodes-container > g.node.selected[index="4"]')) == 1
def test_dbm2004_select_deselect_atoms_via_click(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div([
        dash_bio.Molecule2dViewer(id=_COMPONENT_ID, modelData=_data),
        html.Div(id='clicked-atoms')
    ])

    @app.callback(dash.dependencies.Output('clicked-atoms', 'children'),
                  [dash.dependencies.Input(_COMPONENT_ID, 'selectedAtomIds')])
    def show_clicked_ids(ids):
        return json.dumps(ids)

    dash_duo.start_server(app)

    atom_2 = dash_duo.find_element('g.nodes-container > g.node[index="2"]')
    atom_2.click()
    assert dash_duo.find_element('#clicked-atoms').text == json.dumps([2])

    atom_3 = dash_duo.find_element('g.nodes-container > g.node[index="3"]')
    atom_3.click()
    assert dash_duo.find_element('#clicked-atoms').text == json.dumps([2, 3])

    atom_2 = dash_duo.find_element(
        'g.nodes-container > g.node.selected[index="2"]')
    atom_2.click()
    assert dash_duo.find_element('#clicked-atoms').text == json.dumps([3])
def test_dbm2002_preselected_atoms(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(
        simple_app_layout(
            dash_bio.Molecule2dViewer(id=_COMPONENT_ID,
                                      modelData=_data,
                                      selectedAtomIds=[1, 3])))

    dash_duo.start_server(app)
    dash_duo.wait_for_element('#test-mol2d')

    assert len(
        dash_duo.find_elements(
            'g.nodes-container > g.node.selected[index="1"]')) == 1
    assert len(
        dash_duo.find_elements(
            'g.nodes-container > g.node.selected[index="3"]')) == 1
Beispiel #4
0
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 test_dbm2001_load_mol_data(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(
        simple_app_layout(dash_bio.Molecule2dViewer(id=_COMPONENT_ID)))

    def compare_nodes_links(computed_props):
        given_nodes = _data['nodes']
        given_links = _data['links']
        computed_nodes = computed_props['nodes']
        computed_links = computed_props['links']

        defined_node_props = ['id', 'atom']
        for i in range(len(given_nodes)):
            for key in defined_node_props:
                if given_nodes[i][key] != computed_nodes[i][key]:
                    return False

        defined_link_props = ['bond', 'strength', 'distance']
        for i in range(len(given_links)):
            for key in defined_link_props:
                if given_links[i][key] != computed_links[i][key]:
                    return False
                if given_links[i]['source'] != \
                   computed_links[i]['source']['id']:
                    return False
                if given_links[i]['target'] != \
                   computed_links[i]['target']['id']:
                    return False
        return True

    simple_app_callback(app,
                        dash_duo,
                        component_id=_COMPONENT_ID,
                        test_prop_name='modelData',
                        test_prop_value=json.dumps(_data),
                        prop_value_type='dict',
                        validation_fn=lambda x: compare_nodes_links(x))
        temp["target"] = count_map[temp_bond[1] - 1] + 1
        temp["id"] = count
        count = count + 1
        Bonds.append(temp)

data["nodes"] = Atoms
data["links"] = Bonds

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dashbio.Molecule2dViewer(
        id='my-dashbio-molecule2d',
        modelData=data,
        #selectedAtomIds=list(range(1, 18))
    ),
    html.Hr(),
    html.Div(id='molecule2d-output')
])


@app.callback(
    dash.dependencies.Output('molecule2d-output', 'children'),
    [dash.dependencies.Input('my-dashbio-molecule2d', 'selectedAtomIds')])
def update_selected_atoms(ids):
    if ids is None or len(ids) == 0:
        return "No atom has been selected. Select atoms by clicking on them."
    return "Selected atom IDs: {}.".format(', '.join([str(i) for i in ids]))
Beispiel #7
0
def layout():
    return html.Div(
        id='mol2d-body',
        className='app-body',
        children=[
            html.Div(
                id='mol2d-control-tabs',
                className='control-tabs',
                children=[
                    dcc.Tabs(
                        id='mol2d-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 Molecule2D?'),
                                        html.
                                        P('Molecule2D is a visualizer for molecular structures.'
                                          ),
                                        html.
                                        P('In the "View" tab, you can use the text input to '
                                          'search the PubChem database by molecule name for '
                                          'structural information.'),
                                        html.
                                        P('You can also change the bond lengths with the '
                                          'slider provided.')
                                    ])),
                            dcc.Tab(
                                label='View',
                                children=html.Div(
                                    className='control-tab',
                                    children=[
                                        html.Div(
                                            title=
                                            'Search for a molecule to view',
                                            className='app-controls-block',
                                            children=[
                                                html.Div(
                                                    className=
                                                    'fullwidth-app-controls-name',
                                                    children=
                                                    'Search for molecule by name'
                                                ),
                                                html.Div(
                                                    className=
                                                    'app-controls-desc',
                                                    children=
                                                    'Search the PubChem database for a molecule '
                                                    +
                                                    'by typing in its common name or its IUPAC name, '
                                                    +
                                                    'then pressing the return key. (e.g., '
                                                    +
                                                    '"penta-2,3-diene", "tylenol", "norepinephrine")'
                                                ),
                                                dcc.Input(
                                                    id='mol2d-search',
                                                    placeholder='molecule name',
                                                    type='text',
                                                    value=
                                                    'buckminsterfullerene',
                                                    n_submit=1)
                                            ]),
                                        html.Div(
                                            title=
                                            'Change the bond length multiplier',
                                            className='app-controls-block',
                                            children=[
                                                html.Div(
                                                    className=
                                                    'app-controls-name',
                                                    children=
                                                    'Bond length multiplier'),
                                                dcc.Slider(
                                                    id='mol2d-bond-length',
                                                    min=1,
                                                    max=100,
                                                    value=1),
                                                html.Div(
                                                    className=
                                                    'app-controls-desc',
                                                    children=
                                                    'Increase bond lengths linearly from their '
                                                    +
                                                    'values at equilibrium. This visualization will be '
                                                    +
                                                    'reminiscent of chemical bond stretching.'
                                                )
                                            ]),
                                        html.Div(
                                            id='mol2d-search-results-wrapper',
                                            children=[
                                                dcc.Dropdown(
                                                    id='mol2d-search-results')
                                            ]),
                                        html.Hr(),
                                        html.Div(id='error-wrapper'),
                                        html.Div(id='mol2d-sel-atoms-output'),
                                    ]))
                        ])
                ]),
            html.Div(id='mol2d-container',
                     children=[
                         dash_bio.Molecule2dViewer(id='mol2d',
                                                   height=700,
                                                   width=700)
                     ]),
            dcc.Store(id='mol2d-search-results-store'),
            dcc.Store(id='mol2d-compound-options-store')
        ])
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

model_data = urlreq.urlopen(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
    'mol2d_buckminsterfullerene.json').read()

if PY3:
    model_data = model_data.decode('utf-8')

model_data = json.loads(model_data)

app.layout = html.Div([
    dashbio.Molecule2dViewer(id='my-dashbio-molecule2d', modelData=model_data),
    html.Hr(),
    html.Div(id='molecule2d-output')
])


@app.callback(
    dash.dependencies.Output('molecule2d-output', 'children'),
    [dash.dependencies.Input('my-dashbio-molecule2d', 'selectedAtomIds')])
def update_selected_atoms(ids):
    if ids is None or len(ids) == 0:
        return "No atom has been selected. Select atoms by clicking on them."
    return "Selected atom IDs: {}.".format(', '.join([str(i) for i in ids]))


if __name__ == '__main__':
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

div_list=[html.P(children='''3D Structures of a Specific Molecular Graph''', style={'font-size':'15pt','font-family':'Helvetica','margin-left':'30px'})]
div_list.append(html.Div(children=['Graph ID: ',dcc.Input(id='g-id',value=1,type='number',style={'border-radius':'5px','width':'40px'}), '----- Graph Label: ', html.Div(id='label1',children='Molecule Label: 1')],style={'margin-left':'60px','textAlign':'center','display':'flex'}));
div_list.append(html.Hr());

div_list1=[html.P(children='''2D Structures of a Specific Molecular Graph''', style={'font-size':'15pt','font-family':'Helvetica','margin-left':'30px'})]
div_list1.append(html.Div(children=['Graph ID: ',dcc.Input(id='g-id1',value=1,type='number',style={'border-radius':'5px','width':'40px'}), '----- Graph Label: ', html.Div(id='label2',children='Molecule Label: 1')],style={'margin-left':'60px','textAlign':'center','display':'flex'}));
div_list1.append(html.Hr());

data_2d=Get_2Ddata(1);
div_list1.append(html.Div([
    dashbio.Molecule2dViewer(
        id='my-dashbio-molecule2d',
        modelData=data_2d,
    ),
],style={'margin-left':'150px'}))

for i in range(1,16):
    temp_data=Get_data(i);
    div_list.append(html.Div(id='view'+str(i),children=[dashbio.Molecule3dViewer(styles=data,modelData=temp_data)]));

app.layout = html.Div([html.Div([
    html.H1(children='''Data Visualization for Deep Learning Project''',
        style={'textAlign':'center','color':'#7FDBFF'},id='testt'),
    html.Div(children=div_list,style={'border':'thin lightgrey solid','margin':'0 auto','width':'800px','border-radius':'5px','background':'#FCFCFC','box-shadow':'rgb(240, 240, 240) 5px 5px 5px 0px'}),
    html.Div(children=div_list1,style={'border':'thin lightgrey solid','margin':'0 auto','width':'800px','border-radius':'5px','background':'#FCFCFC','box-shadow':'rgb(240, 240, 240) 5px 5px 5px 0px'})
])],
style={'background':'''linear-gradient(rgba(255, 255, 255, 0.6),rgba(255, 255, 255, 0.6)),url("https://raw.githubusercontent.com/plotly/dash-docs/master/images/dash-pattern.png")'''})