JSME React Component

[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

[ghiander]

Hi all again,

I did not have much time to spend on this but finally, I have come up with a diagnosis of the problem. I have reviewed the small JS class that renders the JSME react component and I can actually show that on the browser if I comment out withStreamlitConnection() and I just export the editor:

// export default withStreamlitConnection(App)
export default App

However, if I do that, then I lose the connection between the editor and Streamlit when I launch my app. Feels like a bug in withStreamlitConnection()?

Thanks,

Giammy

[llzhu]

Hi All:
I finally made it work with __RELEASE=True.

GitHub - llzhu/st-jsme

Test Codes:

from st_jsme import st_jsme
import streamlit as st

st.title(“JSME Test”)
#width=500px, height=300px, smiles=C
smiles = st_jsme(‘500px’, ‘300px’, ‘C’)
st.write(smiles)

[LeChuck]

Hi @llzhu,
Thanks for providing this.
Unfortunately I am failing to build your code.
I get the following error message when I run “npm run build”:

Creating an optimized production build...
Failed to compile.

[...]st-jsme/st_jsme/frontend/src/StJsme.tsx
TypeScript error in [...]st-jsme/st_jsme/frontend/src/StJsme.tsx(2,22):
Could not find a declaration file for module 'jsme-react'. '[...]st-jsme/st_jsme/frontend/node_modules/jsme-react/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/jsme-react` if it exists or add a new declaration (.d.ts) file containing `declare module 'jsme-react';`  TS7016

    1 | import React, { useEffect } from "react";
  > 2 | import { Jsme } from 'jsme-react'
      |                      ^
    3 |
    4 | import {
    5 |   Streamlit,

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! st_jsme@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the st_jsme@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     [...]2022-02-11T08_10_44_214Z-debug.log

Any idea what I’m doing wrong?
I’m on Linux. From your github instructions it looks like you’re on Windows.

Thanks,
LeChuck

[shmoopydisco]

Hi @LeChuck, not sure if we had the same error but I just submitted a pull request to @llzhu with some fixes that made my npm run build work, you can find it here:

make npm build run without error

Hope it helps.

[LeChuck]

Hi @shmoopydisco,
I copied your changes and now it is building and working without a problem.
Many thanks for this!!

Remains only the issue that you cannot start with an empty SMILES/image, but that’s just details.

Cheers,
LeChuck

[teju]

I am having the issue while running the streamlit component.please help me to get out of this.
Your app is having trouble loading the streamlit_terran_timeline.streamlit_terran_timeline component.

(The app is attempting to load the component from http://localhost:3001, 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?