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:
Other things that Iâm considering here are:
Any comments are welcome.
Best regards!!
J. M. NĂĄpoles
8 Likes
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
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
1 Like
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
1 Like
Hi @randyzwitch, thanks for your feedback. Turning this like pip-installable would be great, I will follow your example.
Thanks
1 Like
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
1 Like
@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:
please let me know if you can run it.
Regards!!
1 Like
The second line should be
from stmol import component_3dmol
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
2 Likes
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 
2 Likes
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??
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.
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 !
1 Like
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
1 Like
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 
1 Like
@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.