JSME React Component

randyzwitch · November 9, 2020, 2:59pm

Hi @LeChuck, welcome to the Streamlit community!

I’ve forwarded this internally to our front-end group (unfortunately, I don’t have JS experience to help you here).

Best,
Randy

kmcgrady · November 9, 2020, 6:59pm

Thanks for your patience. I took a look at your example, and it unfortunately falls into a bucket of component types that would not work at the moment. Essentially, jsme-react is making a request for the main library jsme. We originally designed our application with security in mind and blocked all requests to outside sources (Through Cross-Origin Resource Sharing or CORS).

JSME is weird because it’s not an importable library like most other libraries are. The workaround today would be to download the JSME library (not the jsme-react library) and load the library locally (we would need to test that, but if more requests are made outside, it would not work). Sorry if that seems like a lot. It might work better using the template-reactless setup.

The good news is we studied how to securely remove this block measure, and we found a solution that we hope to fix soon, hopefully by the end of the month.

Sorry, I could not give you a better answer, but I’m excited to get this fix in as it would open up more possibilities. Looking forward to seeing the JSME editor then.

LeChuck · November 10, 2020, 11:08am

Hi @kmcgrady and @randyzwitch ,

Many thanks for following up on this.
Sad, to hear that it won’t work at the moment, but I’m confident that you guys will fix it in the future.
Meanwhile I’ll have a look at the reactless template. Unfortunately I didn’t find many examples for that so far.

Having JSME (or something similar) working in Streamlit would be a valuable tool for the scientific community, since it is quite popular in cheminformatics web-apps.

Thanks again,
LeChuck

kmcgrady · November 10, 2020, 7:14pm

@LeChuck If I have some time, I can see if I can start making one for you to finish. I can’t guarantee it, but doing a ridiculously quick proof of concept should probably take an hour or two to see if it’s successful.

okld · November 10, 2020, 7:58pm

You had my curiosity, but now you have my attention

andfanilo · November 25, 2020, 4:13pm

Hey @LeChuck

Would you be able to add it to our Components Tracker so when the feature is out we don’t forget to come back to you ?

Cheers,
Fanilo

LeChuck · November 27, 2020, 8:16am

Done!
Thanks, Fanilo, for the suggestion.
Best,
Nils

andfanilo · December 18, 2020, 9:48am

Hi @LeChuck,

With Streamlit 0.73 the CORS block measure was lifted, could you try again on your component to see if other problems pop up ?

Cheers,
Fanilo

napoles3d · January 11, 2021, 1:20am

Hi @LeChuck a couple of weeks ago @iwatobipen managed to get JSME working in Streamlit:
https://iwatobipen.wordpress.com/2020/12/30/embed-molecular-editor-into-streamlit-app-streamlit-chemoinformatics-rdkit/

Hopefully it solves your problem too

andfanilo · January 11, 2021, 8:32am

@napoles3d Nice! I’d like to add it to the Component Tracker but not sure under what title: JSME ? RDKit ?

Best,
Fanilo

napoles3d · January 11, 2021, 3:27pm

Let me ask to pen, he is who can give it a name

LeChuck · January 12, 2021, 7:01am

Hi @andfanilo and @napoles3d,

Many thanks for the info of the new version and the link to @iwatobipen’s blog. And sorry for the late reply - I was on vacation.
This is really awesome!

I downloaded the example from the link and it works fine. However, it only works in development mode (when I run “npm start”). When I build with “npm run build” or “yarn build” the build process terminates fine, but the built component doesn’t work in the app.
Any ideas what could be the reason? Building other components worked for me so far…

Also, when start the component with an empty SMILES (smiles="") the component doesn’t show up at all. But this might also be an issue from JSME.

Thanks again,
LeChuck

iwatobipen · January 12, 2021, 12:35pm

Dear @LeChuck ,
I’m @iwatobipen who is author of the blog. Nice to meet you.
Thanks for reading my blog.
And could you please share error message when you run my code? I would like to try to fix the issue.
Thanks.

LeChuck · January 12, 2021, 12:49pm

Hi @iwatobipen,
Thanks for your reply. Nice to meet you too. I’m a fan of your blog.

When I try the built version, having changed “_RELEASE = True” in app.py, I get the following message in my browser:

Your app is having trouble loading the app.my_component component.

(The app is attempting to load the component from * , and hasn’t received its “streamlit:componentReady”* message.)

If this is a development build, have you started the dev server?

If this is a release build, have you compiled the frontend?

For more troubleshooting help, please see the Streamlit Component docs or visit our forums.

The frontend was compiled properly and the path is also correct.
Does it work for you?

I managed to fix the second issue: you have to completely remove the smiles="…" part from the App.js in order to start with an empty editor. My mistake…

Cheers,
LeChuck

sulee · February 5, 2021, 1:25am

I followed @iwatobipen 's worked example too. I keep getting this error. Anybody has any suggestions?

Thank you!

LeChuck · February 5, 2021, 7:12am

This looks like RDKit throws an error since it doesn’t receive a proper SMILES.
Can you print out what “res” actually is and what type?

Best,
LeChuck

sulee · February 5, 2021, 5:16pm

Thank you for replying @LeChuck ! res is “None”

This is that part of the code from @iwatobipen I used:

from rdkit import Chem
from rdkit.Chem import AllChem
from rdkit.Chem import Draw
from rdkit.Chem.Draw import SimilarityMaps
from io import BytesIO
from functools import partial
from PIL import Image
from rdkit.Chem.Draw import rdDepictor
rdDepictor.SetPreferCoordGen(True)

import streamlit.components.v1 as components

_RELEASE = False

if not _RELEASE:
_component_func = components.declare_component(
“chemstreamlit”,
url=“http://localhost:3001”
)
else:
parent_dir = os.path.dirname(os.path.abspath(file))
build_dir = os.path.join(parent_dir, “frontend/build”)
_component_func = components.declare_component(“my_component”, path=build_dir)

def my_component():
component_value = _component_func()
return component_value

res = my_component()
print(res)

sulee · February 9, 2021, 1:40am

Now I get this error. I also saw that when I do “npm start” I get this warning " ./src/App.js

Line 1:17: ‘Component’ is defined but never used no-unused-vars"

All I want at this point is to see the Molecular editor in Streamlit. I have not been able to do that.

Any suggestion is greatly appreciated! Thank you.

wmktt · March 12, 2021, 6:01am

Hi, sulee:
I tried it yestoday, sucess now!
I think you should install node&npm first.
DO THINGS AS this: GitHub - streamlit/component-template: Templates and example code for creating Streamlit Components.
If you installed npm right,

- Initialize and run the component template frontend [ Run npm start
  in FOLDER \chem_streamlit-main\chemstreamlit_js\frontend, if you use win, you have to run npm start in SHELL(AS an administrator)].
- From a separate terminal, run the template’s Streamlit app [ Run "streamlit run app.py in FOLDER \chem_streamlit-main\chemstreamlit_js, in CMD or other terminal, win10 ]
- IF in the localhost:8501 show bug (3001 things), i think verify the url=“http://localhost:3001” to url=[http://localhost:3000/]” can fix it. or just open two windows in step 1.

sulee · March 12, 2021, 5:46pm

@wmktt thank you! I’ll try this out.