Hi @xhlu, I have been testing out the Cytoscape component- really liking it. Its simple,efficient and very convenient- esp. with integration with Dash Callbacks. Can you direct me in the way to do the following?
Quick filter for nodes that do not have targets- i.e. end nodes. I currently do it with a dash callback to make a list of elements that do not have a target- but with large charts, I am seeing this as an issue (or maybe it really isn’t?). I couldn’t find an exhaustive list of callbacks in the reference page like you usually have for other Dash components.
Any suggestion on how I can get something like a context menu for the nodes?
Is there a way to export the image as a vector? Like pdf or svg? I am thinking - for now I will try and use selenium, but would be great -especially for dense networks.
Hey @vivekvs1! Thank you for the feedback, I really appreciate it. Here are my thoughts:
There’s currently no Dash callback that outputs end nodes. Since the filter method in Cytoscape.js is imperative, there’s no current support for the declarative/callback paradigm. Thus, your current method is probably the best way to approach it; if you would like a cleaner way to do it, you could check out how it can be done in networkX, then create a function that converts to and from that library check out this ongoing issue. As for the reference, you can find all of the parameters and event properties in the Cytoscape References. Starting from tapNode, all of props listed get updated whenever a user interacts with the Cytoscape graph, which is why using them as an input to a callback is considered as an event callback. You can learn more about it in this Cytoscape user guide chapter.
Could you share me examples of context menu you have in mind? If you mean context menu that opens up when you click on a node, then it is not currently possible. However, if such menu exists as a react component, then it is possible to wrap it and create your own custom Dash component. Check out this tutorial and this webinar. Alternatively, you can build your own side menu that uses tapNodeData callbacks to update other components. Check out the usage-events for inspiration.
It’s not possible to output images directly out of a callback. However, it’s a functionality that can be added to dash-cytoscape, but would require you to modify the source code and run the build. Check out the CONTRIBUTING.md to get started, and try to modify the handleCy method from this file. I’d recommend you to take a look at the export section in the Cytoscape.js docs to learn more about how the cy selector can output to images.
The idea about approaching it through networkX is very interesting - maybe I will try to take a stab at that first.
I was thinking of a right-click on the node to give a set of options. I believe that there is a js plugin in cytoscape to do that- maybe I will come up with a workaround for that now.
Thanks again for all your efforts. This is really great!
If there’s a JS plugin for this, then it’s possible to use the techniques I mentioned previously to wrap it! It will be tougher than wrapping a react component, but it’s definitely possible. If you decide to go down that path, I encourage you to share it with us on here!