Support for CytoscapeJS

Custom Components
1

Hi Streamlit Team,

I am about to finish my master thesis in Bioinformatics and
stumbled above Streamlit on Medium - Not sure if I should ask here or on Github:

Is there any integration with CytoscapeJS planned in the near future?
Right now my web app is Plotly-Dash based + utilizing the Dash-Cytoscape Plugin
but I would love to rewrite it in Streamlit.

2 Likes
2

Hi @IvoLeist - welcome to the community and congrats on finishing your thesis! Just looking at Cytoscape.js and that is a really interesting library. We do have support for GraphViz but I get you don’t necessarily want to change all of your chart types. While Cytoscape.js is not in the near future, I’m adding it as a feature request so you can track when it is integrated. Also we are thinking about our plugin architecture to make it possible for users to create their own plugins, so you could weigh in there as well. Best of luck on the masters and your app - would love to see it if you do end up making it in Streamlit!

2 Likes
3

Hello there, I made a very super early release component for this. Here’s streamlit-cytoscapejs which really just wraps react-cytoscape that Plotly uses for dash-cytoscape.

This is very WIP and also I won’t immediately have the bandwith to push this, but if anyone wants to help on this I’m ready to lend a hand :slight_smile:.

Also if you’re using Cytoscape.js, do tell us about your use cases + code samples, here or in the Github project so we see how to orient the roadmap for this.

PS: while my component uses the bidirectional Streamlit component template, it looks like most graphs don’t need data collected back to Streamlit so for that, if you know how to map your Cytoscape.js data to some clean HTML with Cytoscape.js loaded from CDN in a single string, you could just put this string in st.html. I wrote 2 examples of this for loading Lottie animations using Jinja and loading MaterialUI table. If you need help on this we can talk about this here too.

Best,
Fanilo

3 Likes
4

That’s amazing Fanilo!

1 Like
5

:thinking: :thinking: :thinking:

6

Hello everyone!

I’ve been working on improving the concept of a Cytoscape.js component for Streamlit, and I just finished an initial version (0.0.1) of a bidirectional component. More precisely, the component returns the element (node or edge) id tapped by the user, so that now we can trigger other visualizations based on the interaction with the network.

Since my knowledge in web development is very weak and my time is limited, instead of using a react template I chose to go for the reactless one. Despite being more verbose, I can directly use the original Cytoscape.js library, which has a ton of useful functions. To be honest, I really wanted to do a react component and collaborate with @andfanilo, but the react framework seemed quite complex.

I published the component as a package in pipy test repository here and the GitHub repository has use instructions. Don’t expect it to work without bugs as I didn’t test it extensively and I have close to 0 experience in this field haha. But for simple networks that I tested, it worked. If you find bugs, please report it on the issues page.

For the next steps (help is very much appreciated), I would like to:

  • Create a dashboard example where the bidirectional communication is utilized.
  • Expand the package to support another very useful use case, where tapping a node expands the network to show the node’s neighborhood.

Best regards,
Mateus

7

Hello @mateusccoelho, welcome to the community!

Thank you so much for the contribution (and the callout :wink:), especially if it’s your very first venture into the frontend world. Honestly I think you took the better approach for your use cases, with vanillaJS it looks like it will be much easier to integrate Cytoscape plugins or rely on any online resources. My time with React + Cytoscape was a liiitttle bit painful I have to say, because in this specific case it was hard to map vanilla JS code to its React counterpart, which is why I did not go further on this road…

Definitely update the Components Tracker and add a line for your component.

Looking forward for the Streamlit Share app hehe.

Have a nice day,
Fanilo

8

Hi! I also gave it a shot and created a Streamlit component to embed a cytoscape.js graph.

On top of creating a graph and specifying a stylesheet, you can also:

  • choose various options, e.g. the selection mode (“additive” or “single”)
  • define layout options, in particular for the “fcose” force-directed layout method which allows the enforcement of advanced placement constraints
  • get the list of selected nodes and edges in return.

You can see the component live in this example: https://share.streamlit.io/vivien0000/causal-simulator/main/app.py

Cheers,
Vivien

2 Likes