JSME React Component

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

[wmktt]

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,

1. • 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)].
2. • 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 ]
3. • 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]

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

[Anand_Chandra]

I also am not able to get it to work when “_RELEASE=True”. The frontend compiled correctly so I am not able to figure out what went wrong. I get the same error as @LeChuck.

Thanks

[llzhu]

I am not able to make it work with __RELEASE=True either; I can make it work for __RELEASE=False:

if not _RELEASE:
_component_func = components.declare_component( “chemstreamlit”, url=“http://localhost:3000”)
else:
parent_dir = os.path.dirname(os.path.abspath(file))
build_dir = os.path.join(parent_dir, “frontend/build”)
_component_func = components.declare_component(“chemstreamlit”, path=build_dir)
build/ folder is created after I run ‘npm run build’:
12/23/2021 10:41 PM .
12/23/2021 10:41 PM …
12/23/2021 10:41 PM 1,035 asset-manifest.json
12/23/2021 10:41 PM 2,075 index.html
12/18/2021 05:54 PM 164 manifest.json
12/23/2021 10:41 PM 657 precache-manifest.60863b4728c4fd72a382d32ec0db1060.js
12/23/2021 10:41 PM 1,181 service-worker.js
12/23/2021 10:41 PM static

What is the first parameter (currently I used “chemstreamlit”) supposed to be ?

Thanks for help!

[ghiander]

Hi all,

I have also got trapped in this deployment. Essentially, it is a two-step process: Start react-JSME then run Streamlit which in turn embeds the first process.

I have created a Dockerised version of the code by @iwatobipen and I am getting no errors by either Node or Streamlit. Unfortunately, JSME seems not to be running correctly though - as when I open localhost:3000 I can see that my browser has loaded all components but the page is blank - and I have no idea where to start debugging it. Note that I am not a JS developer so I might easily be missing something important.

My next attempt will be running the original react-JSME code to see whether or not the code by Douglas runs fine. The Streamlit part runs fine instead but of course, the component is just embedding a blank page…

I am happy to share with you my Dockerfile:

FROM node:12.22.8-buster-slim
COPY --from=python:3.8.12-slim-buster / /

# Install required packages
COPY env/ /env
RUN python -m pip install -r /env/requirements.txt \
    && pip cache purge

# Install NPM daemon manager
RUN npm install pm2 -g

# Install JSME
COPY jsme/ /jsme
RUN cd /jsme && npm install

COPY src/ /app
EXPOSE 8501
EXPOSE 3000
WORKDIR /app
CMD [ "run" ]

[ghiander]

Hi all again,

A little update on this. I have repeated the Dockerisation on @iwatobipen code without changing anything in the structure of the folders, just in case, but the result is the same: I can run Node and Streamlit but localhost:3000 is just a blank page for which the explorer says that all elements have been loaded correctly. Clearly, if the code works for some of us there is just a reproducibility problem. My guess is that depends on the Node version. @iwatobipen what Node version did you use to deploy your app?

Thanks,

Giammy