JSME React Component

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

1 Like

Nobody?

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

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. :blush:

2 Likes

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. :smile:
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

1 Like

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

1 Like

You had my curiosity, but now you have my attention :eye: :eye:

4 Likes

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 :slight_smile: ?

Cheers,
Fanilo

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