JSME React Component

[LeChuck]

Hi Folks,

I would like to include the open source molecule editor JSME into a Streamlit app.
I’ve found out that there is already a React component: https://github.com/DouglasConnect/jsme-react
However, I’m not getting it to display in my app.
I used the component template and added something like:

import { Jsme } from 'jsme-react'
class MyComponent extends StreamlitComponentBase { 
  public render = (): ReactNode => {
	return (
    <div>
   <h1>Hello World</h1>
	<Jsme height="500px" width="800px" />
	</div>
	  )
  }
}
export default withStreamlitConnection(MyComponent);

The “Hello World” shows up but not the rest.
I am very new to React, JS, etc.

Anyone any idea how I could get it working?

Many thanks in advance.
Cheers,
LeChuck

[LeChuck]

Nobody?

[randyzwitch]

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]

Hey @LeChuck,

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]

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]

@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]

@kmcgrady

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.

You had my curiosity, but now you have my attention

[andfanilo]

Hey @LeChuck

@LeChuck

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.

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]

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

[andfanilo]

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]

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]

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

Best,
Fanilo

[napoles3d]

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

[LeChuck]

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]

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]

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]

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

Thank you!

[LeChuck]

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]

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]

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.