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 
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
Thanks for your answer! I have now created a working script, that creates the needed network graph. Now Im wondering why the script is looping through the code, that doesn’t belong to the dash cytoscape interface. So for instance, if i add the line print(“hello”) at the top of the code of a typical cytoscape frame (like an example of the website), it will firstly print out “hello”, then it runs through the dash cytoscape frame and the network is created (the associated link appears), and at the end it, after it runs through the
"if name == ‘main’:
app.run_server(debug=True)
the print(“hello”) statement will be executed again. Do you or somebody else now how to handle this issue?
Thanks!
Fabian
Hi,
Is your print statement in the global scope, i.e. in the same level as where you define app = Dash(...)? If so, then it is the normal behavior when debug=True… something to do with live reloading, I guess. It shouldn’t be a problem though, unless you are executing slow statements twice.
Yeah, it’s in the same level. When i change the debug to False it will run just once, now im wondering if this could cause inconveniences?
No, it should not be a problem. In production you’d run with debug=False and this would be executed just when the process starts anyways, so it is really about starting/hot-reloading the application during development.