Streamlit + Graphistry (or other unsupported media)?

Has anyone had any luck rendering a graphistry graph in streamlit? It seems like this problem really represents a whole class of other problems like how do I render anything that is not a supported type (images, video, audio, altair, etc.)? Right now when i run the code the graphistry app just pops open a new window. I want it to be embedded in the streamlit app almost like an iframe or something like that. If you run graphistry in a notebook the graph becomes the output of the cell so it makes sense it’s just opening a new window but i want to contain that output in my streamlit app. Any thoughts or insights?
thanks,
-emmi

this works but i know it’s unsafe:

g = graphistry.bind(source="src", destination="dst", node="dst").nodes(edges).edges(edges)
plot = g.settings(url_params={'play': 1000, 'bg': '%230a0a0a'}).plot()
iframe = '<iframe src="' + plot + '", height="800", width="100%"></iframe>'
st.markdown(iframe, unsafe_allow_html=True)

Hello @Emmi, welcome to the forums !

This really looks nice at first glance and would be a very welcome addition to Streamlit ! The dev team is currently developing “Custom components” (see here) which enables the integration of HTML/JS plugins in Streamlit in a sort of “iframe” as you say.

If you have some documentation on how data is sent from Python to a JS/React component for display (that way we try to not send the full HTML into the component but only the relevant data that the component can work with) it will prove super useful to those who will want to try and build it !

Regards,
Fanilo

2 Likes

do you have an email or twitter i can share with the person running graphistry? He’s also interested in building streamlit support on their end.

I’ve filed a Github issue here so we can track it with other Streamlit contributors. You can share the link to the issue with the person running Graphistry and directly write all ideas for integration you have as comments inside :wink: .

2 Likes