Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Create network graph with cytoscape.js

Hey hey, i am completely new to programming and now i have the task in my bachelorthesis to write a module in python for visualisation of a energy system network written in python and so I found out about plotly dash. Now i’d like to add nodes with the cy.add function from cytoscape using dash, but i am not sure how to do use the interface of dash. I thougt dash task would be to “translate” the java code into pyhton code, but there is no api or whatever i can relate to, when i want to implement functions (like cy.add). I think i don’t get the concept of dash completely, so if anyone is willing to help, I would be very grateful.
Greetings,
Fabian

Hi, thank

Welcome to the community and best of luck with your project!

In simple terms, Dash is a web application framework where the UI (components) and the “connection” between the client and server can be completely written in Python. Cytoscape is just one of the many js libraries that Dash provides support through components.

If you are starting with all of that, I would strongly recommend you to go through the documentation and simple examples of how Dash works and then go through the cytoscape component docs.

Now, more specific to your question about the API and how it relates to the js version. The way to define nodes and edges in dash cytoscape is theought the “elements” props, which is a list of dictionaries specifying the different objects. So functions like cy.add can be implemented in python by manipulating this list, e.g. adding dictionaries.

Please make sure to ask questions along the way. I barely use cytoscape myself, but there are great people very knowledgeable on Dash and cytoscape around!

Hope this helps!

1 Like

Hey,
firstly, thank you very much for your fast reply! I tried out the simple examples of dash cytoscape today and the basics are fairly easy to understand.
Now I am facing the problem to implement the funcionality of drawing a network graph out of the given energy system data.
I am not sure if I got your last point correctly reffering to implementing functions.
In the cytoscape.js there are functions like cy.add but obviously I can’t just use them in my python script.
So to implement the nodes and edges in the dash interface I have to write funcitions myself, that take the data of the energy system and integrate them into the dash framework in the form of the props “elements”?
I’m asking because there is already a visualisation module integrated in the project based on networkx (but it is my task to search for different libraries) and the module takes the energy system and transforms it into a networkx DiGraph object. It takes the already written functions of networkx like add.nodes() to do so. That is the confusing point for me.
My approach now would be trying to take the energy system data (which is already in form of dicts) and somehow bring it to the form dash cytoscape is able to work with. Maybe you or someone else can comment my proceed :slight_smile:
Best wishes,
Fabian

My main point is basically that Dash has no opinions or functions to build the “elements” array for you. There might be other libraries to do that that I am not aware of, but I imagine that this is pretty much problem-specific to have a general solution.

I think that your approach is very solid and indeed you’ll have to somehow translate the data you have into something that follows the expected format of “elements”.

1 Like