Molecule visualization with Streamlit

[napoles3d]

Hi everyone, I just want to share with you a project I have started to do Comp Chem+ML related tasks with Streamlit. The first is visualizing molecules. I did a very simple (static) app with 3Dmol.js, but I want to make it bi-directional.
Here is the github repo:

GitHub - napoles-uach/stmol

Other things that I’m considering here are:

• make an interface for Molecular docking (Virtual Screening) software like Autodock Vina (Identifying Protein-Ligand Interactions with Colab | by JOSÉ MANUEL NÁPOLES DUARTE | Towards Data Science)
  -Interfacing with ML code for molecular property prediction.

Any comments are welcome.

Best regards!!

J. M. Nápoles

[randyzwitch]

Hey @napoles3d, glad you were able to get this to work out!

Are you planning on wrapping this into a pip-installable package? For my Folium package, I did something similar to you (i.e. thinking that it can be bi-directional at some point), but to get feedback from the community I made it static for now

randyzwitch/streamlit-folium

I used the component-template React template, but then ended up commenting out all of the bi-directional code:

https://github.com/randyzwitch/streamlit-folium/blob/master/streamlit_folium/init.py#L78-L111

Best,
Randy

[andfanilo]

Hey @napoles3d !

That looks amazing ! I have no chem background, but I would absolutely test your static package if you published it like @randyzwitch suggests.

I was pondering the 3D molecule viz question this morning did you check out Dash-bio’s React wrapper around 3Dmol.js ? I think it should also integrate really well into the React template of the components-template (though I didn’t check if you could run a callback on atom selection for example…).

But you know, a bi-directional jQuery method like you’re implementing should work really well too so I’ll just watch your progress feel free to ping for help.

Fanilo

[napoles3d]

Hi @randyzwitch, thanks for your feedback. Turning this like pip-installable would be great, I will follow your example.
Thanks

[napoles3d]

Hi, @andfanilo, thank you very much. Dash-bio’s React wrapper around 3Dmol.js looks very interesting, I didn’t know it, but I will check. Thanks for keeping watching!!
Regards

[napoles3d]

@andfanilo , @randyzwitch, and @tc1 , I have followed the suggestion of @randyzwitch and finally I made a pip installable package. You can try it with

$pip install stmol

There is a simple example in the tests directory:

napoles-uach/streamlit_3dmol/blob/master/tests/test.py

please let me know if you can run it.
Regards!!

[napoles3d]

The second line should be
from stmol import component_3dmol

[andfanilo]

Great @napoles3d ! I’ll have a look tomorrow.

If you feel comfortable with sharing your package more publicly, feel free to update the Components Community Tracker and move the 3D Molecule visualization to the Published section

Fanilo

[andfanilo]

I have no idea what I’m doing but I’m having fun

On a side note :

• maybe specify the type of file you are expecting to be uploaded on the “Browse” button, or limit it in the form (example : <input type="file" accept=".xls,.xlsx" />)
• When I click the “box” button multiple times, the purple box gets more and more colored.
  • what does this box represent ?
  • could we make the box disappear with some reset button ?
• I see the height and width are fixed to 800. I think you could lift those up as parameters of component_3dmol

Otherwise looks great ! I’ll let you track the ideas you like on your repo

[napoles3d]

Hey @andfanilo, glad you are having fun with the component!!.
I will take your idea of the Browse button, thanks

By the way, you are playing with the structure of the SARS-COV2 spike protein which is nowadays broadly studied.
It is true that there are some issues with the “box” button, and here I would ask for advise from all of you. I would like to control the box position and size which is controlled by this line here:

 <input type="button" value="box"
		onclick="glviewer.addBox({center:{x:200,y:180,z:160},dimensions: {w:60,h:60,d:80},color:'magenta',opacity: 0.5});glviewer.render();"></input> 

but I have not succeed to pass the values from for example a slider :S. Do you have any suggestion??

[napoles3d]

Sorry, I forgot to say why the box is important. With the box it is possible to define the region where a drug can act to have an effect on the protein which is used in some software like Autodock Vina. This is something which is done with other software (pymol for example) but here I think the process could be simplified with this component.

[andfanilo]

Hey @napoles3d,

I looked into your code a bit if you’re staying on the static route, you won’t be able to pass data from Streamlit while keeping the state of the component, as the component is recreated if you change an argument in the main function to pass values from sliders.
Your best bet there is to create HTML sliders inside the static HTML to control what’s rendered in the glviewer I made you a small PR you can inspect and build on.

If you’re staying in the static path (which I think you can), you may need to delve a bit more into 3Dmol.js docs doc and Javascript to have your render react on an internal slider change and select/remove/add back bounding boxes.

If you’re a VSCode user, I also suggest copy-pasting your HTML code block into a index.html file and using a livereload server to visualize the output of the HTML, and then you’ll be able to format your HTML there before copying it back into Streamlit code. python -m http.server will also serve your index.html to test but you don’t get the livereload from the vscode extension or Streamlit server though.

---

If you want to pass values from Streamlit, it looks like using a custom React component with 3Dmol React to control custom shapes as props is your best bet.

I can’t argue which is the better way though, it really depends on what you want your component to do and see if the React extension meets your needs, or if you want to go the deep JS static route. But it looks like a good amount of users like your plugin so maybe you can have some of their input with what you want to achieve.

Good luck !

[napoles3d]

Hi @andfanilo. Love your reply!!
Thanks a lot, your comments are super valuable.
I will follow your advise. This is my first project involving Javascript, so there are tons of practices I need to learn, but I will continue working with this
Regards

[AvratanuBiswas]

Thanks for the component @napoles3d .Glad that I came across this,will save me a lot of time, happily will skip embedding JS part now

[MarceTU]

@andfanilo do you have any suggestion to implement jquery in Streamlit-aggrid?
I’m struggling to include a cell editor for date, such as the last example in this website: JavaScript Data Grid: Cell Editors (ag-grid.com)
the thing is that it calls a JS class and there is an index.html file which holds the reference to the jquery website, but I don’t know how to avoid that html file or pass the website info to the class.
Any help is appreciated, as is a common issue in the community and I would post the solution.