Include javascript file in streamlit component for htmt render

Custom Components
1

Hello,

I am trying to implement a streamlit component with a viewer already prebuilt seemingly from webpack more specifically glvis-js for viewing 3d meshes for finite element analysis done with mfem. I am by no means a coder in javascript or react, but just trying to include a viewer to streamlit.

Is there a way or advice on how to integrate this into a component through React or Typescript? Without missing definitions (see screenshot below). I am aware that I need to create some object for some definitions to exist, but more about the 'X' is not defined

Or is there a way to include a javascript source file into the component file tree that can be referenced by __init__.py . This is because there is no hosting of the javascript file on any CDN, an example is in the code snippet below,

# __init__.py
import streamlit.components.v1 as components

...

def my_component(var1, var2, key=None):
    component.html("<script src='<SCRIPT_LOCAL_TO_COMPONENT>'>...</script>")

This would be the simplest way to get the application working, or is there a way to use the provided index.js wrapper for glvis.js into the frontend component from glvis-js that may not conflict with the internals? Here is the
initial conversation I started.

Any advice or direction would be greatly appreciated.

Cheers,

Debug info

  • Streamlit version: 0.81.1
  • Python version: 3.7.10
  • OS version: macOS High Sierra
  • Browser version: Firefox 88.0

Screenshot

image
image804Ă—827 180 KB

From github from Fanilo

Since this is more of a Streamlit usage question, you will get a bit more answers on the forum, especially if it’s about creating new components/visualizers in Streamlit, we’re always on the lookout for those!

Now regarding your question (we can go into detail on the forum :wink: ), I haven’t tested this is still intuition but if you’re trying the

def my_component(var1, var2, key=None): 
    component.html("<script src='<SCRIPT_LOCAL_TO_COMPONENT>'>...</script>")

method, my guess is SCRIPT_LOCAL_TO_COMPONENT will need to be in Streamlit’s static folder (which you can find with python -c "import streamlit as st; print(st.__path__) , check out this answer for a bit more detail).

Another way would be to read the entire glviz.js in Python and then pasting the content inside the <script> tag in the components.html call.

PS. Thanks Fanilo

1 Like
2

Ideally I would like to implement this correctly, but as a non-frontend person, I would like to learn how to translate the src/index.js and code found in examples/basic.html of the GLVis/glvis-js repository.

I am unsure if just using the js method as you discussed is appropriate or if it is better to embed this into the MyComponent.tsx file.

My next question is, is there a way for the component to use it’s own static files? or files be copied into the static directory of streamlit?

3

So it looks like glvis-js is built using Emscripten, is react known to be able to import this correctly? or is there a way?

One solution is that glvis does have CDN for some scripts if I were to go down the componets.html route, but it seems that importing glvis-js into frontend and interfacing the emscripten file into react would be best, but those no-restricted-globals do not help.

Online it suggests putting something like /* eslint no-restricted-globals:0 */, /* eslint disable */ or some variant that ignores the next line, but no luck so far.

I tried,

import glvis from "./glvis.js"
...
var div = document.createElement("div")
var glv = new glvis.State(this.div, this.width, this.height)

Which creates the current screenshot error in the first post.

4

@andfanilo I saw that you implemented a Vue.js variant of streamlit. Turns out GLVis has a variant under glvis.org/live that was implemented in Vue. Do you think porting this over to the streamlit vue variant would work or mitigate the issues I am seeing about undefined variables?