Molecule3dViewer from .xyz?

[GwydionJon]

Greetings,
first of I am not sure if this here is the right channel for this question, but i don't know where else to post it.

I'm currently at a bit of a loss and don't really know where else to ask this.

Is there a method to use an .xyz molecule file as input for the Molecule3dViewer?
Or at least a method to have custom data as an input?

Currently this is what I'm trying to do, but it just produces an empty page.
(The example pdb file from the documentation works fine.

import dash
import dash_bio as dashbio
from dash import html
from dash_bio.utils import PdbParser, create_mol3d_style
from dash.dependencies import Input, Output


test_data = {"atoms":[{"serial":1,"positions":[0,0,0], "name":"A","atom":"A"},
                                 {"serial":2,"positions":[1,0,0], "name":"B","Atom":"B"}],
                "bonds":[{ "atom1_index":0,"atom2_index":1,"bond_order":1}]}

styles = create_mol3d_style(
    test_data['atoms'], visualization_type='cartoon', color_element='atom'
)        

app.layout = html.Div([
    dashbio.Molecule3dViewer(
        id='dashbio-default-molecule3d',
        modelData=test_data,
        styles=styles,
            backgroundColor='#FF0000',
    ),
   
if __name__ == '__main__':
    app.run_server(debug=True)

I also tried just using the first few lines of the example file, and their corresponding bonds, this also doesn't seem to work.

Any help would be appreciated.

[HammadTheOne]

Hi @GwydionJon - although the underlying Mol3d.js component does support .xyz files, the Molecule3dViewer component does not support them out of the box at this time. I have found occasional success using other tools like OpenBabel to convert other file formats to PDB and using those with our PDB parser utility to fill in the blanks between data.

If you specifically need to visualize xyz data, I would recommend the Speck component which does include direct support for this filetype, although it isn't as feature-rich as Mol3d.

As far as custom data, that will work as long as it's supplied in the exact format that the components expects. Here's a slightly modified version of your code above that displays the 3 atoms and a bond:

data = {"atoms":[{'serial': 0, 'name': 'C', 'elem': 'C', 'positions': [1.177, 31.824, -35.755], 'mass_magnitude': 32.065, 'residue_index': 0, 'residue_name': 'CYS', 'chain': 'A'},
 {'serial': 1, 'name': 'N', 'elem': 'N', 'positions': [0.029, 32.203, -34.096], 'mass_magnitude': 32.065, 'residue_index': 1, 'residue_name': 'CYS', 'chain': 'A'},
 {'serial': 2, 'name': 'H', 'elem': 'H', 'positions': [0.029, 32.203, -38.096], 'mass_magnitude': 32.065, 'residue_index': 1, 'residue_name': 'CYS', 'chain': 'A'}],
                "bonds":[{'atom1_index': 0, 'atom2_index': 1, 'bond_order': 1.0}]}


styles = create_mol3d_style(
    data['atoms'], visualization_type='sphere', color_element='atom'
)

app.layout = html.Div([
    dashbio.Molecule3dViewer(
        id='dashbio-default-molecule3d',
        modelData=data,
        styles=styles,
        backgroundColor='#4E0707',
        backgroundOpacity=1
    )
])