Question about embedding pyglvis into streamlit

[ddkn]

Hello,

I was wondering if there was any way to embed a glvis into a streamlit webapp? I assume it should be possible since it would rely on the javascript glvis variant. Is anyone working on this? If not I may try to take a look at this.

[tzanio]

Hi @ddkn,

I am actually not familiar with streamlit and as far as I know noone has looked at embedding glvis into it :)

@tomstitt and @sshiraiwa may know more about it and be able help.

Tzanio

[ddkn]

Hi @tzanio,

It is just a different tool for doing interactive data, or data exploration, like notebooks, but you have a viewing area of all the movable or important parts, where the code is more contained in a style I prefer, versus notebooks.

I was just finishing up (today) a self study course on MFEM, and since it's interface is also in a browser it should be able to hook in somewhat (I think). I would like to try and work on it, if people are interested. If not, it is interesting for me to get working, haha.

Although it may be a separate project depending on how things are implemented, so I will start looking into it. Any advice would be welcome!

[ddkn]

So I am looking at porting things over, and javascript is not normally something I work with. I was able to use the example code using sockets from PyMFEM to run a modified example 2 (as seen below), what is neat is the interface and the code are separated, and quick to build interactive apps (FYI),

But it would be nice to get the viewer embedded into the page for obvious reasons.

I think a few interface commands from the pyglvis would be similar/same in functionality to the streamlit version I am trying to work on. However, streamlit integration with GLVis/glvis-js is a bit perplexing (unfamiliar with javascript and frameworks). It seems pyglvis has it's own index.js file, which I am trying to wrap my head around (which is different than the demo glvis-js version, as streamlit seems to prefer React (or more specifically typescript) but can use other API's (or so I am led to believe).

When trying to run glvis-js inside I got a few errors I do not understand,

I guess my question is: It seems I need to implement a <div> to embedd the script in, what are the minimum bits/parameters in javascript I need get a very basic interface running (those defined above)? Is the index.js necessary due to the State class. I think this would be replaced with the streamlit script that loads the components, but unsure of the compatibility between them (again not my expertise, but willing to implement it). Or are these questions better suited for GLVis/glvis-js.

Thanks,

[tomstitt]

Hey @ddkn , this looks pretty cool! I don't think much of pyglvis is going to be helpful here since the widget protocol is very Jupyter-specific but it would be nice if we could use pyglvis for Streamlit as well.

Is the index.js necessary due to the State class

index.js is really just an interface on top of glvis.js (glvis.js is autogenerated) but I would suggest using it otherwise you'll have to reimplement at least part of its functionality. The errors you are getting make me think that the runtime cannot load the module formats glvis.js exposes or (less likely) the parser is trying to parse a file format other than .js (you mention typescript).

what are the minimum bits/parameters in javascript I need get a very basic interface running (those defined above)?

I would say something like https://github.com/GLVis/glvis-js/blob/master/examples/basic.html#L37-L44 , but I don't know the JS world well to be honest.

If you can somehow bundle what you have I'm happy to take a look!

[ddkn]

Hi @tomstitt,

I don't think much of pyglvis is going to be helpful here since the widget protocol is very Jupyter-specific but it would be nice if we could use pyglvis for Streamlit as well.

The more I am digging into this, the more it seems that way. I finally got a hold of someone over there to hopefully help with streamlit issues I am having. They seem keen to add new components! But I think this problem is a bit strange.

One issue I am having is how to reference local files, because there is no CDN of glvis.js or index.js hosted anywhere. Streamlit seems to want things in it's own space, but that may have permission issues for people who may not have root etc.. The only way I see now is to use their react framework, but again very out of my element with javascript in general. I will create a repo so you can look at what I tried with a readme for you. It isn't much but may give you an idea.

If I hosted the glvis.js and index.js on my personal server I am able to get something to render, but the keyboard input for GLVis doesn't work. The only immediate fix was to add a text_input for keys (baby steps).

If index.js is just an interface for glvis.js then I should look at implementing one in react, but the first thing is to get glvis.js to import first without yelling.

Perhaps in the end when I can get something working it can fit under the GLVis project umbrella.

[tomstitt]

One issue I am having is how to reference local files, because there is no CDN of glvis.js or index.js hosted anywhere. ... If I hosted the glvis.js and index.js on my personal server I am able to get something to render

What about referencing https://glvis.org/live/src/index.js and https://glvis.org/live/src/glvis.js ?

but the keyboard input for GLVis doesn't work. The only immediate fix was to add a text_input for keys (baby steps).

There is a weird issue with Emscripten's keyboard binding which required us to have it listen to its parent div in that simple example, you may be able to do the same thing here but if react is capturing keypresses then react will probably need to forward those events somehow.

It's different for glvis.org/live with Vue, see https://github.com/GLVis/glvis-js/blob/master/live/index.html#L1020-L1049 and https://github.com/GLVis/glvis-js/blob/master/live/index.html#L1124-L1126. @jandrej might know more he put our current live page together!

[ddkn]

This I did not know! I will see if I can make head way with this as it would simplify things!

[ddkn]

Sorry I have been busy lately, but it turns out there is a streamlit Vue.js component instead of ReactJS. This could be used to keep most of the code that @jandrej developed in use, i.e., not duplicating or re-implementing similar work that is already done.

I think it might be wise to just implement a html version that works, then see if the Vue.js streamlit option can be used. As I am not a Vue expert, could someone explain this error for me?

Just copying the scripts div elements and such from glvis live, should render something.

Here is a starting point for the code on what I attempted.

[tzanio]

Hi @ddkn, sorry for not responding -- your message slipped through the cracks.

Maybe @jandrej can answer when he gets back from vacation if you are still interested.

[ddkn]

Hi @tzanio,

No worries, life gets busy. Sorry I was also in the process of moving. I haven't looked at this in a while. If he was interested sure! But again, not familiar with vue.js (or javascript itself). It would be neat to have that feature available for streamlit, but I focused on just working through notebooks to finish my course.